Stacked chart with data array in d3 js

Stacked chart with data array in d3 js - javascript

I have try to customize my existing code of Stacked Bar graph with the help of this link
https://bl.ocks.org/mbostock/1134768.
I have done this graph with the help of given link but i have some confusion about the data points on y axis as shown below in picture
Here is my full code of Stacked bar Graph
var data = [
{month: 'Jan',total:100 ,A: 35, B: 5, C: 10},
{month: 'Feb',total:200 ,A: 30, B: 10, C: 20},
{month: 'Mar',total:300 ,A: 0, B: 10, C: 20}
];
var xData = ["A", "B", "C"];
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .35);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
xData.forEach(function(c) {
d[c] = +d[c];}); })
var dataIntermediate = xData.map(function (c) {
return data.map(function (d) {
return {x: d.month, y: d[c]};});});
var dataStackLayout = d3.layout.stack()(dataIntermediate);
x.domain(dataStackLayout[0].map(function (d) {
return d.x; }));
y.domain([0,d3.max(dataStackLayout[dataStackLayout.length - 1],
function (d) { return d.y0 + d.y;}) ]).nice();
var layer = svg.selectAll(".stack")
.data(dataStackLayout)
.enter().append("g")
.attr("class", "stack")
.style("fill", function (d, i) {
console.info(i, color(i));
return color(i);});
layer.selectAll("rect")
.data(function (d) {
return d;})
.enter().append("rect")
.attr("x", function (d) {
console.info("dx", d.x,x(d.x), x.rangeBand());
return x(d.x);})
.attr("y", function (d) {
return y(d.y + d.y0);})
.attr("height", function (d) {
return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() -1);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
As i have taken help from the given url, i have change my code which take array data as input instead of CSV file. But i think my data points(label) on y axis is not according to given data(key:total).
Any help should be appreciated.

Here is solution about my confusion on how can i show the total count on y axis
because in my array data there is key 'total' which is total count of all states such as 'A','B' & 'C' shown in array data
var data = [
{month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
{month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
{month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];
So as there is a total key in array data and i have to show as label on y axis.Here is my full code
var data = [
{month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
{month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
{month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];
var xData = ["A", "B", "C"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .35);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.category20();
//console.info(color(0));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#pie").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.month = parseDate(d.month);
xData.forEach(function(c) {
d[c] = +d[c];
});
})
var dataIntermediate = xData.map(function (c) {
return data.map(function (d) {
return {x: d.month, y: d[c]};
});
});
var dataStackLayout = d3.layout.stack()(dataIntermediate);
x.domain(dataStackLayout[0].map(function (d) {
return d.x;
}));
y.domain([0,
d3.max(data, function(d) { return d.total; })
])
.nice();
var layer = svg.selectAll(".stack")
.data(dataStackLayout)
.enter().append("g")
.attr("class", "stack")
.style("fill", function (d, i) {
console.info(i, color(i));
return color(i);
});
layer.selectAll("rect")
.data(function (d) {
return d;
})
.enter().append("rect")
.attr("x", function (d) {
console.info("dx", d.x,x(d.x), x.rangeBand());
return x(d.x);
})
.attr("y", function (d) {
return y(d.y + d.y0);
})
.attr("height", function (d) {
// console.info(d.y0, d.y, y(d.y0), y(d.y))
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() -1);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
}

In case you are trying to add a new dataset with key "total", try to add key "total" in your xData array like following and it should be Visible on chart.
var xData = ["total", "A", "B", "C"];

Related

d3.js Bar Chart - Y Axis NaN

Getting NaN on the Y axis for a d3.js bar chart.
Question relates to this one .
The answer in that question has static data, which is identical to the Ajax JSON. See commented line for const data But the Ajax data is not working.
The data is loaded but the column with data has no height as there is no Y scale data.
Console log:
Error: <rect> attribute y: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
Error: <text> attribute y: Expected length, "NaN".
Chart with Ajax loaded data:
var margin = {top: 50, right: 135, bottom: 70, left: 80},
width = 1050 - margin.left - margin.right,
height = 540 - margin.top - margin.bottom;
var svg = d3.select("#domains")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//const data = [{"Domain":"Knowledge","Knowledge":0},{"Domain":"Problem Solving","problem_solving":0},{"Domain":"Skill","skill":0},{"Domain":"Transferable","transferable":100}];
d3.json("json/domains.json", function(error, data) {
const normalized = data.map(item => {
const name = item['Domain'];
const attr = name.toLowerCase().replace(' ', '_');
const value = item[attr];
return {name, value};
});
console.log('N: ', normalized);
/*
// Transpose the data into layers
var dataset = d3.layout.stack()(["Knowledge", "Problem Solving, Skill, Transferable"].map(function(lvl) {
return data.map(function(d) {
return {
x: d.Domain,
y: d[lvl]
};
});
}));
var disciplines = d3.nest()
.key(function(d){return d.Domain})
.rollup(function(leaves){
return d3.sum(leaves, function(d) {return d3.sum(d3.values(d))});
})
.entries(data);
*/
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(normalized.map(item => item.name))
.rangeRoundBands([10, width-10], 0.35, 0);
const maxValue = normalized.reduce((max, item) => Math.max(max, item.value), 0);
var y = d3.scale.linear()
.domain([0, maxValue])
.range([height, 0]);
var colors = ["#83d1c4", "#f17950", "#838BD1", "#F150BE"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d;
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.outerTickSize(0)
d3.select('.y axis .tick:first-child').remove();
/*
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-0, 0])
.html(function(d) {
return d.y + '%';
})
svg.call(tip);
*/
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);
svg.append("g")
.call(xAxis)
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("x", 390 )
.attr("y", 480 )
.style("text-anchor", "middle")
.text("Domains");
svg.append("text")
.attr("x", -200 )
.attr("y", -40 )
.attr("transform", "rotate(-90)" )
.attr('style', 'font-size:12px')
.style("text-anchor", "middle")
.text("Percentage of Learning Events");
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.group")
.data(normalized)
.enter().append("g")
.attr("class", "group")
.style("fill", function(d, i) { return colors[i]; });
groups.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("x", d => x(d.name))
.attr("height", function(d) { return y(0) - y(d.value); })
.attr('class', 'segment')
.attr("width", x.rangeBand())
// .on('mouseover', tip.show)
// .on('mouseout', tip.hide);
columns = svg.append("g")
.selectAll("text")
.data(normalized)
.enter().append("text")
.attr("x", function(d){
return x(d.name) + x.rangeBand()/2
})
.attr("y", function (d) {
return y(d.value);
})
.attr("dy", "-0.7em")
.attr('style', 'font-size:11px')
.text( function (d){
return d3.format(".2f")(d.value) + '%';
})
.style({fill: 'black', "text-anchor": "middle"});
});
Chart with static data:

Although your dataset had an typo, which can break your current setup if you had the same in the json output. We can not be that sure if there is no data provided in example from actual json response, which can be different than what's in your const data example
const data = [{"Domain":"Knowledge","Knowledge":0},{"Domain":"Problem Solving","problem_solving":0},{"Domain":"Skill","skill":0},{"Domain":"Transferable","transferable":100}];
Try with lowercase "knowledge":0 which was printing the chart correctly on my screen
https://jsfiddle.net/978ync63/

How to align x axis with bars respectively in Combo Chart (Bars and Lines)?

I have a combo/ bars & lines chart based on D3.js. The x axis domain contains min and max dates, and bars are based on values. But the last bar (rect) is outside the chart. I can bring it in by forcing it (manually) but it won't reflect the data.
var data = [
{
fcst_valid_local: "2018-11-13T14:00:00-0600",
pop: 20,
rh: 67,
temp: 38,
wspd: 7
},
{
fcst_valid_local: "2018-11-14T15:00:00-0600",
pop: 15,
rh: 50,
temp: 39,
wspd: 8
},
{
fcst_valid_local: "2018-11-15T16:00:00-0600",
pop: 10,
rh: 90,
temp: 40,
wspd: 9
}
];
// Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Date parsing.
const parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z");
data.forEach(function (d) {
d.date = parseDate(d.fcst_valid_local);
});
// Set scale domains.
var x = d3.scaleTime().range([0, width])
.domain(d3.extent(data, function (d) {
return d.date;
}));
var y0 = d3.scaleLinear().range([height, 0]).domain([0, 100]);
const y1 = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(data, (d) => d.pop)]);
// Construct our SVG object.
const svg = d3.select('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g').attr('class', 'container')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Set x, y-left and y-right axis.
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
// .tickFormat(d3.timeFormat('%b %d, %H:%M'))
.tickSize(0).tickPadding(10);
var y0Axis = d3.axisLeft(y0)
.ticks(5).tickSize(0);
var y1Axis = d3.axisRight(y1).ticks(5).tickSize(0);
svg.append("g")
.attr("class", "x-axis axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + 0 + ", 0)")
.call(y0Axis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + width + ", 0)")
.call(y1Axis);
// Draw bars.
var bars = svg.selectAll(".precips")
.data(data);
bars.exit().remove();
bars.enter().append("rect")
.attr("class", "precip")
.attr("width", width / data.length - 50)
.attr("x", function (d) {
return x(d.date);
})
.attr("y", height)
.transition().duration(1000)
.attr("y", function (d) {
return y0(d.pop);
})
.attr("height", function (d) {
return height - y0(d.pop);
});
const lineRH = d3.line()
.x((d) => x(d['date']))
.y(d => y0(d['rh']));
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr('d', lineRH);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

Although an answer has been accepted, I'd like to let you know that you don't have to manipulate the data (as it might be fetched from an API as well) but you can play around the x.domain() as it's all about setting the right domain here.
Try using d3 time_nice to round off the time scale domains
Play around with d3 time methods to change the dates (there are a lot here)
Here's an example of using the second approach from above and setting the x domain:
var x = d3.scaleTime().range([0, width])
.domain([d3.min(data, function (d) {
return d.date;
}), d3.timeDay.offset(d3.max(data, function (d) { return d.date; }), 1)]);
Explanation: This is offsetting the max date from the data by 1 day and so the new x.domain() would come out as:
(2) [Tue Nov 13 2018 15:00:00 GMT-0500 (Eastern Standard Time), Fri Nov 16 2018 17:00:00 GMT-0500 (Eastern Standard Time)]
which results in a chart as follows:
var data = [
{
fcst_valid_local: "2018-11-13T14:00:00-0600",
pop: 20,
rh: 67,
temp: 38,
wspd: 7
},
{
fcst_valid_local: "2018-11-14T15:00:00-0600",
pop: 15,
rh: 50,
temp: 39,
wspd: 8
},
{
fcst_valid_local: "2018-11-15T16:00:00-0600",
pop: 10,
rh: 90,
temp: 40,
wspd: 9
}
];
// Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Date parsing.
const parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z");
data.forEach(function (d) {
d.date = parseDate(d.fcst_valid_local);
});
// Set scale domains.
var x = d3.scaleTime().range([0, width])
.domain([d3.min(data, function (d) {
return d.date;
}), d3.timeDay.offset(d3.max(data, function (d) { return d.date; }), 1)]);
var y0 = d3.scaleLinear().range([height, 0]).domain([0, 100]);
const y1 = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(data, (d) => d.pop)]);
//console.log(x.domain());
// Construct our SVG object.
const svg = d3.select('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g').attr('class', 'container')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Set x, y-left and y-right axis.
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
// .tickFormat(d3.timeFormat('%b %d, %H:%M'))
.tickSize(0).tickPadding(10);
var y0Axis = d3.axisLeft(y0)
.ticks(5).tickSize(0);
var y1Axis = d3.axisRight(y1).ticks(5).tickSize(0);
svg.append("g")
.attr("class", "x-axis axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + 0 + ", 0)")
.call(y0Axis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + width + ", 0)")
.call(y1Axis);
// Draw bars.
var bars = svg.selectAll(".precips")
.data(data);
bars.exit().remove();
bars.enter().append("rect")
.attr("class", "precip")
.attr("width", width / data.length - 50)
.attr("x", function (d) {
return x(d.date);
})
.attr("y", height)
.transition().duration(1000)
.attr("y", function (d) {
return y0(d.pop);
})
.attr("height", function (d) {
return height - y0(d.pop);
});
const lineRH = d3.line()
.x((d) => x(d['date']) + (width / data.length - 50)/2)
.y(d => y0(d['rh']));
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr('d', lineRH);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
I also tried with .nice() and a fun part would be to use the d3 time intervals within .nice(). Feel free to play around with those and let me know if you have any questions.
Also, I'm offsetting the line (path) by the barwidth/2 in the line generator fn.
d3.line()
.x((d) => x(d['date']) + (width / data.length - 50)/2)
Hope this helps as well.

Add a dummy data item that is a bit later then the last item
Here it is done hard coded but you can add it dynamic based on the date of the last item
var data = [
{
fcst_valid_local: "2018-11-13T14:00:00-0600",
pop: 20,
rh: 67,
temp: 38,
wspd: 7
},
{
fcst_valid_local: "2018-11-14T15:00:00-0600",
pop: 15,
rh: 50,
temp: 39,
wspd: 8
},
{
fcst_valid_local: "2018-11-15T16:00:00-0600",
pop: 10,
rh: 90,
temp: 40,
wspd: 9
},
{
fcst_valid_local: "2018-11-16T01:00:00-0600"
}
];
// Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Date parsing.
const parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z");
data.forEach(function (d) {
d.date = parseDate(d.fcst_valid_local);
});
// Set scale domains.
var x = d3.scaleTime().range([0, width])
.domain(d3.extent(data, function (d) {
return d.date;
}));
var y0 = d3.scaleLinear().range([height, 0]).domain([0, 100]);
const y1 = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(data, (d) => d.pop)]);
// Construct our SVG object.
const svg = d3.select('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g').attr('class', 'container')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Set x, y-left and y-right axis.
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
// .tickFormat(d3.timeFormat('%b %d, %H:%M'))
.tickSize(0).tickPadding(10);
var y0Axis = d3.axisLeft(y0)
.ticks(5).tickSize(0);
var y1Axis = d3.axisRight(y1).ticks(5).tickSize(0);
svg.append("g")
.attr("class", "x-axis axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + 0 + ", 0)")
.call(y0Axis);
svg.append("g")
.attr("class", "y-axis axis")
.attr("transform", "translate(" + width + ", 0)")
.call(y1Axis);
// Draw bars.
var bars = svg.selectAll(".precips")
.data(data);
bars.exit().remove();
bars.enter().append("rect")
.attr("class", "precip")
.attr("width", width / data.length - 50)
.attr("x", function (d) {
return x(d.date);
})
.attr("y", height)
.transition().duration(1000)
.attr("y", function (d) {
return y0(d.pop);
})
.attr("height", function (d) {
return height - y0(d.pop);
});
const lineRH = d3.line()
.x((d) => x(d['date']))
.y(d => y0(d['rh']));
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr('d', lineRH);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

