Creating a simple D3 bar chart - javascript

Well this is a noob question. I am just about beginning to explore the D3jS library.
I am trying to create a simple bar chart right now. For some reasons, the chart is not getting created. Please let me know where I am going wrong.
<style>.chart div {
background-color:red;
border:1px solid blue;
}</style>
<div id="ReportContent_ReportContent" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);">
<svg></svg>
</div>
<script>
var data = [{ "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Deposits", "Actual": 330393232.5, "Forecast": 495589848.75, "Target": 495589848.75 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Fee Based", "Actual": 111868709.42, "Forecast": 167803064.13, "Target": 167803064.13 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Lending", "Actual": 18146873.33, "Forecast": 27220309.995, "Target": 27220309.995 }];
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select('#ReportContent_ReportContent svg')
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data, function (d) { return d.Actual; })
.enter().append("g")
.attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", function(d) { return d.Actual; })
.attr("height", barHeight - 1)
.attr("fill", "#000000");
bar.append("text")
.attr("x", function (d) { return x(d.Actual) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d.Product; });
</script>

One of the problems is that you're trying to access properties of the objects that belong to the array.
Here:
var bar = chart.selectAll("g")
.data(data.Actual)
try to do this instead:
var bar = chart.selectAll("g")
.data(data, function(d) {return d.Actual;})
I haven't tested the solution myself, but this should get rid of one of the errors.

Related

Text on top of d3 vertical stacked bar chart

