Making a bar chart in d3.js. How to put values in a single object into one bar?
Clash Royale CLAN TAG#URR8PPP
Making a bar chart in d3.js. How to put values in a single object into one bar?
I am new to d3.js and I am trying to make a bar graph with an array of objects that looks like this:
d3.js
[
0: potenial: 5, actual: 12, latest: 9
1: potenial: 6, actual: 14, latest: 10
2: potenial: 7, actual: 16, latest: 11
3: potenial: 8, actual: 18, latest: 12
4: potenial: 9, actual: 20, latest: 13
]
And I am trying to put data of each object in a single bar. Like this:
What I've tried is:
// Create data array of values to visualize
var dataObj =
for (let i = 0; i < 5; i++)
dataObj[i] =
potenial: 5 + i,
actual: 12 + (2 * i),
latest: 9 + (i)
console.log(dataObj)
// Create variable for the SVG
var svg = d3.select("body").append("svg")
.attr("height","100%")
.attr("width","100%");
// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
.data(dataObj)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function(d, i) return (d.actual * 10))
.attr("width","40")
.attr("x", function(d, i) return (i * 60) + 25)
.attr("y", function(d, i) return 400 - (d.actual * 10));
svg.selectAll("rect")
.data(dataObj)
.enter().append("rect")
.attr("class", "bar2")
.attr("height", function(d, i) return (d.potenial * 10))
.attr("width","40")
.attr("x", function(d, i) return (i * 60) + 25)
.attr("y", function(d, i) return 400 - (d.potenial * 10));
// Select, append to SVG, and add attributes to text
svg.selectAll("text")
.data(dataObj)
.enter().append("text")
.text(function(d) return d.actual)
.attr("class", "text")
.attr("x", function(d, i) return (i * 60) + 36)
.attr("y", function(d, i) return 415 - (d.actual * 10));
This gave me:
So, I just did the same thing for the potential values as I did for actual values. But only one shows up.
potential
actual
What do I have to do differently for different values?
Thanks.
EDIT
svg.selectAll("text2")
.data(dataObj)
.enter().append("text2")
.text(function(d) return d.potenial)
.attr("class", "text2")
.attr("x", function(d, i) return (i * 60) + 36)
.attr("y", function(d, i) return 415 - (d.potenial * 10));
Possible duplicate of nvd3 Stacked Bar Chart with discrete values
– Martin Zeitler
Aug 10 at 20:38
I think you could have a look at the Grouped Bar Chart bl.ocks.org/mbostock/3887051. You have identical
x value calculation, you will not see the individual bars. You don't fill them differently either.– rioV8
Aug 11 at 0:34
x
1 Answer
1
Your problem is the second svg.selectAll("rect"). This is selecting the initially added .bar rects, replacing their data, then calculating an empty .enter selection and not appending anything. If you want the two sets of rect to be independent then use a different .selectAll. I always try to do it by class.
svg.selectAll("rect")
.bar
.enter
rect
.selectAll
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
.bar
fill: steelblue;
.bar2
fill: orange;
body
width: 800px;
height: 800px;
</style>
</head>
<body>
<script>
var dataObj =
for (let i = 0; i < 5; i++)
dataObj[i] =
potenial: 5 + i,
actual: 12 + (2 * i),
latest: 9 + (i)
console.log(dataObj)
// Create variable for the SVG
var svg = d3.select("body").append("svg")
.attr("height","100%")
.attr("width","100%");
// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll(".bar")
.data(dataObj)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function(d, i) return (d.actual * 10))
.attr("width","40")
.attr("x", function(d, i) return (i * 60) + 25)
.attr("y", function(d, i) return 400 - (d.actual * 10));
svg.selectAll(".bar2")
.data(dataObj)
.enter().append("rect")
.attr("class", "bar2")
.attr("height", function(d, i) return (d.potenial * 10))
.attr("width","40")
.attr("x", function(d, i) return (i * 60) + 25)
.attr("y", function(d, i) return 400 - (d.potenial * 10));
// Select, append to SVG, and add attributes to text
svg.selectAll("text")
.data(dataObj)
.enter().append("text")
.text(function(d) return d.actual)
.attr("class", "text")
.attr("x", function(d, i) return (i * 60) + 36)
.attr("y", function(d, i) return 415 - (d.actual * 10));
</script>
</body>
</html>
This is great! Thanks! One thing is, are the graphs stacked, or is the yellow bar graph just overlapping with the blue graph? Also, how can I make the value of
potential to show up on the tip of the yellow bar? Thanks again. I really appreciate your help!– Dawn17
Aug 12 at 23:27
potential
So, it seems like it's not a stack and it just overlaps, so thats great. If you see my edit, that what I've tried to add text to the yellow bar, but it doesn't show up.
– Dawn17
Aug 13 at 4:48
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
it doesn't tell me how to do it, and i want them to overlap rather than being stacked.
– Dawn17
Aug 10 at 20:37