d3 stack bar chart issue

i am creating a stacked bar chart using d3. The graph axis ares getting rendered but not the bar chart and JS console is also not throwing any errors.
Here is the code:
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data = [{
data: [
["2016-01-20T10:36:00.000Z", 95.6981132075472],
["2016-01-20T11:10:00.000Z", 95.8882352941176],
["2016-01-20T11:44:00.000Z", 95.8470588235294],
["2016-01-20T12:18:00.000Z", 95.7941176470588],
["2016-01-20T12:52:00.000Z", 95.675],
["2016-01-20T13:26:00.000Z", 95.7573529411765],
["2016-01-20T14:00:00.000Z", 95.8294117647059],
["2016-01-20T14:34:00.000Z", 95.7736842105263]
],
label: "a"
}, {
data: [
["2016-01-20T10:36:00.000Z", 3.18867924528302],
["2016-01-20T11:10:00.000Z", 3.15441176470588],
["2016-01-20T11:44:00.000Z", 3.15],
["2016-01-20T12:18:00.000Z", 3.16323529411765],
["2016-01-20T12:52:00.000Z", 3.13970588235294],
["2016-01-20T13:26:00.000Z", 3.17794117647059],
["2016-01-20T14:00:00.000Z", 3.16617647058824],
["2016-01-20T14:34:00.000Z", 3.18888888888889]
],
label: "b"
}];
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var stack = d3.layout.stack()
.values(function(d) {
return d.data;
})
.x(function(d) {
return new Date(d[0]);
})
.y(function(d) {
return d[1];
});
var layers = stack(data);
var ary = [];
layers.forEach(function(d) {
ary.push(d.data);
});
x.domain(d3.extent(d3.merge(ary), function(d) {
return new Date(d[0]);
}));
y.domain([0, d3.max(d3.merge(ary), function(d) {
return d.y0 + d.y;
})]);
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return z(i);
});
layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y + d.y0);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis y")
.call(yAxis);
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Please let me know what i am doing wrong in the above posted code and help me fix this code.

