Dropdown update in bar chart
1,291 views
Skip to first unread message
Fernando Ailson
Dec 4, 2019, 1:35:50 PM12/4/19
to d3-js
Hi everyone,
I'm started to using d3js v5 to build a bar chart from a .csv file, and as my programming knowledge is not good, I picked an example from the web and start to working in it. I can get a specific value from the .csv and draw the chart, but I would like to implement a dropdown list to select a specific value from the .csv as showed in the image below.
I'm unable to load this data from .csv. It doesn't seem complicated, but I tried it in some ways and it didn't work out. Could someone give me any tips on how to do this?
Best regards!
Below I put the code that I working in.
1. CSV
country,year,hdi,gdp,unemp
Australia,2000,45,5.6,9
Austria,2000,54,6.1,8
Canada,2000,23,4.5,6
...
...
2. HTM - JS
<html>
<head>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
</style>
<script src="//d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div>
<select id="S_indicators"></select>
</div>
<svg width="560" height="300"></svg>
<script>
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
d3.csv("output.csv").then(function (data) {
var allGroup = ["gdp","hdi","unemp"]
d3.select("#S_indicators")
.selectAll('myOptions')
.data(allGroup)
.enter()
.append('option')
.text(function (d) { return d; })
.attr("value", function (d) { return d; })
x.domain(data.map(function (d) {
return d.year;
}));
y.domain([0, d3.max(data, function (d) {
return Math.max(d.unemp);
})]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.year);
})
.attr("y", function (d) {
return y(Number(d.unemp));
})
.attr("width", x.bandwidth())
.attr("height", function (d) {
return height - y(Number(d.unemp));
});
});
</script>
</body>
</html>
Klaus Zinser
Dec 4, 2019, 2:09:32 PM12/4/19
to d3-js
Hello Fernando,
I am also relatively new. You need to make some changes in the HTML code, too. I am sure you find some samples. V4 and V5 are similar. If there is no progress come back.
Klaus
Gordon Woodhull
Dec 4, 2019, 5:06:14 PM12/4/19
to d3...@googlegroups.com
Looks like you want to select different column names from the dropdown.
I'd read the column names from the first row in order to populate allGroup, and then filter out any columns you don't want to appear there.
var allGroup = Object.keys(data[0]);
allGroup = allGroup.filter(k => !['year'].includes(k));
On Dec 4, 2019, at 1:35 PM, Fernando Ailson <fdiass...@gmail.com> wrote:
Hi everyone,
I'm started to using d3js v5 to build a bar chart from a .csv file, and as my programming knowledge is not good, I picked an example from the web and start to working in it. I can get a specific value from the .csv and draw the chart, but I would like to implement a dropdown list to select a specific value from the .csv as showed in the image below.
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/ff2eb11c-f5f9-430a-a2aa-da12ceac997f%40googlegroups.com.
<Sem título.jpg>
Fernando Ailson
Dec 5, 2019, 3:36:39 PM12/5/19
to d3-js
Thanks for the replies.
I ended up doing in another way that worked. Actually not working 100%. For the .csv "unemp" variable, the bar chart does not draw correctly. For others it works correctly. Strange, but I'm working on the solution.
var shown = "GDP";
var choices = ["GDP", "HDI", "Unemployment"]
var headers = {"GDP":"gdp", "HDI":"hdi", "Unemployment":"unemp"}
var createChart = function(data) {
d3.selectAll("svg").remove()
var svg = d3.select("#drop").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 + ")");
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d[headers[shown]]; })]);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.year); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d[headers[shown]]); })
.attr("height", function(d) { return height - y(d[headers[shown]]); })
.attr("fill", "#2027f9")
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.style("font-size", "8px")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.style("font-size", "8px")
.call(d3.axisLeft(y));
}
d3.csv("output2.csv").then(function (data) {
var selector = d3.select("#drop")
.append("select")
.on("change", function(d){shown = d3.select(this).property('value'); createChart(data);})
selector.selectAll("option")
.data(choices)
.enter().append("option")
.attr("value", function(d){
return d;
})
.text(function(d){
return d;
});
createChart(data)Fernando Ailson
Dec 6, 2019, 1:33:59 PM12/6/19
to d3-js
Well, I finally did the chart works perfectly. There was no problem with the code below. I just convert the .csv file to a .json file and it worked!
Suneetha Y
Apr 24, 2020, 1:16:52 AM4/24/20
to d3-js
Hi ,
I am facing same issue ,can you please share final code.
Reply all
Reply to author
Forward
0 new messages