Develop Reference

how to create three-level donut chart in d3.js

I'm using trying to create a multi-level donut chart in d3 version5
This image is drawn by d3 version3. it is working fine in version3. I decided to upgrade d3 to the latest version. now, donut chart is not drawn by d3(also no errors in the console)
D3 version 3 > version 5
Here is the sample dataset I used:
Hint: first value in the array is used storage and second is free storage
{
average: [30.012, 69.988],
minimum: [10, 90],
maximum: [40, 60]
}
Note: Above data is just a sample this is not exact data.
Here is the code I tried:
var width = 300;
var height = 300;
var radius = Math.floor((width / 6) - 2);
var classFn = function(a, b) {
return a === 0 ? classes[b] : 'default';
};
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();
var svg = d3.select(selector).append("svg");
svg.attr("width", width);
svg.attr("height", height);
svg = svg.append("g");
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path");
path = path.data(function(d) {
return pie(d);
});
path.enter().append("path");
path.attr("class", function(d, i, j) {
return classFn(i, j);
})
path.attr("d", function(d, i, j) {
return arc.innerRadius((j === 0 ? 0 : 2) + radius * j).outerRadius(radius * (j + 1))(d);
});
Note: This code is working fine in d3 version3.

2. Update:
I've updated the answer with a better solution. I didn't do this at first, because I didn't grasp you structure. I've updated it to being more D3 idiomatic. Plus it does away with the hack I made in my first update :)
var dataset = {
average: [0, 100],
minimum: [0, 100],
maximum: [0, 100]
}
var width = 300;
var height = 300;
var radius = Math.floor((width / 6) - 2);
var pie = d3.pie().sort(null);
var arc = d3.arc();
var svg = d3.select('body').append("svg");
svg.attr("width", width);
svg.attr("height", height);
svg = svg.append("g");
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
gs.each(function (d, j) {
d3.select(this).selectAll('path')
.data(pie(d)).enter()
.append('path')
.attr("class", function(d, i) {
// return classFn(i);
})
.attr('d', function (d) {
return arc
.innerRadius((j === 0 ? 0 : 2) + radius * j)
.outerRadius(radius * (j + 1))(d);
})
})
The updated code uses the index (here j) that is available when appending the g elements, which corresponds to you original j index. This makes it possible to calculate the radii in the original way.
To achieve this, the arc appending code is wrapped into a .each function that iterates over the g elements, making j available to us.
The class application should work as well, but I've commented it out, as the classFn function doesn't work, since the classes variable is not present.
1. Update:
Besides the original answer, when calculating the arc radii you rely on a j value that is different from D3 v3 and v5. I summise that j is used the index of the d3.values array, so I've cooked up a way to reverse look-up that index based on the input values.
First create a map for reverse mapping data values into their corresponding index:
var dataValueJoinChar = '¤'
var datasetValuesToIndex = d3.values(dataset).reduce((acc, curr, i) => {
acc[`0${dataValueJoinChar}${curr[0]}`] = i
acc[`1${dataValueJoinChar}${curr[1]}`] = i
return acc
}, {})
Then change the last part of your code to:
path = path.data(function(d) {
return pie(d);
}).enter().append("path");
path.attr("class", function(d, i, j) {
return classFn(i, j);
})
path.attr("d", function(d, i, j) {
var orgIndex = datasetValuesToIndex[`${i}${dataValueJoinChar}${d.data}`]
return arc
.innerRadius((orgIndex === 0 ? 0 : 2) + radius * orgIndex)
.outerRadius(radius * (orgIndex + 1))(d);
});
It might not be too pretty, but it's a simple adaption of your code that works.
------- Original answer --------
In D3 v5 pie and arc are found at d3.pie and d3.arc respectively. Therefore, try changing:
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();
To this instead:
var pie = d3.pie().sort(null);
var arc = d3.arc();
Pie API reference: https://github.com/d3/d3-shape/blob/v1.3.4/README.md#pie
Arc API reference: https://github.com/d3/d3-shape/blob/v1.3.4/README.md#arc
If you use a bundler to bundle sub-modules, both are part of the d3-shape module. If not they are both available in the full D3 library.
Hope this helps!

Force directed graphs in d3v4

