D3.js create a dynamic color() function - javascript
I am working on this pie-chart in D3.js.
This is the data:
DATA.JSON
[
{
"key":"amministrazione",
"categoria":"funzioni",
"val2015":404571081,
"val2013":374545999
},
{
"key":"sociale",
"categoria":"funzioni",
"val2015":235251679,
"val2013":258973653
},
{
"key":"territorio e ambiente",
"categoria":"funzioni",
"val2015":286164667,
"val2013":274949400
},
{
"key":"viabilità e trasporti",
"categoria":"funzioni",
"val2015":144185664,
"val2013":140619534
},
{
"key":"istruzione",
"categoria":"funzioni",
"val2015":168774925,
"val2013":170016208
},
{
"key":"cultura",
"categoria":"funzioni",
"val2015":55868045,
"val2013":55735535
},
{
"key":"sport",
"categoria":"funzioni",
"val2015":27219432,
"val2013":31244800
},
{
"key":"turismo",
"categoria":"funzioni",
"val2015":9544845,
"val2013":7674419
},
{
"key":"sviluppo economico",
"categoria":"funzioni",
"val2015":14790363,
"val2013":16635868
},
{
"key":"servizi produttivi",
"categoria":"funzioni",
"val2015":4334,
"val2013":4440
},
{
"key":"polizia locale",
"categoria":"funzioni",
"val2015":99007202,
"val2013":102065987
},
{
"key":"giustizia",
"categoria":"funzioni",
"val2015":12147068,
"val2013":12880138
},
{
"key":"anticipazioni di cassa",
"categoria":"rimborso prestiti",
"val2015":304323808,
"val2013":304323808
},
{
"key":"finanziamenti a breve termine",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":0
},
{
"key":"prestiti obbligazionari",
"categoria":"rimborso prestiti",
"val2015":38842996,
"val2013":36652213
},
{
"key":"quota capitale di debiti pluriennali",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":47152
},
{
"key":"quota capitale di mutui e prestiti",
"categoria":"rimborso prestiti",
"val2015":128508755,
"val2013":329885961
},
{
"key":"spese per conto terzi",
"categoria":"altro",
"val2015":232661261,
"val2013":236921438
},
{
"key":"disavanzo di amministrazione",
"categoria":"altro",
"val2015":0,
"val2013":0
}
]
It shows how the governmental budget is allocated to different functions (i.e. "key"). A value is given for each year (e.g. "val2015", "val2013") and each function is part of a macro-category (i.e. "funzioni", "rimborso prestiti", or "altro").
I am trying to create a color() function that dynamically changes its domain and range depending on:
the colorRange arbitrarily assigned as domain: greenRange for "funzioni", redRange for "rimborso prestiti" and blueRange for "altro"
the number of functions ("key") in each category that have a positive value, thus ignoring functions for which no resources were allocate during a given year. Done through the count() function (which works)
Then creates X number of shades for each ranging depending on the count() function of point 2
And assigns the appropriate color to each of the pie's wedges
This is my starting point:
var greenRange = ["rgb(199,233,192)", "rgb(0,68,27)"]; //range for the first 12 wedges of the pie (assuming they are all >0)
var redRange = ["rgb(252,187,161)", "rgb(103,0,13)"]; //range for the following 5 wedges of the pie (same assumption)
var blueRange = ["rgb(198,219,239)", "rgb(8,48,107)"]; //range for the last 3 wedges of the pie (same assumption)
I tried two options but neither works.
OPTION 1
function draw () {
//(1) count the number of data points with value > 0 in each category - This works well!
var countFunzioni=0;
dataset.forEach (function (d) {if (d.categoria=="funzioni" && d.val2015>0) { countFunzioni += 1;}})
var countRimborso=0;
dataset.forEach (function (d) {if (d.categoria=="rimborso prestiti" && d.val2015>0) { countRimborso += 1;}})
var countAltro=0;
dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1;}})
//(2) create a color method for each category based on a the count calculated above and the range I determined
var colorFunzioni = d3.scale.linear()
.domain([0, countFunzioni])
.range(redRange);
var colorRimborso = d3.scale.linear()
.domain([0, countRimborso])
.range(redRange);
var colorAltro = d3.scale.linear()
.domain([0, countAltro])
.range(blueRange);
//draw the chart
chart = d3.select("#visualizationInner")
.append("svg")
.attr("id", "visualization")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
//draw and color the paths
var path = chart.datum(dataset).selectAll("path")
.data(pie)
.enter()
.append("path")
//(3) return the appropriate color method depending on the datum's category
.attr("fill", function(d, i) {
if (d.data.categoria=="funzioni") {return colorFunzioni(i);}
else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
else if (d.data.categoria=="altro") {return colorAltro(i);}
})
.style("fill-opacity", 0.75)
.attr("d", arc);
}
Which returns this result:
This goes close, however it assigns a range of red colors to the first 12 wedges (which should get the greenRange instead) and no color to the wedges pertaining to the other categoreis
OPTION 2
function draw () {
//(1) same as above
//(2) create a color method that adapts to each category's count and range
var color = d3.scale.linear()
.domain([0, function (d) {
if (d.data.categoria=="funzioni") {return countFunzioni;}
else if (d.data.categoria=="rimborso prestiti") {return countRimborso;}
else if (d.data.categoria=="altro") {return countAltro;}
}])
.range(function (d) {
if (d.cdata.ategoria=="funzioni") {return greenRange;}
else if (d.data.categoria=="rimborso prestiti") {return redRange;}
else if (d.data.categoria=="altro") {return blueRange;}
});
////(3) return the appropriate color method depending on the datum's category
.attr("fill", function(d, i) {return color(i);}
}
This does not get any coloring done.
Any idea how to solve this?
Option1 Remarks:
.attr("fill", function(d, i) {
if (d.data.categoria=="funzioni") {return colorFunzioni(i);}
else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
else if (d.data.categoria=="altro") {return colorAltro(i);}
})
The trouble is the above is written as if 'i' will maintain separate tallies for the three categories. It doesn't though, it keeps an index for all elements in your selection, and as soon as the first 12 items in the selections are done, the next items are going to be out of range of any of the scales you described and return "#000000" - this is why the first 12 are coloured (and the first 12 may be red because you assign the red range to two scales, and the green range isn't used) and the rest aren't.
As a quick fix, keep a tally in the data itself of where it occurs in each category like this:
dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1; d.catIndex = countAltro; }})
do this for each category
and then in the fill attr function do:
else if (d.data.categoria=="altro") {return colorAltro(d.data.catIndex);}
and again that needs done for each category.
As a separate thing, you can get rid of those else-if's by assigning the colors like this:
var colorMap = {
funzioni: colorFunzioni,
altro: colorAltro,
"rimborso prestiti": colorRimborso
}
and then later doing
.attr("fill", function(d, i) {
var scale = colorMap[d.data.categoria];
if (scale) return scale(d.data.catIndex)
})
Related
D3: Passing extra arguments to attr functions inside a selection.join()
I've some code inside a selection.join() pattern: const nodeWidth = (node) => node.getBBox().width; const toolTip = selection .selectAll('g') .data(data) .join( (enter) => { const g = enter .append('g') g.append('text') .attr('x', 17.5) .attr('y', 10) .text((d) => d.text); let offset = 0; g.attr('transform', function (d) { let x = offset; offset += nodeWidth(this) + 10; return `translate(${x}, 0)`; }); selection.attr('transform', function (d) { return `translate(${ (0 - nodeWidth(this)) / 2 },${129.6484} )`; }); }, (update) => { update .select('text') .text((d) => d.text); let offset = 0; update.attr('transform', function (d) { let x = offset; offset += nodeWidth(this) + 10; return `translate(${x}, 0)`; }); selection.attr('transform', function (d) { return `translate(${ (0 - nodeWidth(this)) / 2 },${129.6484} )`; }); } ); as you can see, in the enter and update section I need to call a couple of functions to calculate several nodes transformations. In particular, the code stores in the accumulation var offset the length of the previous text element. This properly spaces text elements (ie, text0 <- 10 px -> text1 <- 10 px -> ...). As you can see, the "transform functions" in the enter and update section are identical. I'm trying to define them just in one place and call them where I need. E.g., (update) => { update.attr('transform', foo); selection.attr('transform', bar); } However, I cannot refactor the code this way because it looks like I cannot pass in neither the offset value nor this to the function passed to attr(). Is there a way to do it? EDIT: As per Gerardo Furtado's hint (if I got it right), you can define foo as follows: const foo = function(d, i, n, offset) { let x = offset; offset += nodeWidth(n[i]) + 10; return `translate(${x}, 0)`; } then in the selection.join¡ you have to call foo this way: (update) => { let offset = 0; update.attr('transform', (d, i, n) => foo(d, i, n, offset)); } However, refactoring this way, offset is ever equal to 0. A possibile solution here: https://stackoverflow.com/a/21978425/4820341
Have a look at Function.prototype.bind(). const doSomething = (d) => { return `translate(${ (0 - nodeWidth(this)) / 2 },${129.6484} )`; } Calling the function inside (enter) and (update) selection.attr('transform', doSomething.bind(d)); This way the function gets executed in the current scope. I guess this is what you are looking for. Please be aware that I could not test my code!
DC.js specific tick text styling
I want to style a specific tick text, for example book F from the example here: https://dc-js.github.io/dc.js/examples/adjustable-threshold.html. I tried var t = scoreChart.selectAll('g.tick text'); t.style('opacity', function(d, i){ return 0.5 if d[i] == 'F' }); But it doesn't work. How do I do it? UPDATE - SOLVED scoreChart.on('renderlet', function(chart) { chart.selectAll('g.x text') .style("opacity", function(d) { return d == 'F' ? 0.5 : 1.0; }); });
D3 - Add event to bars
I'm trying to add an event to the bars in my graph. I tried this function bellow, but with this function it doesn't matter what bar I click, it will always return the last key in the array. My guess would be this has to do with asynchronization, because it returns the last key value. for (var key in data) { bar = bars.append('rect') .attr('class', 'bar') .attr('x', (dimensions.width / data.length) * currentId + 41) .attr('y', 100 - data[key] + 10).attr('height', data[key]) .attr('width', dimensions.width / data.length) .attr('fill', '#4682B4') .on('click', (bar = key) => { console.log(key) //Always returns the same key }); currentId++; } I have also tried to copy one of the keys the array contains and make a if-statement like this: console.log(key === 1 ? true : false); This will return true and false, exactly as it should. Another reason why I think this has to do with async. My essential question is; How can I make a click-event on this bar which will return the correct key
Before anything else: this is not the idiomatic way of adding events in D3. As a general rule, when you write a D3 code, you normally don't need any kind of loop. Of course, we use loops sometimes, but in very specific situations and to solve very specific problems. Thus, 98.57% of the loops found in D3 codes are unnecessary (source: FakeData Inc.), be it a for...in, a for...of or a simple for loop. That being said, let's see what's happening here. Your real problem has nothing to do with D3 or with async code. Actually, your problem can be explained by this excellent answer: JavaScript closure inside loops – simple practical example (I'll avoid closing this as a duplicate, though). After reading the answer in the link above, let's see two demos. The first one, using var. Please click the circles: var data = [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]; var svg = d3.select("svg"); for (var key in data) { var foo = key;//look at the var here circle = svg.append("circle") .attr("cy", 50) .attr("fill", "teal") .attr("cx", d=> 20 + key*50) .attr("r", 15) .on('click', () => { console.log(foo) }); } <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg> Now another one, using let, please click the circles and compare the results: var data = [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]; var svg = d3.select("svg"); for (var key in data) { let foo = key;//look at the let here circle = svg.append("circle") .attr("cy", 50) .attr("fill", "teal") .attr("cx", d=> 20 + key*50) .attr("r", 15) .on('click', () => { console.log(foo) }); } <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>
dc.js: Reducing rows in data table
So I have a data.table object that is being outputed like this: gender hair-color pets group1.totals group2.totals group3.totals F black Y 10 0 0 F black Y 0 7 0 F black Y 0 0 8 How do I collapse it so that it will be like this? gender hair-color pets group1.totals group2.totals group3.totals F black Y 10 7 8 I have tried reducing the dimensions but it doesn't seem to work. My code is below: ndx = crossfilter(data); dataTable = dc.dataTable('#data-table'); var tableDim = ndx.dimension(function(d) { return d.gender + "/" + d.hair-color + "/" + d.pets; }); dataTable .width(400) .height(800) .dimension(tableDim) .group(function(d){ return "Data Counts"; }), .columns([ function(d) { return d.gender; }, function(d) { return d.hair-color; }, function(d) { return d.pets; } function(d) { if (d.group == 1) return d.totals; else return 0; }, function(d) { if (d.group == 2) return d.totals; else return 0; }, function(d) { if (d.group == 3) return d.totals; else return 0; Essentially I know that I have to reduce and group my data but I can't find specifically what I have to do in order to achieve. Any help would be great, thanks!
Use the following code; var ndx=crossfilter(data); var dimension=ndx.dimension(function(d){return d.hair-color}); var dataByHairColor=dimension.group().reduceCount(); I hope it'll solve the problem. If you want other filtering option use that. I used hair color. Let me know if you are still facing issues
d3js error on decrementing datapoints - how to resolve? [duplicate]
This question already has an answer here: D3 update pie data with zero values (1 answer) Closed 8 years ago. So, I have a series of datapoints with incrementing/decrementing counters which are graphed: {id: 1, count: 1, abnormal: 0, visualisation_colour: #FFFFFF}; {id: 2, count: 2, abnormal: 0, visualisation_colour: #FFFFFF}; {id: 3, count: 3, abnormal: 0, visualisation_colour: #FFFFFF}; If I decrement the counters (count, and abnormal) to zero, then start incrementing them again, I get: Error: Invalid value for <path> attribute d="M0,-100A100,100 0 1,1 NaN,NaNLNaN,NaNA50,50 0 1,0 0,-50Z" Which repeats for all the zero'd datapoints. How do I prevent this from occurring, as also once they have been zeroed out, incrementing them again fails too with the same error. I'm using the (now working) code referenced in this question
So, the answer basically encompasses #Lars Kotthoff's answer from here. By bringing in the filter he uses: if(data.filter(function(d) { return d.totalCrimes > 0; }).length > 0) { Into the renderSlices function: function renderSlices(pie, arc) { var slices; if (pie(_data).filter(function(d) {return d.value > 0;}).length > 0 ) { slices = _pieG.selectAll("path.arc") .data(pie(_data)); slices.enter() .append("path") .attr("class", "arc") .attr("fill", function(d) { return d.data.visualisation_colour; }); slices.transition() .attrTween("d", function(d) { var currentArc = this.__current__; if (!currentArc) { currentArc = {startAngle: 0, endAngle: 0}; } var interpolate = d3.interpolate(currentArc, d); this.__current__ = interpolate(1); return function(t) { return arc(interpolate(t)); }; }); } else { slices = _pieG.selectAll("path.arc") .data(pie(_data)); slices.remove(); } You can remove all the zero'd arcs, and clean up the graph.