On the DC.js github, Stock Market Selection Strategy by Lon Riesberg is listed as an example of using the dc.js library.
Lon was able to create a stacked row chart and display it as a single row.
I'd like to be able to accomplish the same thing. I've only been able to figure out how create a row chart, as shown in my codepen, and below.
HTML
<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="https://rawgit.com/dc-js/dc.js/master/dc.js" ></script>
<div id="rowChart"></div>
Javascript
items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
{Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
{Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
{Id: "06", Name: "Red", Price: "100.00", Quantity: "2",TimeStamp:676},
{Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
];
var ndx = crossfilter(items);
var Dim = ndx.dimension(function (d) {return d.Name;})
var RowBarChart1 = dc.rowChart("#rowChart")
RowBarChart1
.width(250).height(500)
.margins({top: 20, left: 15, right: 10, bottom: 20})
.dimension(Dim)
.group(Dim.group().reduceCount())
.elasticX(true)
.label(function (d) {return d.key + " " + d.value;})
.ordering(function(d) { return -d.value })
.xAxis().tickFormat(function(v){return v}).ticks(3);
dc.renderAll();
How would I make this a stacked row chart where each section is 'Red','White,' or 'Blue' and is displayed in one row?
My goal is to have a working example that I can build off of. The answer thus far has helped, but I still haven't been able to build this.
you can create a div with d3.js and add the attribute for flex...
http://codepen.io/luarmr/pen/BNQYov
var chart = d3.select("#rowChart");
var bar = chart.selectAll("div")
.data(data)
.enter().append("div")
.attr('style',function(d,i){
return (
'flex:' + d.Quantity + '; '
+ 'background:' + color(i) + ';'
)
})
The attr.style could improve.
You can add the prefix for webkit
http://caniuse.com/#search=flex
Edit
http://codepen.io/luarmr/pen/yNVZMN
The javascript code used to produce that stacked bar chart does not use DC.js at all. It only uses D3.js. This can be seen from a beautified conversion of app.min.js; one (or both?) of these functions are the ones producing that stacked bar chart:
G = function(e, t) {
var r = (o - 40) / t;
f = "";
var a = d3.select("#categories-chart").append("svg").attr("height", 50).attr("width", o),
s = 0;
a.selectAll("rect").data(e).enter().append("rect").attr("category", function(e) {
return e.key
}).attr("x", function(e) {
var t = s,
a = Math.floor(r * e.value);
return s += a, t
}).attr("y", 7).attr("width", function(e) {
var t = Math.floor(r * e.value);
return t
}).attr("height", 25).style("fill", function(e) {
return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0
}).on("click", function(e) {
f = e.key, d3.select("#categories-chart").select(".reset").style("display", null), m.filter(f).top(t), C(m, t), dc.renderAll()
}).on("mouseover", function() {
d3.select(this).style("cursor", "pointer")
}), $("rect").popover({
container: "body",
trigger: "hover",
placement: "top",
content: function() {
return d3.select(this).attr("category")
}
})
},
C = function(e, t) {
var r = (o - 40) / t,
a = 0,
s = d3.select("#categories-chart");
s.selectAll("rect").data(e).transition().duration(150).attr("x", function(e) {
var t = a,
s = Math.floor(r * e.value);
return a += s, t
}).attr("y", 7).attr("width", function(e) {
var t = Math.floor(r * e.value);
return t
}).attr("height", 25).attr("category", function(e) {
return e.key
}).style("fill", function(e) {
return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0
}), $("rect").popover({
container: "body",
trigger: "hover",
placement: "top",
content: function() {
return d3.select(this).attr("category")
}
})
},
As you can see, no DC.js. Looking around elsewhere, there doesn't seem to be a DC.js native solution to this. For now, you might have to use D3.js (e.g. jsFiddle).
I didn't find any api to create stacked row chat from DC.js, so used D3.js with the help of https://www.dashingd3js.com/d3js-scales
var items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: 1,TimeStamp:111},
{Id: "02", Name: "Green", Price: "10.00", Quantity: 1,TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: 4,TimeStamp:434},
{Id: "03", Name: "Orange", Price: "9.00", Quantity: 2,TimeStamp:545},
{Id: "06", Name: "Red", Price: "100.00", Quantity: 2,TimeStamp:676},
{Id: "05",Name: "purple", Price: "1.20", Quantity: 2,TimeStamp:777}
];
var max_x = 700; //maximum width of the graph
var height = 20; //maximum height
var temp_x = 0 ;
// calculating the quantity of all items
for (var i = 0; i < items.length; i++) {
temp_x = temp_x + items[i].Quantity;
}
var svgContainer = d3.select("body").append("svg")
.attr("width", max_x)
.attr("height", height)
var rectangles = svgContainer.selectAll("rect")
.data(items)
.enter()
.append("rect");
//temporary variable to mark start and end of an item.
var start=0;
var end=0;
var end1=0;
var rectangleAttributes = rectangles
.attr("x", function (d) {
// dynamically calculate the starting point of each item
start=end;
end=end+(d.Quantity * max_x)/temp_x;
return start;
})
.attr("height", height)
.attr("width", function (d) {
//dynamically calculate the width of each item
end1=(d.Quantity * max_x)/temp_x;
return end1; })
.style("fill", function(d) { return d.Name; });
Html code
<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></script>
<div id="rowChart"></div>
example: http://codepen.io/anon/pen/vOXPBq?editors=101
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
This is the kind of data that I have:
[
{'TotalTime': 10, 'Hour': 0, 'Name': 'Sam'},
{'TotalTime': 15, 'Hour': 1, 'Name': 'Bob'},
{'TotalTime': 300, 'Hour': 2, 'Name': 'Tom'},
... and so on till,
{'TotalTime': 124, 'Hour': 23, 'Name': 'Jon'}
]
Data for every hour of the day. And I wish to create a Gantt Chart from it where size of bars is based on TotalTime.
Names on the y axis and Hour on the x.
Is it possible to make a Gantt chart without start time and end time on d3.js?
It's possible, but you'd need to draw it yourself if you're using D3.js. So If you've made bar charts before, along those lines, setup some axes, add them to an SVG and use them to convert the data into rectangles you'll put on the chart, then label the rects with the names from the data. D3.js does not include a layout for this. If you haven't done so already, go through the tutorials: Let’s Make a Bar Chart, Parts I, II & III, then move on to looking at a custom time axis example, and the related APIs.
There are many other libraries that build on D3.js, like C3 that provide prefab charts (like D3's layouts) but I'm not aware of one that does gantt style charts. There is one example Gantt chart out there (that randomly adds tasks into various scaled time views from 1 hour to 1 week) but I found it more confusing than my own time blocks below. YMMV.
I made a more calendar looking chart with d3js that you can read through here: https://github.com/dlamblin/timeblocks. You've got different input data formatting, but you could adapt this in a pinch and swap axes for the rotation. Assuming you're willing to urgently do this asap.
To make the aforementioned easier to read & view I took it apart into a JSfiddle example.
And here's just the JavaScript inlined into the answer (this is not a gantt chart, it's a vertical layout of scheduled blocks of time over a 7 day week):
var timeFmt = d3.time.format.utc('%H.%M'),
weekdaydef = 'Mon Tue Wed Thu Fri Sat Sun'.split(' '),
weekdayseq = 'Mon Tue Wed Thu Fri Sat Sun'.split(' '),
axes = [null, null, null, null];
function hm(i) {
var s = i.toFixed(2);
return timeFmt.parse((s.length < 4) ? '0' + s : s);
}
var timeData = [
{key: "m1","wday": 0,"begin": hm(6.00),"end": hm(7.00),
label: "Rising, dress etc\n\retc"},
{key: "m2","wday": 0,"begin": hm(7.00),"end": hm(7.30),
label: "Prep Sophie"},
{key: "m3","wday": 0,"begin": hm(7.30),"end": hm(8.00),
label: "Transit to School"
}, {
key: "t1",
"wday": 1,
"begin": hm(6.00),
"end": hm(7.00),
label: "Rising, dress etc"
}, {
key: "t2",
"wday": 1,
"begin": hm(17.00),
"end": hm(18.00),
label: "call"
},
{
key: "w1",
"wday": 2,
"begin": hm(6.00),
"end": hm(7.00),
'color': 0,
label: "Rising, dress etc"
}, {
key: "w2",
"wday": 2,
"begin": hm(7.00),
"end": hm(7.30),
'color': 0,
label: "Prep Sophie"
}, {
key: "w3",
"wday": 2,
"begin": hm(7.30),
"end": hm(8.00),
'color': 1,
label: "Transit to School"
}, {
key: "w4",
"wday": 2,
"begin": hm(8.00),
"end": hm(9.00),
'color': 2,
label: "Read Emails"
}, {
key: "w5",
"wday": 2,
"begin": hm(9.00),
"end": hm(10.00),
'color': 2,
label: "Write Emails"
}, {
key: "w6",
"wday": 2,
"begin": hm(10.00),
"end": hm(13.00),
'color': 3,
label: "Job"
}, {
key: "w7",
"wday": 2,
"begin": hm(13.00),
"end": hm(14.00),
'color': 4,
label: "Lunch & Meditation"
}, {
key: "w8",
"wday": 2,
"begin": hm(14.00),
"end": hm(15.00),
'color': 5,
label: "Pick Sophie & Home"
}, {
key: "w9",
"wday": 2,
"begin": hm(15.00),
"end": hm(18.00),
'color': 0,
label: "Clean"
}, {
key: "wa",
"wday": 2,
"begin": hm(18.00),
"end": hm(19.00),
'color': 0,
label: "Plan"
}, {
key: "wb",
"wday": 2,
"begin": hm(19.00),
"end": hm(20.00),
'color': 0,
label: "Wrap: Read Email & Clean"
},
{
key: "r1",
"wday": 3,
"begin": hm(6.00),
"end": hm(7.00),
label: "Rising, dress etc"
},
{
key: "f1",
"wday": 4,
"begin": hm(6.00),
"end": hm(7.00),
label: "Rising, dress etc"
}
];
timeData = timeData.sort(function(a, b) {
var o = d3.ascending(a.wday, b.wday);
return o === 0 ? d3.ascending(a.begin, b.begin) : o;
});
// Spacing out times by 5 minutes... see display
// var timeDataMap = d3.map(timeData, function(d) {return d.key;});
// timeDataMap.forEach(function(k,v) {v.end.setMinutes(v.end.getMinutes()-5);});
// timeData = timeDataMap.values();
var scale, colors = d3.scale.category10();
colors.range(d3.range(10).map(
function(i) {
return d3.rgb(colors(i)).brighter(1.25).toString();
}));
function d3UpdateScales() {
var svg = d3.select('#timeblock')[0][0],
margin = {
top: 25,
right: 80,
bottom: 25,
left: 80
},
width = svg.clientWidth - margin.left - margin.right,
height = svg.clientHeight - margin.top - margin.bottom;
return scale = {
margin: margin,
width: width,
height: height,
time: d3.time.scale.utc() // not d3.scale.linear()
.domain([d3.min(timeData, function(d) {
return d.begin
}),
d3.max(timeData, function(d) {
return d.end
})
])
.rangeRound([0, height]),
days: d3.scale.ordinal()
.domain(weekdayseq)
.rangePoints([0, width]),
week: d3.scale.ordinal()
.domain(weekdayseq)
.rangeRoundBands([0, width], 0.05),
}
}
function d3Update() {
var scale = d3UpdateScales();
// Update…
var svg = d3.select('#timeblock');
if (svg.select('g.view')[0][0] == null) {
svg.append('g').attr('class', 'view').attr('transform', 'translate(' + scale.margin.left + ',' + scale.margin.top + ')');
}
var g = svg.select('g.view').selectAll('g.data')
.data(timeData);
// Enter…
var ge = g.enter()
.append("g")
.attr('class', 'data');
ge.append("rect")
.attr("x", function(d) {
return scale.week(weekdaydef[d.wday]) + (scale.week.rangeBand() / 2)
})
.attr("y", function(d) {
var e = new Date(d.end);
e.setMinutes(e.getMinutes() - 5);
return scale.time(d.begin) + ((scale.time(e) - scale.time(d.begin)) / 2)
})
.attr("width", 0)
.attr("height", 0)
.attr("style", function(d) {
return ("color" in d) ? "fill:" + colors(d.color) : null
})
ge.append("text")
.attr("dy", "1.1em")
.text(function(d) {
return d.label;
});
// Exit…
g.exit().remove();
// Update…
g.select("rect")
.transition()
.attr("x", function(d) {
return scale.week(weekdaydef[d.wday])
})
.attr("y", function(d) {
return scale.time(d.begin)
})
.attr("width", function(d) {
return scale.week.rangeBand()
})
.attr("height", function(d) {
var e = new Date(d.end);
e.setMinutes(e.getMinutes() - 5);
return (scale.time(e) - scale.time(d.begin))
})
g.select("text")
.transition()
.attr("x", function(d) {
return scale.week(weekdaydef[d.wday]) + 5
})
.attr("y", function(d) {
return scale.time(d.begin)
});
axesAddOrUpdate(svg);
}
function axesAddOrUpdate(svg) {
var xaxis_t = d3.svg.axis().scale(scale.week).tickSize(13).orient('top'),
yaxis_r = d3.svg.axis().scale(scale.time).tickSize(7).orient('right'),
xaxis_b = d3.svg.axis().scale(scale.week).tickSize(13),
yaxis_l = d3.svg.axis().scale(scale.time).tickSize(7).orient('left');
// global axes array contains top, right, bottom, left axis.
if (null == axes[0]) {
axes[0] = svg.append("g").attr('class', 'axis')
.attr('transform', 'translate(' + String(scale.margin.left) + ',' + String(scale.margin.top) + ')')
.call(xaxis_t);
} else {
axes[0].transition().call(xaxis_t);
}
if (null == axes[2]) {
axes[2] = svg.append("g").attr('class', 'axis')
.attr('transform', 'translate(' + String(scale.margin.left) + ',' + String(scale.height + scale.margin.top) + ')')
.call(xaxis_b);
} else {
axes[2].transition().call(xaxis_b);
}
if (null == axes[3]) {
axes[3] = svg.append("g").attr('class', 'axis')
.attr('transform', 'translate(' + String(scale.margin.left - 5) + ',' + String(scale.margin.top) + ')')
.call(yaxis_l);
} else {
axes[3].transition().call(yaxis_l);
}
if (null == axes[1]) {
axes[1] = svg.append("g").attr('class', 'axis')
.attr('transform', 'translate(' + String(scale.margin.left + scale.width + 5) + ',' + String(scale.margin.top) + ')')
.call(yaxis_r);
} else {
axes[1].transition().call(yaxis_r);
}
}
window.onload = d3Update;
d3.select('#b_rotate').on("click", function(d, i, t) {
weekdayseq.push(weekdayseq.shift());
d3Update();
});
I'm trying to visualize sold items from timeseries. I'm using Nick Rabinowitz's alluvial chart as a basis but have made few modifications to it. Everything else looks good but I would like to center the stacked bars vertically.
This is what my chart looks like at the moment:
/*Original code obtained from http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html*/
var data = {
"times": [
[{
"id": "item1",
"nodeName": "Item 1 50/2015",
"nodeValue": 9,
"incoming": []
}, {
"id": 1,
"nodeName": "Item 2 50/2015",
"nodeValue": 6,
"incoming": []
}, {
"id": 2,
"nodeName": "Item 3 50/2015",
"nodeValue": 3,
"incoming": []
}],
[{
"id": "item12",
"nodeName": "Item 1 51/2015",
"nodeValue": 8,
"incoming": []
}, {
"id": 4,
"nodeName": "Item 2 51/2015",
"nodeValue": 2,
"incoming": []
}, {
"id": 5,
"nodeName": "Item 3 51/2015",
"nodeValue": 5,
"incoming": []
}],
[{
"id": 6,
"nodeName": "Item 1 52/2015",
"nodeValue": 1,
"incoming": []
}, {
"id": 7,
"nodeName": "Item 2 52/2015",
"nodeValue": 7,
"incoming": []
}, {
"id": 8,
"nodeName": "Item 3 50/2015",
"nodeValue": 4,
"incoming": []
}]
],
"links": [{
"source": "item1",
"target": "item12",
"outValue": 9,
"inValue": 8
}, {
"source": "item12",
"target": 6,
"outValue": 8,
"inValue": 1
}, {
"source": 1,
"target": 4,
"outValue": 6,
"inValue": 2
}, {
"source": 4,
"target": 7,
"outValue": 2,
"inValue": 7
}, {
"source": 2,
"target": 5,
"outValue": 3,
"inValue": 5
}
/*,
{
"source": 5,
"target": 8,
"outValue": 5,
"inValue": 4
}*/
]
};
/* Process Data */
// make a node lookup map
var nodeMap = (function() {
var nm = {};
data.times.forEach(function(nodes) {
nodes.forEach(function(n) {
nm[n.id] = n;
// add links and assure node value
n.links = [];
n.incoming = [];
n.nodeValue = n.nodeValue || 0;
})
});
console.log(nm);
return nm;
})();
// attach links to nodes
data.links.forEach(function(link) {
console.log(link);
nodeMap[link.source].links.push(link);
nodeMap[link.target].incoming.push(link);
});
// sort by value and calculate offsets
data.times.forEach(function(nodes) {
var nCumValue = 0;
nodes.sort(function(a, b) {
return d3.descending(a.nodeValue, b.nodeValue)
});
nodes.forEach(function(n, i) {
n.order = i;
n.offsetValue = nCumValue;
nCumValue += n.nodeValue;
// same for links
var lInCumValue;
var lOutCumValue;
// outgoing
if (n.links) {
lOutCumValue = 0;
n.links.sort(function(a, b) {
return d3.descending(a.outValue, b.outValue)
});
n.links.forEach(function(l) {
l.outOffset = lOutCumValue;
lOutCumValue += l.outValue;
});
}
// incoming
if (n.incoming) {
lInCumValue = 0;
n.incoming.sort(function(a, b) {
return d3.descending(a.inValue, b.inValue)
});
n.incoming.forEach(function(l) {
l.inOffset = lInCumValue;
lInCumValue += l.inValue;
});
}
})
});
data = data.times;
// calculate maxes
var maxn = d3.max(data, function(t) {
return t.length
}),
maxv = d3.max(data, function(t) {
return d3.sum(t, function(n) {
return n.nodeValue
})
});
/* Make Vis */
// settings and scales
var w = 960,
h = 500,
gapratio = .5,
padding = 7,
x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, w], gapratio),
y = d3.scale.linear()
.domain([0, maxv])
.range([0, h - padding * maxn]),
area = d3.svg.area()
.interpolate('monotone');
// root
var vis = d3.select("#alluvial")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
// time slots
var times = vis.selectAll('g.time')
.data(data)
.enter().append('svg:g')
.attr('class', 'time')
.attr("transform", function(d, i) {
return "translate(" + x(i) + ",0)"
});
// node bars
var nodes = times.selectAll('g.node')
.data(function(d) {
return d
})
.enter().append('svg:g')
.attr('class', 'node');
nodes.append('svg:rect')
.attr('fill', 'steelblue')
.attr('y', function(n, i) {
return y(n.offsetValue) + i * padding;
})
.attr('width', x.rangeBand())
.attr('height', function(n) {
return y(n.nodeValue)
})
.append('svg:title')
.text(function(n) {
return n.nodeName
});
// links
var links = nodes.selectAll('path.link')
.data(function(n) {
return n.links || []
})
.enter().append('svg:path')
.attr('class', 'link')
.attr('d', function(l, i) {
var source = nodeMap[l.source];
var target = nodeMap[l.target];
var gapWidth = x(0);
var bandWidth = x.rangeBand() + gapWidth;
var sourceybtm = y(source.offsetValue) +
source.order * padding +
y(l.outOffset) +
y(l.outValue);
var targetybtm = y(target.offsetValue) +
target.order * padding +
y(l.inOffset) +
y(l.inValue);
var sourceytop = y(source.offsetValue) +
source.order * padding +
y(l.outOffset);
var targetytop = y(target.offsetValue) +
target.order * padding +
y(l.inOffset);
var points = [
[x.rangeBand(), sourceytop],
[x.rangeBand() + gapWidth / 5, sourceytop],
[bandWidth - gapWidth / 5, targetytop],
[bandWidth, targetytop],
[bandWidth, targetybtm],
[bandWidth - gapWidth / 5, targetybtm],
[x.rangeBand() + gapWidth / 5, sourceybtm],
[x.rangeBand(), sourceybtm]
];
return area(points);
});
body {
margin: 3em;
}
.node {
stroke: #fff;
stroke-width: 2px;
}
.link {
fill: #000;
stroke: none;
opacity: .3;
}
.node {
stroke: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="alluvial"></div>
Here is a JSFiddle if you like to play around with the code.
The solution probably lies somewhere in counting the full height of the bar and calculating the node offsets from the centerpoint.
The way the original code is structured looks like to be calculating offsets per node and then using these offsets to calculate node positions. I probably need to be able to modify this calculated offset in someway at somepoint but I just can't figure out how and where. If it is even possible.
If that isn't possible, is there another way in d3 to achieve visually similar results?
You could try calculated the maximum full height using (I've just added the lines that change, the rest is the same):
//calculate the max full height
var maxHeight=0;
data.times.forEach(function(nodes,p) {
var curHeight=0;
nodes.forEach(function(n) {
curHeight+=n.nodeValue;
});
if(curHeight > maxHeight) maxHeight=curHeight
});
And then adding (maxHeight/2 - curHeight/2) to the offset, curHeight being the total height of the nodes for each band.
To do this you can add a couple lines to the loop calculating the offset:
// sort by value and calculate offsets
data.times.forEach(function(nodes,p) {
var nCumValue = 0;
nodes.sort(function(a, b) {
return d3.descending(a.nodeValue, b.nodeValue)
});
var bandHeight = 0;
nodes.forEach(function(n) {
bandHeight+=n.nodeValue;
});
nodes.forEach(function(n, i) {
n.order = i;
n.offsetValue = nCumValue + (maxHeight/2-bandHeight/2);
Here's a JSFiddle with these changes.
This jsfiddle works on this format of data to create a piechart:
var data = [ { label: 'mylabel1', value: '1342' },
{ label: 'mylabel2', value: '1505' } ]
How do i get it to run on this format of data in this fiddle?
data=[{ country: 'Australia',
lat: '-25.274398',
lng: '133.775136',
values:
[ { label: 'ham', value: '1342' },
{ label: 'kpr', value: '1505' } ]
}]
This is the line I think I have to change but I just don't quite have it:
var pie = d3.layout.pie().value(function(d){return d.value;});
I have to get it to work on the values array in the new data object.
All my code from the 2nd jsfiddle:
var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();
var data = [{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30}];
var data = [ { label: 'mylabel1', value: '1342' },
{ label: 'mylabel2', value: '1505' } ]
data=[{ country: 'Australia',
lat: '-25.274398',
lng: '133.775136',
values:
[ { label: 'ham', value: '1342' },
{ label: 'kpr', value: '1505' } ]
}]
var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i){
return color(i);
})
.attr("d", function (d) {
// log the result of the arc generator to show how cool it is :)
console.log(arc(d));
return arc(d);
});
// add the text
arcs.append("svg:text").attr("transform", function(d){
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
return data[i].label;}
);
you have to change the data that you pass for data join. in this case it's the values array of your data:
var vis = d3.select('#chart').append("svg:svg").data([data[0].values])
also, to adjust the label drawing to this new data format, you need change return data[i].label; toreturn d.data.label;
updated jsFiddle
I have a treemap rendered with d3. Since I want to be responsive and economical (not running js if I do not really have to) I am using percentages for the divs. But the transitions are some kind of wired using percentages. After reading this issue I have tried several styleTweens but I do not have any luck ...
How can I use transitions for percentage values in d3?
Here is a fiddle of the below code: http://jsfiddle.net/0z7p68wb/ (just click somewhere on the treemap to start the animation)
var target = d3.select("#target")
render = function(data, oldData) {
// our custom d3 code
console.log("render!", data, oldData);
// draw rectangles
var margin = {margin: 0.2, padding: 2},
width = 100 - margin.margin * 2,
height = 100 - margin.margin * 2;
var treemap = d3.layout.treemap()
.size([100, 100])
//.sticky(true)
.value(function(d) { return d.size; });
// bind data
var nodes = target.datum(data)
.selectAll(".node")
.data(treemap.nodes);
// transform existing nodes
if (data !== oldData)
nodes.transition()
.duration(1500)
.call(position);
// append new nodes
nodes.enter().append("div")
.attr("class", "node")
.style("position", "absolute")
.style("display", function(d,i) { return i==0 ? "none" : "block"})
.style("background-color", "silver")
.call(position)
;
// remove obsolete nodes
nodes.exit().remove();
// set position of nodes
function position() {
this.style("left", function(d) { return d.x + "%"; })
.style("top", function(d) { return d.y + "%"; })
.style("width", function(d) { return Math.max(0, d.dx) + "%"; })
.style("height", function(d) { return Math.max(0, d.dy) + "%"; })
}
}
tree1 = {
name: "tree",
children: [
{ name: "Word-wrapping comes for free in HTML", size: 16000 },
{ name: "animate makes things fun", size: 8000 },
{ name: "data data everywhere...", size: 5220 },
{ name: "display something beautiful", size: 3623 },
{ name: "flex your muscles", size: 984 },
{ name: "physics is religion", size: 6410 },
{ name: "query and you get the answer", size: 2124 }
]
};
tree2 = {
name: "tree",
children: [
{ name: "Word-wrapping comes for free in HTML", size: 8000 },
{ name: "animate makes things fun", size: 10000 },
{ name: "data data everywhere...", size: 2220 },
{ name: "display something beautiful", size: 6623 },
{ name: "flex your muscles", size: 1984 },
{ name: "physics is religion", size: 3410 },
{ name: "query and you get the answer", size: 2124 }
]
};
tree = tree1;
render(tree, tree);
d3.select("#target").on("click", function(){
console.log("click");
tree = tree == tree1 ? tree2 : tree1;
render(tree, {});
});
Got it!
// transform existing nodes
if (data !== oldData)
nodes.transition()
.duration(1500)
.call(position)
.styleTween('left', function(d,i,a){
return d3.interpolateString(this.style.left, d.x + "%")
})
.styleTween('top', function(d,i,a){;
return d3.interpolateString(this.style.top, d.y + "%")
})
.styleTween('width', function(d,i,a){;
return d3.interpolateString(this.style.width, Math.max(0, d.dx) + "%")
})
.styleTween('height', function(d,i,a){;
return d3.interpolateString(this.style.height, Math.max(0, d.dy) + "%")
})
;
I have a bar chart with ordinal scale for the x-axis. I want to display the y-values on the top of each bar or in the bottom of each bar. It would be also acceptable to display the y-values when one hovers over the bar. Is there a function or a way in a dc.js to do that? Here is the jsfiddle and my code is below the pic>
Edit: Here is my code:
HTML
<body>
<div id='Chart'>
</div>
</body>
JS
var data = [{
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "2"
}, {
Category: "A",
ID: "2"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "2"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "4"
}, {
Category: "C",
ID: "1"
}, {
Category: "C",
ID: "2"
}, {
Category: "C",
ID: "3"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "4"
},{
Category: "C",
ID: "5"
}];
var ndx = crossfilter(data);
var XDimension = ndx.dimension(function (d) {
return d.Category;
});
var YDimension = XDimension.group().reduceCount(function (d) {
return d.value;
});
dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.label(function(d) {return d.value})
.x(d3.scale.ordinal().domain(XDimension))
dc.renderAll();
Check updated jsfiddle
.renderlet(function(chart){
var barsData = [];
var bars = chart.selectAll('.bar').each(function(d) { barsData.push(d); });
//Remove old values (if found)
d3.select(bars[0][0].parentNode).select('#inline-labels').remove();
//Create group for labels
var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id','inline-labels');
for (var i = bars[0].length - 1; i >= 0; i--) {
var b = bars[0][i];
//Only create label if bar height is tall enough
if (+b.getAttribute('height') < 18) continue;
gLabels
.append("text")
.text(barsData[i].data.value)
.attr('x', +b.getAttribute('x') + (b.getAttribute('width')/2) )
.attr('y', +b.getAttribute('y') + 15)
.attr('text-anchor', 'middle')
.attr('fill', 'white');
}
})
If you don't want the labels visible when the bars redraw (for example when bars change after user filters/clicks other chart) you can move the check of old values from de renderlet to the to a preRedraw
listener.
.on("preRedraw", function(chart){
//Remove old values (if found)
chart.select('#inline-labels').remove();
})
Alternative
D3-ish way
Demo jsfiddle
.renderlet(function (chart) {
//Check if labels exist
var gLabels = chart.select(".labels");
if (gLabels.empty()){
gLabels = chart.select(".chart-body").append('g').classed('labels', true);
}
var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);
gLabelsData.exit().remove(); //Remove unused elements
gLabelsData.enter().append("text") //Add new elements
gLabelsData
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.text(function(d){
return d3.select(d).data()[0].data.value
})
.attr('x', function(d){
return +d.getAttribute('x') + (d.getAttribute('width')/2);
})
.attr('y', function(d){ return +d.getAttribute('y') + 15; })
.attr('style', function(d){
if (+d.getAttribute('height') < 18) return "display:none";
});
})
In dc.js version 3.* . You can just use .renderLabel(true). It will print the value at top
Here's a bit of a hacky solution using the renderlet method. jsFiddle: http://jsfiddle.net/tpsc5f9f/4/
JS
var barChart = dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal().domain(XDimension))
dc.renderAll();
barChart.renderlet(function(chart){
moveGroupNames();
});
function moveGroupNames() {
var $chart = $('#Chart'),
bar = $chart.find('.bar');
bar.each(function (i, item) {
var bar_top = this.height.baseVal.value;
var bar_left = this.width.baseVal.value;
var bar_offset_x = 30;
var bar_offset_y = 33;
var bar_val = $(this).find('title').html().split(':')[1];
$chart.append('<div class="val" style="bottom:'+(bar_top+bar_offset_y)+'px;left:'+((bar_left*i)+(bar_offset_x))+'px;width:'+bar_left+'px">'+bar_val+'</div>');
});
}
Added CSS
body {
margin-top:20px;
}
#Chart {
position:relative;
}
#Chart .val {
position:absolute;
left:0;
bottom:0;
text-align: center;
}
If you use a specialized valueAccessor with a chart, you can make the following substitution in dimirc's "D3-ish way" solution.
Change
.text(function(d){
return d3.select(d).data()[0].data.value
})
To
.text(function(d){
return chart.valueAccessor()(d3.select(d).data()[0].data)
});
This function will reposition a row chart's labels to the end of each row. A similar technique could be used for a bar chart using the "y" attribute.
Labels animate along with the row rect, using chart's transitionDuration
Uses chart's valueAccessor function
Uses chart's xAxis scale to calculate label position
rowChart.on('pretransition', function(chart) {
var padding = 2;
chart.selectAll('g.row > text') //find all row labels
.attr('x', padding) //move labels to starting position
.transition() //start transition
.duration(chart.transitionDuration()) //use chart's transitionDuration so labels animate with rows
.attr('x', function(d){ //set label final position
var dataValue = chart.valueAccessor()(d); //use chart's value accessor as basis for row label position
var scaledValue = chart.xAxis().scale()(dataValue); //convert numeric value to row width
return scaledValue+padding; //return scaled value to set label position
});
});