I'm experimenting with D3 version 4 force directed graphs and have looked at Jim Vallandingham's tutorial and code as a starting point.
http://vallandingham.me/bubble_chart_v4/
and am attempting to produce an animation similar to the example here from Nathan Yau
https://flowingdata.com/2016/08/23/make-a-moving-bubbles-chart-to-show-clustering-and-distributions/
I've stripped the bubble chart from Jim Vallandingham's code to what I think I need and can display the individual states by changing the index value, but for some reason the code does not want to animate between the different states. I assume the redraw function isn't working. It may be an obvious error or one made through complete ignorance, but if you can help it would be great.
Here's my code:
function bubbleChart() {
var width = 940;
var height = 600;
var center = { x: width / 2, y: height / 3 };
var years = ["0","2008", "2009", "2010"];
var yearCenters = {
2008: { x: width / 3, y: 2 * height / 3 },
2009: { x: width / 2, y: 2 * height / 3 },
2010: { x: 2 * width / 3, y: 2 * height / 3 }
};
// #v4 strength to apply to the position forces
var forceStrength = 0.03;
// These will be set in create_nodes and create_vis
var svg = null;
var bubbles = null;
var nodes = [];
var index= 0;
function charge(d) {
return -Math.pow(d.radius, 2.3) * forceStrength;
}
// Here we create a force layout
var simulation = d3.forceSimulation()
.velocityDecay(0.2)
.force('x', d3.forceX().strength(forceStrength).x(center.x))
.force('y', d3.forceY().strength(forceStrength).y(center.y))
.force('charge', d3.forceManyBody().strength(charge))
.on('tick', ticked);
// #v4 Force starts up automatically, which we don't want as there aren't any nodes yet.
simulation.stop();
// Nice looking colors
var fillColor = d3.scaleOrdinal()
.domain(['low', 'medium', 'high'])
.range(['#d84b2a', '#beccae', '#7aa25c']);
function createNodes(rawData) {
var myNodes = rawData.map(function (d) {
return {
id: d.id,
radius: 5,
value: +d.total_amount,
name: d.grant_title,
org: d.organization,
group: d.group,
year: d.start_year,
x: Math.random() * 900,
y: Math.random() * 800
};
});
// sort them to prevent occlusion of smaller nodes.
myNodes.sort(function (a, b) { return b.value - a.value; });
return myNodes;
}
/*
* Main entry point to the bubble chart.
*/
var chart = function chart(selector, rawData) {
// convert raw data into nodes data
nodes = createNodes(rawData);
// Create a SVG element inside the provided selector
// with desired size.
svg = d3.select(selector)
.append('svg')
.attr('width', width)
.attr('height', height);
// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
.data(nodes, function (d) { return d.id; });
// Create new circle elements each with class `bubble`.
// There will be one circle.bubble for each object in the nodes array.
// Initially, their radius (r attribute) will be 0.
// #v4 Selections are immutable, so lets capture the
// enter selection to apply our transtition to below.
var bubblesE = bubbles.enter().append('circle')
.classed('bubble', true)
.attr('r', 0)
.attr('fill', function (d) { return fillColor(d.group); })
.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
.attr('stroke-width', 2)
// #v4 Merge the original empty selection and the enter selection
bubbles = bubbles.merge(bubblesE);
// Fancy transition to make bubbles appear, ending with the
// correct radius
bubbles.transition()
.duration(2000)
.attr('r', function (d) { return d.radius; });
// Set the simulation's nodes to our newly created nodes array.
// #v4 Once we set the nodes, the simulation will start running automatically!
simulation.nodes(nodes);
chart.redraw();
};
// Callback function that is called after every tick of the force simulation.
// These x and y values are modified by the force simulation.
function ticked() {
bubbles
.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; });
}
chart.redraw = function (index){
simulation.force('x', d3.forceX().strength(forceStrength).x(nodePosX));
simulation.force('y', d3.forceY().strength(forceStrength).y(nodePosY));
simulation.alpha(1).restart();
}
function nodePosX(d) {
if (+d.year <= +years[index]) {
return yearCenters[d.year].x;
} else {
return center.x;
}
}
function nodePosY(d) {
if (+d.year <= +years[index]) {
return yearCenters[d.year].y;
} else {
return center.y;
}
}
// return the chart function from closure.
return chart;
}
var myBubbleChart = bubbleChart();
myBubbleChart('#vis', data);
for (i=0;i<4;i++){
setInterval(function(){myBubbleChart.redraw(i);}, 100);
}

I misunderstood how to use setInterval to redraw the chart, so it should be as follows:
var i = 0;
setInterval(function(){myBubbleChart.redraw(i++);}, 1000);

How to fill number of rectangles in a row corresponding to the numbers in an array. d3.js

