I am new to D3. Would be grateful if someone answer my folowing doubts:
On clicking a radio button i am updating the line chart using following code
d3.selectAll(".line").attr("d", line);
However, this updates all the line charts present on page. How do I update line corresponding to this particular graph.
You must label each chart in some way, then use that in the selection.
Set an ID on each chart #chart-1, #chart-2, ..., #chart-n
The select either like this:
d3.selectAll("#chart-1 .line").attr("d", line);
or
d3.select("#chart-1").selectAll(".line").attr("d", line);
With the second one you can store the chart and use it later, it's more efficient then:
var chart1 = d3.select("chart-1");
// ...possibly other code
chart1.selectAll(".line").attr("d", line);
Let's say you have a selection of charts:
var charts = d3.selectAll('.line').data(data);
charts.enter().append('path').attr('class', 'line').attr('d', line);
To work with a specific chart, just filter your charts seletion:
var chart;
chart = charts.filter(function(d) { d.name === selectedGraph; });
// or
chart = charts.filter('#chart-' + selectedGraph)
Related
I would like to be able to recenter a Pie charts legend after it has been filtered. Slices/Legends will removed when filtering because we remove empty bins. I added a pretransition listener to chart2, but that seems to be to late because the legend y value is the previous value and not current.
.on('pretransition', chart => buildLegend (chart))
If Male is selected on the Gender Pie chart I want the 4 legend items on the Job Pie chart to be re-centered. Any suggestions?
You can see a jsFiddle example.
A little more digging around showed me how to reference and update SVG elements.
function recenterLegend(chart) {
chart.selectAll('g.dc-legend')
.attr('transform', function(d) {
let legendY = (300 - (chart.group().all().length * 16)) / 2;
let translate = 'translate(220,' + legendY + ')';
return translate ;
});
}
Here is the updated jsfiddle.
I have a pie chart in angular-nvd3. https://krispo.github.io/angular-nvd3/#/pieChart The issue I have is with a pie chart, I have 5 slices, when all the pie slices are labeled, it looks very scrunched together. I want to instead modify the legend so that instead of just displaying the keys, I want to show:
<key> + <number of records in that key>
Using "labelType" I can change what is shown on the labels of the slices pie chart, but how can I change what is shown in the legend?
Could not find anything in the API to do this.
But here is a bit of hack to do it via d3:
After render
1) get all the text DOM
2) run a for loop on all the text.
3) get the text's data and change the inner HTML.
dispatch: {
renderEnd: function(e) {
//for each text
d3.selectAll(".nv-legend text")[0].forEach(function(d){
//get the data
var t= d3.select(d).data()[0];
//set the new data in the innerhtml
d3.select(d).html(t.key + " - " + t.y);
});
}
}
working code here
I'm quite new to D3 and I'm trying to make a stacked bar chart (or column chart) with unique bars for each row (each observation) in the dataset.
The problem I have encountered is: if there's more than one row with the same value used for the y axes (in my case, in data.csv, in the column "seq", "3" and "4" appear twice), then all data with the same name (from different rows) will be stacked together like this:
data.csv
seq,Idle Time,Answer Time
2,95,4
1,0,3
3,22,3
4,0,4
6,43,3
5,0,2
8,30,1
7,0,3
4,20,5
3,0,8
But what I'm trying to do is to make one bar for each row, despite the identical values of d.seq (so that there will be two bars for d.seq=3 and d.seq=4)
The full code I am working on now is here
Any suggestions will be appreciated, thanks!
You can plot based on the index of your data array, rather than on the "seq" value. The index will be unique. http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview
I've just updated two lines
line 86:
y.domain(data.map(function(d, i) { return i; }));
line 112:
.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });
If you still want the y-tick label to show the value in "seq", have a look here where you can find out more about axes and how to apply custom labels:
https://github.com/mbostock/d3/wiki/SVG-Axes
EDIT
http://plnkr.co/edit/6sNaLwiSSm7aU66qzIOK?p=preview
You need to move the yAxis definition within the d3.csv success function, and then reference the data array like so to label the axis how you would like:
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(function(i) {return data[i].seq; })
.orient("left");
I am making a bubble chart using dc.js , crossfilter.js but bubbles are not showing in the chart !!!! It is just showing x axis and y axis but the bubbles are disappeared.
I was trying make this bubble chart in click to see
here is my code :
var dateDim = ndx.dimension(function(d) {return d.Date;});
var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;
console.log(minDate);
console.log(maxDate);
//var ageDim = ndx.dimension(function(d){return +d.Age;});
var daySum = dateDim.group().reduceSum(function(d){return 1;});
//print_filter("ageSum");
// var hits = dateDim.group().reduceSum(function(d) {return d.Age;});
var brush = d3.svg.brush();
suicideBubbleChart
.width(990).height(200)
.transitionDuration(1500)
.dimension(dateDim)
.group(daySum)
.colors(d3.scale.category10())
.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.time.scale().domain([minDate,maxDate]))
.r(d3.scale.linear().domain([0, 4000]))
.minRadiusWithLabel(15)
.yAxisLabel("Suicides")
.elasticY(true)
.yAxisPadding(100)
.elasticX(true)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true);
Thank you.
I fixed enough to start getting stuff showing up on the chart.
There was a space before Date that caused that field name to come out wrong, and the date format was wrong, and I added a radiusValueAccessor.
var dateFormat = d3.time.format('%m/%d/%Y');
...
.r(d3.scale.linear().domain([0, 10]))
.radiusValueAccessor(function(d) {
return d.value;
})
http://jsfiddle.net/gordonwoodhull/wjeonreq/15/
Obviously it is still not the chart you want, but hopefully now that you have some stuff showing up on the screen, you can start to shape and debug it.
In particular, you will need a valueAccessor in order to place the bubbles in Y, and a Y scale.
It is one of the frustrating things about dc & d3 that if something doesn't work, then you just get an empty chart. The way I tracked this down, after dealing with the errors above, which showed up in the console, was
look at daySum.all() to make sure the data was okay (it was, after the date correction)
Inspect the svg element in the Elements tab of the Developer tools. The g.chart-body inside there has the actual content. I saw that the bubbles were there but had radius zero. Then I looked back at the stock example to see what radius setup must be missing.
I'm making a rowchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. i am displaying rowchart for us population. how to display top 10 counties population in us and top less 10 counties counties of popualtion.Thanx
Stack Overflow is about helping peoples with what they've tried.
It doesn't encourage spoon feeding.
Here's a list of few website which will you help you through the basic blocks of d3.
Moving onto dc.js. It is a wonderful multi-dimensional charting javascript library.
dc.js - Here's the official website.
Annotated Source - For the charts in the dc.js website.
Code Project - And here's another website where I learned step by step dc.js.
Fiddle - For creating a pie chart using dc.js.
Steps :
You need to load the following libraries and css files -
d3.js
crossfilter.js
dc.js
dc.css
This code is using the crossfilter js.
var ndx = crossfilter(data);
Here I'm parsing the data.
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total= d.http_404+d.http_200+d.http_302;
d.Year=d.date.getFullYear();
});
Here we are creating a dimension for the year and we get the sum of total column.
var yearDim = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.total;});
And through this block of code we create a pie chart in the div.
var yearRingChart = dc.pieChart("#chart-ring-year");
yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
.innerRadius(30);
Finally at the end of all the charts we create, this is the code that renders all the chart to the browser.
dc.renderAll();
To make a row chart just simply change the pie chart to row chart something like this.
var yearRingChart = dc.rowChart("#chart-ring-year");
And remove the innerRadius property which we do not have for a row chart.
yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
By changing it you'll be having a row chart.
And here's a complete fiddle with a rowChart.
Hope this helps.