I have fixed the issues with my axis in the above code. And able to display the stack bar due to the error pointed by #adilapapaya.
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data = [{
data: [
["2016-01-20T10:36:00.000Z", 95.6981132075472],
["2016-01-20T11:10:00.000Z", 95.8882352941176],
["2016-01-20T11:44:00.000Z", 95.8470588235294],
["2016-01-20T12:18:00.000Z", 95.7941176470588],
["2016-01-20T12:52:00.000Z", 95.675],
["2016-01-20T13:26:00.000Z", 95.7573529411765],
["2016-01-20T14:00:00.000Z", 95.8294117647059],
["2016-01-20T14:34:00.000Z", 95.7736842105263]
],
label: "a"
}, {
data: [
["2016-01-20T10:36:00.000Z", 3.18867924528302],
["2016-01-20T11:10:00.000Z", 3.15441176470588],
["2016-01-20T11:44:00.000Z", 3.15],
["2016-01-20T12:18:00.000Z", 3.16323529411765],
["2016-01-20T12:52:00.000Z", 3.13970588235294],
["2016-01-20T13:26:00.000Z", 3.17794117647059],
["2016-01-20T14:00:00.000Z", 3.16617647058824],
["2016-01-20T14:34:00.000Z", 3.18888888888889]
],
label: "b"
}];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.7);
var y = d3.scale.linear()
.range([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom").ticks(d3.time.hour, 1)
.tickSize(0).innerTickSize(-height).outerTickSize(0).tickFormat(d3.time.format("%H:%M"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var stack = d3.layout.stack()
.values(function(d) {
return d.data;
})
.x(function(d) {
return parseDate(d[0]);
})
.y(function(d) {
return d[1];
});
var layers = stack(data);
var ary = [];
layers.forEach(function(d) {
ary.push(d.data);
});
console.log("d = ", ary)
x.domain(ary[0].map(function(d) {
return parseDate(d[0]);
}));
y.domain([0, d3.max(d3.merge(ary), function(d) {
return d.y0 + d.y;
})]);
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return z(i);
});
layer.selectAll("rect")
.data(function(d) {
return d.data;
})
.enter().append("rect")
.attr("x", function(d) {
return x(parseDate(d[0]));
})
.attr("y", function(d) {
return y(d.y + d.y0);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis y")
.call(yAxis);
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

The issue is in this section:
layer.selectAll("rect")
.data(function(d) {
return d;
})
.attr("x", function(d) {
console.log("d = ", d) // this doesn't get called since there is no data
return x(d.x);
})
d is an object but d3 wants an array so it's not storing the data you pass it.
I think this is what you want (though the output graph looks way off so I'm not 100% sure...). Either way, just remember that you want to return an array in the data function.
layer.selectAll("rect")
.data(function(d) {
return d.data;
})

D3 unexpected identifier

I was trying to make a d3 example from http://bl.ocks.org/mbostock/3887051 modified with my data. I use concepts similar to example. I didn't have problems with acquiring the data, but there's an unexpected identifier error.
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("datatest.csv", function(error, data) {
var inflasiTahun = d3.keys(data[0]).filter(function(key) { return key !== "tahun"; });
data.forEach(function(d) {
d.inflasi = inflasiTahun.map(function(name) { return {name: name, value: parseFloat(d[name])}; });
});
x0.domain(data.map(function(d) { return d.tahun; }));
x1.domain(inflasiTahun).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.inflasi, function(d) { return d.value; }); })
svg.append("g") //this is the error
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Inflasi");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.tahun) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.inflasi; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
});
</script>
I dont know In the console, the unexpected identifier points to this:
svg.append("g") //this is the error

You forgot to close the y.domain([ with ]); on the following line:
y.domain([0, d3.max(data, function(d) { return d3.max(d.inflasi, function(d) { return d.value; }); })
Tools like JSLint and JSHint as well as proper indentation can help you in tracking down this kind of errors.

How to redraw my d3.js chart with data from html form?

I have written small web page that creates a graph with alarms distribution over 24 hour period, with alarm count being a variable that drives how many alarms will be send in this period.
After that I have written a small form that will have the alarm count variable in a input field
<input id="alarm_count_input" type="number"/>
Now I would like to be able to redraw the d3.js graph without page reload, taking alarm count that user submits with the form / input field.
JsFiddle : http://jsfiddle.net/L42LU/
Code :
<script type="text/javascript">
$(function(){
........
function createDataForD3( alarm_cnt, array) {
var data = [];
for(var i = 0, n=array.length; i< n; i++)
{
data.push({ "hour": i,
"alarms": getRatioForHour(i, array) * alarm_cnt
});
}
return data;
}
var schedule = [1, 1, 1, 1, 4, 1, 1, 3, 2, 3, 4, 1, 1, 1, 1, 1, 6, 1, 1, 1, 1, 1, 1, 1];
var alarm_count = 1000;
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 0.85 * document.width - margin.left - margin.right,
height = 0.9 * document.height - margin.top - margin.bottom;
var x_extent = [-0.5, 23.5];
var y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
var x_scale = d3.scale.linear()
.range([0, width])
.domain(x_extent);
var y_scale = d3.scale.linear()
.range([ height, 0])
.domain(y_extent);
var data = createDataForD3( alarm_count , schedule);
var xAxis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.ticks(24);
var yAxis = d3.svg.axis()
.scale(y_scale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x_scale(d.hour) ; })
.y(function(d) { return y_scale( Math.round( d.alarms)) ; });
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom)
.attr("x", (width) / 2)
.text("Hour");
svg.append("g")
.classed("x grid ", true)
.attr("transform", "translate(0,"+height+")")
.call(xAxis
.tickSize(-height,0,0)
.tickFormat("")
);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("x", -20)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Alarms per hour");
svg.append("g")
.classed("y grid", true)
.call(yAxis
.tickSize(-width,0,0)
.tickFormat("")
)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle");
d3.selectAll("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale(d.alarms); })
.attr("r", 6);
$("#alarm_count_input").val(alarm_count);
});
</script>
<form id="form1" role="form" onSubmit="return false;">
<div class=form-group">
<label for="alarm_count_input" >Alarm count</label><br>
<input id="alarm_count_input" class="form-control" type="number" placeholder="Alarm count" min="0" max="999999" step="1" />
</div>
</form>
</body>

Here, is a jsfiddle with an updated code. I moved all parts of code that are depended on alarm count into a seperate function which gets called each time alarm count value is changed.
function render(){
yAxis = yAxis.tickFormat(d3.format(","));
y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
y_scale.domain(y_extent);
var data = createDataForD3( alarm_count , schedule);
svg.select("g.y.axis").call(yAxis);
gridAxis.tickFormat("");
svg.select("g.y.grid").call(gridAxis);
var lineData = svg.selectAll(".line").data([data]);
lineData.enter().append("path")
.attr("d", line(data))
.attr("class", "line");
lineData.exit().remove();
var svgData = svg.selectAll("circle")
.data(data);
var svgEnter = svgData.enter().append("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale(d.alarms); })
.attr("r", 6);
svgData.exit().remove();
}
render();

I am posting my solution as well (someone might find it useful). I have done similar approach to Yogesh's but I explicitly remove and add the elements again (don't know if that's the correct approach - maybe someone will point some errors to me).
function drawY(alarm_cnt, array) {
d3.selectAll(".circles").remove();
d3.selectAll(".y").remove();
d3.selectAll(".line").remove();
var data = createDataForD3( alarm_cnt , array);
var y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_cnt, array)[1] * 1.2 ) ];
var y_scale = d3.scale.linear()
.range([ height, 0])
.domain(y_extent);
var yAxis = d3.svg.axis()
.scale(y_scale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x_scale(d.hour) ; })
.y(function(d) { return y_scale( Math.round( d.alarms)) ; });
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("x", -20)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Alarms per hour");
svg.append("g")
.classed("y grid", true)
.call(yAxis
.tickSize(-width,0,0)
.tickFormat("")
)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "circles")
.selectAll("circle")
.data(data)
.enter()
.append("circle");
d3.selectAll("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale( Math.round( d.alarms)); })
.attr("r", 6);
}
var margin = {top: 20, right: 20, bottom: 30, left: 70},
width = 0.85 * document.width - margin.left - margin.right,
height = 0.9 * document.height - margin.top - margin.bottom;
var schedule = [1, 2, 1, 2, 2, 2, 1, 4, 4, 3, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var alarm_count = 1000;
var data = createDataForD3( alarm_count , schedule);
var x_extent = [-0.8, 23.5];
var x_scale = d3.scale.linear()
.range([0, width])
.domain(x_extent);
var xAxis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.ticks(24);
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom)
.attr("x", (width) / 2)
.text("Hour");
svg.append("g")
.classed("x grid ", true)
.attr("transform", "translate(0,"+height+")")
.call(xAxis
.tickSize(-height,0,0)
.tickFormat("")
);
drawY(alarm_count, schedule);
$("#alarm_count_input").val(alarm_count);
$("#alarm_count_input").change(function(){
drawY($("#alarm_count_input").val(), schedule);
});
});

Develop Reference

JavaScript is the programming language of the Web.

Stacked chart with data array in d3 js - javascript

In case you are trying to add a new dataset with key "total", try to add key "total" in your xData array like following and it should be Visible on chart. var xData = ["total", "A", "B", "C"];

Related

d3.js Bar Chart - Y Axis NaN

How to align x axis with bars respectively in Combo Chart (Bars and Lines)?

d3 stack bar chart issue

D3 unexpected identifier

How to redraw my d3.js chart with data from html form?

Categories

Resources