I use D3.js and I am able to filter out nodes by their "fill" attribute(in this case the color red) with the help of this code:
node.filter(function() {
return d3.select(this).attr("fill") === "red"
})
Now, my next goal is to filter them out by their radius, that means the "r" attribute like you can see below. Unfortunally the code does not filter them out. Is there someone who could help me maybe? Thanks so much!
node.filter(function() {
// return d3.select(this).attr("fill") === "red"
return d3.select(this).attr("r") === 12
})
Your problem here is the strict equality:
return d3.select(this).attr("r") === 12
//strict equality here--------^ ^--- this is a number
You are comparing the result of the getter attr("r") with a number. However, attr("r") returns a string, not a number.
The reason for that is easy to understand if you have a look at the source code: the getter uses getAttributeNS, which:
returns the string value of the attribute with the specified namespace and name. (emphasis mine)
Therefore, using the strict equality, you have "12" === 12, and that returns false.
Solution:
Use the equality (==) operator instead or, alternatively, compare with a string:
return d3.select(this).attr("r") === "12"
//this is a string ---------------^
Here is a simple demo. I'm filtering the circles with 12px radii...
var filteredCircles = circles.filter(function() {
return d3.select(this).attr("r") === "12"
}).attr("fill", "red")
... and painting them red. Check it:
var data = d3.range(9);
var svg = d3.select("svg");
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cy", 50)
.attr("cx", function(d) {
return 10 + 30 * d
})
.attr("r", function(d) {
return d % 2 ? 12 : 8
})
.attr("fill", "teal");
var filteredCircles = circles.filter(function() {
return d3.select(this).attr("r") === "12"
}).attr("fill", "red")
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
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)
})
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
I'm trying to understand how it is that a D3 generated HTML table can be transitioned without the explicit use of a D3 "transition()" call.
The original code is Mike Bostock's sortable table: http://bl.ocks.org/mbostock/3719724
The bulk of the code reads data from a CSV file, maps it to different column heading names and renders an HTML table:
d3.csv("readme-states-age.csv", function(states) {
var ages = d3.keys(states[0]).filter(function(key) {
return key != "State" && key != "Total";
});
d3.selectAll("thead td").data(ages).on("click", function(k) {
tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
});
var tr = d3.select("tbody").selectAll("tr")
.data(states)
.enter().append("tr");
tr.append("th")
.text(function(d) { return d.State; });
tr.selectAll("td")
.data(function(d) { return ages.map(function(k) { return d[k] / d.Total; }); })
.enter().append("td").append("svg")
.attr("width", 71)
.attr("height", 12)
.append("rect")
.attr("height", 12)
.attr("width", function(d) { return d * 71; });
});
It appears that the sorting of the table happens with this "on click" callback:
d3.selectAll("thead td").data(ages).on("click", function(k) {
tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
});
I see the "sort()" function being called on the resulting selection of data records (tr) but I don't understand how the transition is actually being applied to resort the table. It just seems to happen.
Can someone please explain how and why the sorting can be achieved without an explicit call of the d3.transition() function?
There are 50 states - the below code creates 50 rows and binds each one of the 50 lines to 50 rows individually (Each row contains the value for value for the different age buckets)
var tr = d3.select("tbody").selectAll("tr")
.data(states)
.enter().append("tr");
The onclick function gets passed in the name of the column header ( 5-13,14-17 ,18-24...) - the sort function returns the value in descending order for the column clicked which inturn sorts the entire row.
d3.selectAll("thead td").data(ages).on("click", function(k) {
tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
});
I want to do a counter transition effect in D3 similar to this:
http://jsfiddle.net/c5YVX/8/
Would it be possible to achieve the same effect using a value formatted as currency (applying a format)? If so, how?
var start_val = 0,
duration = 5000,
end_val = [0.06, 14, 1.33333, -232332312.00, 99999];
var qSVG = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
qSVG.selectAll(".txt")
.data(end_val)
.enter()
.append("text")
.text(start_val)
.attr("class", "txt")
.attr("x", 10)
.attr("y", function(d, i) {
return 50 + i * 30
})
.transition()
.duration(3000)
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d),
prec = (d + "").split("."),
round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
return function(t) {
this.textContent = Math.round(i(t) * round) / round;
};
});
return function(t) {
this.textContent = '$' + (Math.round(i(t) * round) / round).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
The regex for commas is taken from here.
I may be too late for the party,
But this worked for me like charm.
.tween('text', function() {
//Reformat the textContent to a integer value;
var content = this.textContent == '' ? 0 : parseInt(this.textContent.replace('$', '').replace(',', ''));
var i = d3.interpolate(content, d.ccCount);
return function(t) {
this.textContent = '$' + d3.format(",")(Math.round(i(t)));
};
});