I have 100 rectangles arranged in a 10x10 square. I want to color the number of rectangles according to the numbers in the following array
var avg = [1, 4, 4, 7, 11, 15, 58]
I am stuck at the value 4 since it is appearing twice plus the code looks really ugly. Is there a nicer way to achieve this without using if/else?
The output should be 1 rectangle should have color from colors[0] then 4 rectangles from colors1 and the next 4 from colors[2] and so on.
JS fiddle
here is my code:
var avg = [1, 4, 4, 7, 11, 15, 58]
var colors = ['#009BFF', '#AAC30A', '#DC0f6e', '#82b905', '#96be00', '#C8D205',
'#82141E', '#BE232D', '#E14614', '#EB6E14', '#EB8614', '#F0AA00'
]
var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
var rectWidth = ContainerWidth / 20
var svgContainer = d3.select("#boxy")
var rectangle = svgContainer.selectAll("rect")
.data(d3.range(100));
var rectangle = rectangle.enter()
.append("rect")
.style("stroke", "#fff")
.style("fill", function(d, i){
for(var k=0; k<avg.length; k++){
if(i<=avg[0]-1){
return colors[0]
} else if(i<=avg[1] && i>=avg[0]-1){
return colors[1]
} else if(i<=avg[2]-1 && i>=avg[1]-1 || avg[2]-1===avg[1]-1){
return colors[2]
} else if(i<=avg[3]-1 && i>=avg[2]-1){
return colors[3]
}
}
})
.attr("x", function(d, i) {
return i % 10 * 45
})
.attr("y", function(d, i) {
return Math.floor(i / 10) % 10 * 45
})
.attr("width", rectWidth)
.attr("height", rectWidth);

There are a few approaches you could take. The primary challenge is that your data array doesn't have 100 elements to match to your 100 rectangles. As is you cannot bind that data to your svg elements.
You could make a data array that is 100 items long, and use that to create rectangles (rather than d3.range(100)). Or you could use a custom function while appending the rectangles to determine color.
For the first approach, you could make a data variable that is 100 items long (or whatever the total of all your avg array elements is):
var avg = [1, 4, 4, 7, 11, 15, 58];
var data = [];
var category = 0;
for (i = 0; i < avg.length; i++) {
for (j=0; j < avg[i]; j++) {
data.push(category);
}
category++;
}
data: [ 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 90 more… ]
And then you can use this data array as your data source when appending rectangles, which allows you to assign color relatively easily:
var rectangle = svgContainer.selectAll("rect")
.data(data)
.enter()
.append("rect")
.style("fill", function(d) { return colors[d]; })
Fiddle: https://jsfiddle.net/e44y72v8/
Or, you could keep d3.range(100) to append 100 rectangles but use a function to determine what color should be applied. This requires keeping track of the cumulative total of the array's elements as we progress through the 100 rectangles. This requires two new variables:
var currentIndex = 0; // What element of the array are we at
var cumulative = 0; // What is the cumulative total of all array elements between 0 and current index.
And your function could look like:
.style("fill", function(d, i){
if (i == cumulative) {
cumulative += avg[currentIndex+1];
return colors[currentIndex++];
}
else {
return colors[currentIndex];
}
})
Fiddle: https://jsfiddle.net/sttL9vaz/

How do I fix the timeScale of d3 line chart?

Here are the dates that I am parsing:
2010-12-31
2011-12-31
2012-12-31
2013-12-31
2014-12-31
2015-12-31
2016-12-31
Here is my code:
this.x = d3.scaleTime().domain(d3.extent(this.dataArray, d => {return d[ this.xType ];})).range([ this.margin.left, this.width - this.margin.right ]);
this.y0 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);
this.y1 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);
this.xAxis = d3.axisBottom(this.x);
this.yAxisLeft = d3.axisLeft(this.y0).ticks(5);
this.yAxisRight = d3.axisRight(this.y1).ticks(5);
The problem is that the first date (2010) is being truncated from the x-axis and an additional tick is being added in the very end, however the chart is drawn right.
If I add .nice(this.dataArray.length) to this.x = ..., the year 2010 is added with 2017 at the very end.
How can I fix this problem? Thank you.

You can map your data:
var ticks = data.map((d)=>d);
And use this array in your tickValues:
var axis = d3.axisBottom(scale)
.tickValues(ticks);
Here is a demo:
var width = 500,
height = 100;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var parse = d3.timeParse("%Y-%m-%d");
var data = ["2010-12-31",
"2011-12-31",
"2012-12-31",
"2013-12-31",
"2014-12-31",
"2015-12-31",
"2016-12-31"
];
data.forEach((d, i, a) => a[i] = parse(d));
var ticks = data.map((d) => d)
var format = d3.timeFormat("%Y")
var scale = d3.scaleTime()
.domain(d3.extent(data, d => d)).range([20, width - 20]);
var axis = d3.axisBottom(scale).tickValues(ticks).tickFormat((d) => format(d));
var gX = svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis);
<script src="https://d3js.org/d3.v4.min.js"></script>