I'm trying to build a combo chart, i.e. vertical stack bar and a line chart together. I have built the graph but i want the value of each bar on top of the bar. I found certain code for text on top of single bar but not a clear answer for stacked bar. I have written down some code which is available below and I have commented it as // code i tried for text on top of each stack//. But that doesnt seem to work.
d3GroupBarChart(datas){
this.showData = datas
let textArray = [];
datas.forEach(element => {
element.stack.forEach(stack => {
textArray.push(stack)
});
});
if (datas === null || datas.length == 0) {
$(".sieir-chart").empty()
$('.sieir-chart').append(`<div class="no-card-data" >
<h5>No Data Available </h5>
</div>`)
return
}
$('.sieir-chart').html('')
var margin = { top: 20, right: 80, bottom: 100, left: 80 },
width = $('.group-bar-chart').width() - margin.left - margin.right,
height = 410 - margin.top - margin.bottom;
var svg: any = d3.select(".sieir-chart")
.append("svg")
.attr("viewBox", `0 0 ${$('.group-bar-chart').width()} 410`)
.attr("preserveAspectRatio", "xMinYMin meet")
var g = svg.append("g")
.attr("height", height)
.attr("transform",
"translate(" + (margin.left) + "," + (20) + ")");
var x: any = d3.scaleBand()
.range([0, width])
.domain(datas.map(function (d) { return d.group; }))
.padding(0.2);
var yMax = Math.max.apply(Math, datas.map(function (o) { return o.maxBarValue; }))
// Add Y axis
var y = d3.scaleLinear()
.domain([0, yMax])
.range([height, 0])
.nice();
var self = this;
var formatyAxis = d3.format('.0f');
g.append("g")
.style('font-weight', 'bold')
.call(d3.axisLeft(y).tickFormat(function (d: any) {
if (d % 1 === 0) {
return d.toLocaleString()
}
else {
return ''
}
}).ticks(5));
var y1Max = Math.max.apply(Math, datas.map(function (o) { return o.percentage; }))
var y1: any = d3.scaleLinear().range([height, 0]).domain([0, y1Max]);
var yAxisRight: any = d3.axisRight(y1).ticks(5)
// //this will make the y axis to the right
g.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width) + " ,0)")
.style('font-weight', 'bold')
.call(yAxisRight);
// // text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - (margin.left - 100))
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-family", "poppins_regular")
.text("Logged User Count");
// text label for the y1 axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y1", 0 - (margin.right - 50))
.attr("x", 0 - (height / 2))
.attr("dy", width + 130)
.style("text-anchor", "middle")
.style("font-family", "poppins_regular")
.text("Duration in min");
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll(".tick text")
.attr("transform", "translate(-5,7)rotate(-15)")
.style("text-anchor", "middle")
.style("font-size", "11px")
.style('font-weight', 'bold')
.call(this.wrap, x.bandwidth())
var subgroups = ["Total Headcount","Onboarded resource count"];
var groups = d3.map(datas, function (d) { return (d['group']) }).keys();
// Another scale for subgroup position?
var xSubgroup = d3.scaleBand()
.domain(subgroups)
.range([0, x.bandwidth()])
.padding(0.05)
// color palette = one color per subgroup
var color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#006287', '#F68721'])
var self = this;
datas.forEach(data => {
// console.log("data",data);
g.selectAll("mybar")
// Enter in data = loop group per group
.data(datas)
.enter()
.append("g")
.attr("class","bars")
.attr("transform", function (d) { return "translate(" + x(d.group) + ",0)"; })
.selectAll("rect")
.data(function (d) { return subgroups.map(function (key) { return { key: key,
value: d[key] }; }); })
.enter().append("rect")
.attr("x", function (d) { return xSubgroup(d.key); })
.attr("y", function (d) { return y(d.value); })
.attr("width", xSubgroup.bandwidth())
.attr("height", function (d) { return height - y(d.value); })
.attr("fill", function (d) { return color(d.key); })
.append("svg:title")
.text(function (d) {
return `${d['key']}:` + d.value;
})
//code i tried for text on top of each stack
g.selectAll(".text")
.data(data.stack)
.enter().append("text")
.attr("class", "barstext")
.attr("x", function (d) { console.log("d", d); return x(d.name); })
.attr("y", function (d) { return y(d.value); })
.text(function (d) { console.log("text", d); return (d.value); })
// // line chart
var averageline = d3.line()
.x(function (d, i) { return x(d['group']) + x.bandwidth() / 2; })
.y(function (d) { return y1(d['percentage']); })
.curve(d3.curveMonotoneX);
var path = g.append("path")
.attr("class", "line")
.style("fill", "none")
.style("stroke", "#58D68D")
.style("stroke-width", 2)
.attr("d", averageline(datas));
g.selectAll("myCircles")
.data(datas)
.enter()
.append("circle")
.attr("class", "dot")
.style("fill", "white")
.style("stroke", "#58D68D")
.style("stroke-width", 2)
.style('cursor', 'pointer')
.attr("cx", function (d, i) { return x(d['group']) + x.bandwidth() / 2; })
.attr("cy", function (d) { return y1(d['percentage']); })
.attr("r", 3)
.append("svg:title")
.text(function (d) {
return "Percentage: " + d.percentage;
})
})
}
dummy data
[
{
"group": "Digital Process Industries",
"Total Headcount": 12,
"Onboarded resource count": 1,
"percentage": 13,
"maxBarValue": 12,
"stack": [
{
"name": "Total Headcount",
"value": 12
},
{
"name": "Onboarded resource count",
"value": 1
}
]
},
{
"group": "Digital Discrete Industries",
"Total Headcount": 6,
"Onboarded resource count": 6,
"percentage": 33,
"maxBarValue": 6,
"stack": [
{
"name": "Total Headcount",
"value": 6
},
{
"name": "Onboarded resource count",
"value": 6
}
]
}]
You are pretty close with your current solution. There are two main things you need to do to get this working correctly:
If you are looping over your data already (datas.forEeach) there is no need to rebind to it in your databinding for the group offset. You should be binding to the individual data element instead (so bind to [data] instead).
Set the group you create off the data element to a variable and append both the rectangles for the bars and the text for the labels to that group rather than the svg. The reason for this is that it is already offset for the group (via the transform call) so you just have to worry about the subgroup x scale.
See this jsfiddle for a working version of your code. I added comments prepended with EDITED -- to all the lines I changed along with an explanation of what I did.

How do I set a different range for line chart embedded in a bar chart using d3.js

I have a simple bar chart showing data by year. Over top, I am making a line chart representing another data point over the same time. However, I don't have data for the line chart from the final year.
[Here is an image of the graph so far.][1]
As you'll see, this graph makes it look like unemployment numbers in the final year suddenly dropped.
For this line chart, where would I change the range of data I want the line to be drawn over.
Here is my d3.js for the line chart:
var margin = {top: 20, right: 35, bottom: 30, left: 40},
width = 600,
height = 400;
var xScale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(dataset.map(function(d) {
return d.Year;
}));
yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.SYEP_Enrollment;
}))]);
yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.Teen_Unemployment;
}))]);
var svg = d3.select(".bar-chart-wrapper svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// axis-x
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// axis-y
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
// axis-y for the line
g.append("g")
.attr("class", "axis axis--y")
.attr('transform',`translate(${width},0)`)
.call(d3.axisRight(yLineScale));
var bar = g.selectAll("rect")
.data(dataset)
.enter().append("g");
// bar chart
bar.append("rect")
.attr("x", function(d) { return xScale(d.Year); })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
.attr('class','bar')
// labels on the bar chart
bar.append("text")
.attr("dy", "1.8em")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("text-anchor", "middle")
.text(function(d) {
return d.SYEP_Enrollment;
});
// line chart
// axis-y
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
bar.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(dataset)); // 11. Calls the line generator
bar.append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
bar.append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
[Here is a link to the JSON file.][2]
[1]: https://drive.google.com/open?id=1-6SW_wRVaBA70rItvuhecXSxCTgUwH2x
[2]: https://docs.google.com/document/d/1g2h934hhEA0VsXZZLcDL9oHnRLnwBCJYBCD_NdZGGXw/edit?usp=sharing
As mentioned in the comments above the issue lies in the dataset where the final data point does not have the Teen_Unemployment data point. As a result the last point is counted as 0 or null and the point drops to the bottom of the y-scale.
To fix this, we create a separate dataset for the line chart by eliminating any data points which have empty Teen_Unemployment field like:
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
Then we use the lineData to map the domain of for the yLineScale like:
var yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(lineData, (function (d) {
return d.Teen_Unemployment;
}))]);
Finally we create the lineChart with the lineData like so:
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
let lineChart = g.append('g')
.attr('class', 'lineChart')
;
lineChart.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(lineData)); // 11. Calls the line generator
lineChart.selectAll('circle').data(lineData).enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
lineChart.selectAll('text').data(lineData).enter().append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
Working example:
var dataset = [
{
"Year": 2007,
"SYEP_Enrollment": 41650,
"Teen_Unemployment": .330
},
{
"Year": 2008,
"SYEP_Enrollment": 41804,
"Teen_Unemployment": .302
},
{
"Year": 2009,
"SYEP_Enrollment": 43113,
"Teen_Unemployment": .308
},
{
"Year": 2010,
"SYEP_Enrollment": 52255,
"Teen_Unemployment": .325
},
{
"Year": 2011,
"SYEP_Enrollment": 35725,
"Teen_Unemployment": .383
},
{
"Year": 2012,
"SYEP_Enrollment": 30628,
"Teen_Unemployment": .399
},
{
"Year": 2013,
"SYEP_Enrollment": 29416,
"Teen_Unemployment": .408
},
{
"Year": 2014,
"SYEP_Enrollment": 35957,
"Teen_Unemployment": .369
},
{
"Year": 2015,
"SYEP_Enrollment": 47126,
"Teen_Unemployment": .357
},
{
"Year": 2016,
"SYEP_Enrollment": 54263,
"Teen_Unemployment": .334
},
{
"Year": 2017,
"SYEP_Enrollment": 60113,
"Teen_Unemployment": .316
},
{
"Year": 2018,
"SYEP_Enrollment": 69716,
"Teen_Unemployment": .291
},
{
"Year": 2019,
"SYEP_Enrollment": 74354,
"Teen_Unemployment":""
}
];
//make a copy of the dataset for the lineChart
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
var margin = {top: 20, right: 35, bottom: 30, left: 40},
width = 600,
height = 400;
var xScale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(dataset.map(function(d) {
return d.Year;
}));
var yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.SYEP_Enrollment;
}))]);
var yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(lineData, (function (d) {
return d.Teen_Unemployment;
}))]);
var svg = d3.select(".bar-chart-wrapper svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
// axis-x
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// axis-y
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
// axis-y for the line
g.append("g")
.attr("class", "axis axis--y")
.attr('transform',`translate(${width},0)`)
.call(d3.axisRight(yLineScale));
var bar = g.selectAll("rect")
.data(dataset)
.enter().append("g");
// bar chart
bar.append("rect")
.attr("x", function(d) { return xScale(d.Year); })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
.attr('class','bar')
// labels on the bar chart
bar.append("text")
.attr("dy", "1.8em")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("text-anchor", "middle")
.text(function(d) {
return d.SYEP_Enrollment;
});
// line chart
// data filtered above
// axis-y
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
let lineChart = g.append('g')
.attr('class', 'lineChart')
;
lineChart.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(lineData)); // 11. Calls the line generator
lineChart.selectAll('circle').data(lineData).enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
lineChart.selectAll('text').data(lineData).enter().append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
.line {
fill-opacity: 0;
stroke: blue
}
.dot {
fill: white;
stroke: blue;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div class="bar-chart-wrapper">
<svg></svg>
</div>
</body>

Drawing line in d3js results in d3.v5.min.js:2 Error: <path> attribute d: Expected number

I have a dual y-axes chart, in which I want to display bars for total score and a line for average score.
After playing around, I have everything configured, except the line which fails to show.
I get the console error d3.v5.min.js:2 Error: <path> attribute d: Expected number, "MNaN,189.02173913…".
So I think there's something wrong with my lineFunction, but I don't see what, it should return x and y values to plot the line.
I used this page as inspiration
I already checked for solutions to similar answers here and here, but my Average variable is already a number, so that seems to be ok in my case.
What am I missing?
My code:
//// VERTICAL BAR CHART WITH SVG AND NAMES SINGLE X AND DUAL Y AXES
// Create data array of values to visualize
var dataArray = [{ "Player": "John Doe", "Points": 23, "Average": 4.5 }, { "Player": "Jane Doe", "Points": 13, "Average": 2.3 }, { "Player": "Mary Jane", "Points": 21, "Average": 1.5 }, { "Player": "Debasis Das", "Points": 14, "Average": 5.7 }, { "Player": "Nishant", "Points": 37, "Average": 5.9 }, { "Player": "Mark", "Points": 15, "Average": 6.2 }, { "Player": "Andrew", "Points": 18, "Average": 1.2 }, { "Player": "Simon", "Points": 34, "Average": 3.1 }, { "Player": "Lisa", "Points": 30, "Average": 9.2 }, { "Player": "Marga", "Points": 20, "Average": 7.8 }];
// Create variable for the SVG
var canvas = d3.select(".v5chart").append("g").attr("transform", "translate(20,30)");
var canvasWidth = 500;
var maxValue = d3.max(dataArray, function (d) { return d.Points; });
var maxValue2 = d3.max(dataArray, function (d) { return d.Average; });
//console.error("maxValue2:" + maxValue2);
var canvasHeight = maxValue * 10;
var canvasHeight2 = maxValue2 * 10;
//make sure y-axes are equal in height
if (canvasHeight > canvasHeight2) {canvasHeight2 = canvasHeight;}
else if (canvasHeight < canvasHeight2) {canvasHeight = canvasHeight2;}
var heightScale = d3.scaleLinear()
.domain([0, d3.max(dataArray, function (d) { return d.Points; })])
.range([canvasHeight, 0]); //use max value (37) * 10
var y_axis = d3.axisLeft()
.scale(heightScale);
var heightScale2 = d3.scaleLinear()
.domain([0, d3.max(dataArray, function (d) { return d.Average; })])
.range([canvasHeight2, 0]);
var y_axis2 = d3.axisRight()
.scale(heightScale2);
//band settings x axis
var xScale = d3.scaleBand()
.domain(dataArray.map(function (d) { return d.Player; }))
.range([0, canvasWidth]).padding([0.1]);
var x_Axis = d3.axisBottom(xScale);
// create bars
canvas.selectAll("rect")
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function (d, i) { return (d.Points * 10) })
.attr("width", xScale.bandwidth())
.attr("x", function (d, i) { return xScale(d.Player); })
.attr("y", function (d, i) { return canvasHeight - (d.Points * 10) });
// text for in vertical bars
canvas.selectAll("text")
.data(dataArray)
.enter().append("text")
.text(function (d) { return d.Points })
.attr("text-anchor", "middle")
.attr("class", "text")
.attr("x", function (d, i) { return (xScale(d.Player) + xScale.bandwidth() / 2); })
.attr("y", function (d, i) { return canvasHeight + 20 - (d.Points * 10) });
var yScale = d3.scaleLinear()
.domain([0, maxValue2]) // input
.range([canvasHeight2, 0]); // output
var lineFunction = d3.line()
.x(function (d, i) { return xScale(i); }) // set the x values for the line generator
.y(function (d, i) { return yScale(d.Average); }) // set the y values for the line generator
.curve(d3.curveMonotoneX); // apply smoothing to the line
// 4. Call the y axis in a group tag
canvas.append("g")
.attr("class", "y axis")
.call(d3.axisRight(yScale)) // Create an axis component with d3.axisLeft
.attr("transform", "translate(" + canvasWidth + ",0)")
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-1em")
.attr("text-anchor", "end")
.text("Average");
canvas.append("path")
.attr("class", "line")
.attr("d", lineFunction(dataArray));
canvas.selectAll(".dot")
.data(dataArray)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function (d, i) { return xScale(d.Player) })
.attr("cy", function (d) { return yScale(d.Average) })
.attr("r", 5)
.on("mouseover", function (a, b, c) {
console.log(a)
//this.attr('class', 'focus')
})
.on("mouseout", function () { })
.append("text")
.attr("text-anchor", "middle")
.text(function (d) {
return d.Average;
});
//y axis 1 settings
canvas.append("g")
.attr("transform", "translate(0,0)")
.call(y_axis)
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Points");
//x axis
canvas.append("g")
.attr("transform", "translate(0," + canvasHeight + ")")
.call(x_Axis)
.selectAll("text")
.attr("x", 30)
.attr("transform", function (d) {
return "rotate(65)"
});
/*Rectangle bar class styling*/
.bar {
fill: #0080FF
}
.bar:hover {
fill: #003366
}
/*Text class styling*/
.text {
fill: white;
font-family: sans-serif
}
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: #ffab00;
stroke-width: 3;
}
.overlay {
fill: none;
pointer-events: all;
}
/* Style the dots by assigning a fill and stroke */
.dot {
fill: #ffab00;
stroke: #fff;
}
.focus circle {
fill: none;
stroke: steelblue;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg class="v5chart" width="960" height="500"></svg>
In docs of d3;
The first element in domain will be mapped to the first band, the
second domain value to the second band, and so on. Domain values are
stored internally in a map from stringified value to index; the
resulting index is then used to determine the band. Thus, a band
scale’s values must be coercible to a string, and the stringified
version of the domain value uniquely identifies the corresponding
band. If domain is not specified, this method returns the current
domain.
But in your xScale function, you are using mapped values of dataArray with Player key. I mean if you want to get any correct number from xScale function, you have to use it with Player key like 'John Doe', 'Jane Doe' etc.
In summary, if you change the line function to this one, you will see the result:
var lineFunction = d3.line()
.x(function (d, i) { return xScale(d.Player); /*return xScale(i)*/ })
.y(function (d, i) { return yScale(d.Average); })
.curve(d3.curveMonotoneX);
I guess, you want to fix alignment problem after this. Its up to you.

Styling not working in Mozilla Firefox

I want to build stacked chart bar.
To build it I am using d3js version 3.
I found some template on codepen and changed to my needs.
Bar Chart looks nice when I open it in Chrome:
But when I open it in Mozilla Firefox, it display with no colors:
What should I fix to make styles work?
Here is my html and javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>d3.js learning</title>
<script data-require="d3#3.0.0" data-semver="3.0.0" src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
</style>
</head>
<body>
<script>
// Setup svg using Bostock's margin convention
/* Data in strings like it would be if imported from a csv */
var data = [
{ year: "2006", pid: "10", eid: "15"},
{ year: "2007", pid: "12", eid: "18"},
{ year: "2008", pid: "05", eid: "20"},
{ year: "2009", pid: "01", eid: "15"},
{ year: "2010", pid: "02", eid: "10"},
{ year: "2011", pid: "03", eid: "12"},
{ year: "2012", pid: "04", eid: "15"},
{ year: "2013", pid: "06", eid: "11"},
{ year: "2014", pid: "10", eid: "13"},
{ year: "2015", pid: "16", eid: "19"},
];
var margin = {top: 20, right: 160, bottom: 35, left: 30};
var width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
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 parse = d3.time.format("%Y").parse;
// Transpose the data into layers
var dataset = d3.layout.stack()(["pid", "eid"].map(function(id) {
return data.map(function(d) {
return {x: parse(d.year), y: +d[id]};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x; }))
.rangeRoundBands([10, width-10], 0.20);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);
var colors = [ "3d3756", "574e7c"];
// 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")
.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");;
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i]; });
var rect = groups.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.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
.on("mouseover", function() { tooltip.style("display", null); })
.on("mouseout", function() { tooltip.style("display", "none"); })
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0: return "EID";
case 1: return "PID";
}
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
</script>
</body>
</html>
fixed it with adding hashes to colors:
from:
const all_colors = ["3d3756", "f0ee42", "f4c7de"];
to:
const all_colors = ["#3d3756", "#f0ee42", "#f4c7de"];