Why is my D3 stacked area chart flipped?

I have a D3 chart that is supposed to look like this:
But instead it looks like this:
This is the code i'm using:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>
<body>
<svg id="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var NSW = "NSW";
var QLD = "QLD";
var width = 600;
var height = 400;
var years = [];
var getStat = function(year, volatility, basis) {
return {
d: year,
x: basis,
vol: volatility,
value: 45 * Math.pow(basis, year),
high: 45 * Math.pow(basis+volatility, year),
low: 45 * Math.pow(basis-volatility, year),
}
}
for(i = 0; i < 25; i++) {
years.push(i);
}
var data = years.map(function(year){ return [getStat(year, 0.03, 1.08),getStat(year, 0.02, 1.08), getStat(year, 0.01, 1.08)]; }); // generate bogus data
var set_one = data.map(function(d) { return d[0];});
var set_two = data.map(function(d) { return d[1];});
var set_three = data.map(function(d) { return d[2];});
var chart = d3.select("#chart").attr("width", width).attr("height", height).append("g");
var x = d3.scale.linear().domain([0, years.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); })]).range([0, height]);
var area = d3.svg.area().x(function(d,i) { return x(i); })
.y0(function(d, i){ return d.low}) //FUNCTION FOR BASE-Y
.y1(function(d, i){ return d.high * 0.99;}); //FUNCTION FOR TOP-Y
chart
.selectAll("path.area")
.data([set_one,set_two,set_three]) // !!! here i can pass both arrays in.
.enter()
.append("path")
.attr("fill", "rgba(0,0,0,0.5)")
.attr("class", function(d,i) { return [NSW,QLD,"T"][i]; })
.attr("d", area);
</script>
What am I doing wrong?

Actually your doing nothing wrong the y-axis goes downwards starting at 0 from the top down to height. So to flip it you can set the y values to height - yValue:
var area = d3.svg.area().x(function(d,i) { return x(i); })
.y0(function(d, i){ return (height - (d.low))}) //FUNCTION FOR BASE-Y
.y1(function(d, i){ return (height - (d.high * 0.99))}); //FUNCTION FOR TOP-Y
Fiddle Example

the y ordinate in SVG increases downwards. Try this...
var y = d3.scale.linear().domain([d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); }), 0]).range([0, height]);

Like everything in HTML / CSS / Canvas, the Y axis starts with 0 at the top and goes down to height at the bottom.
So according to your setup, the graph behaves correctly.
There are multiple ways to change the graphs direction.
a) You can change the range of your axis var y = d3.scale.linear().domain([...]).range([height, 0]);
b) You can change the domain of your axis var y = d3.scale.linear().domain([d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); }), 0]).range([...]);
or c) change the way the graph gets its y-values with d3.svg.area().y0(...) and d3.svg.area().y1(...)
I would recommend the first option, because this actually specifies the range your domain gets projected on.

I think there was an issue with your y-scaling.I have inverted the range from range([height, 0] which was initially range([0,height]) as this should be the way as per d3 norms otherwise you have to change the logic while calculating the height of plot.
Here I am attaching the fixed code.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>
<body>
<svg id="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var NSW = "NSW";
var QLD = "QLD";
var width = 600;
var height = 400;
var years = [];
var getStat = function(year, volatility, basis) {
return {
d: year,
x: basis,
vol: volatility,
value: 45 * Math.pow(basis, year),
high: 45 * Math.pow(basis+volatility, year),
low: 45 * Math.pow(basis-volatility, year),
}
}
for(i = 0; i < 25; i++) {
years.push(i);
}
var data = years.map(function(year){ return [getStat(year, 0.03, 1.08),getStat(year, 0.02, 1.08), getStat(year, 0.01, 1.08)]; }); // generate bogus data
var set_one = data.map(function(d) { return d[0];});
var set_two = data.map(function(d) { return d[1];});
var set_three = data.map(function(d) { return d[2];});
var chart = d3.select("#chart").attr("width", width).attr("height", height).append("g");
var x = d3.scale.linear().domain([0, years.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); })]).range([height, 0]);
var area = d3.svg.area().x(function(d,i) { return x(i); })
.y0(function(d, i){ return y(d.low)}) //FUNCTION FOR BASE-Y
.y1(function(d, i){ return y(d.high * 0.99);}); //FUNCTION FOR TOP-Y
chart
.selectAll("path.area")
.data([set_one,set_two,set_three]) // !!! here i can pass both arrays in.
.enter()
.append("path")
.attr("fill", "rgba(0,0,0,0.5)")
.attr("class", function(d,i) { return [NSW,QLD,"T"][i]; })
.attr("d", area);
</script>