D3jS color scales do not work

Hello I am trying to add color fill to my bar chart which has a linear scale. The code which I am trying somehow wont work. could you please let me know what I am doing wrong. sorry, I am pretty new to D3jS and JavaScript.
Thanks!
<script>
var data = [{ "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Deposits", "Actual": 330393232.5, "Forecast": 495589848.75, "Target": 495589848.75 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Fee Based", "Actual": 111868709.42, "Forecast": 167803064.13, "Target": 167803064.13 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Lending", "Actual": 18146873.33, "Forecast": 27220309.995, "Target": 27220309.995 }];
var color = d3.scale.linear()
.domain(0, function (d) { return max(d.Actual); })
.range(["#f3c40e", "#7d6507"]);
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select('#ReportContent_ReportContent svg')
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data, function (d) { return d.Actual; })
.enter().append("g")
.attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", function (d) { return d.Actual / 1000000; })
.attr("height", function (d) { return d.Actual / 10000000;})
.attr("fill", color);
bar.append("text")
.attr("x", function (d) { return x(d.Actual) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d.Product; });
</script>
There are more issues with this bar chart than the color code, and even that one fix needs a bit more adjustment. The easiest thing was to work on a FIDDLE rather than try to squeeze all changes in a comment.
bar.append("rect")
.attr("width", function (d) { return x(d.Actual); }) //change
.attr("height", barHeight) //change
.attr("fill", function(d) { return color(d.Actual);} ); //change
There are still other changes...the domain setting was not quite right, and I also added a margin so that the text displays right using a text-anchor.
In any case, overall, I think this will take you closer to what you need.
You'll need to pass a function to attr('fill, ), not just a scale.
bar.append("rect")
.attr("width", function (d) { return d.Actual / 1000000; })
.attr("height", function (d) { return d.Actual / 10000000;})
.attr("fill", function(d) { return color(d); );
It also seems like your scale is not set up properly:
var color = d3.scale.linear()
.domain(0, THIS NEEDS TO BE A VALUE)
.range(["#f3c40e", "#7d6507"]);
The second part of the domain needs to be a value (or a function that evaluates to one)

Categories