How would I map my csv file (dietary-data.csv) [https://file.io/RYfZ1DSch18f] to the pie donut chart using d3. This is w
Posted: Tue Jul 12, 2022 8:22 am
How would I map my csv file (dietary-data.csv)[https://file.io/RYfZ1DSch18f] to the pie donut chart using d3.This is what I have so far - I am trying to use the drop down tomap the data to a donut chart. This is the results I am trying toachieve: http://bl.ocks.org/dbuezas/9306799 (but with drop downinstead like I did below) I am trying to display the percentage.Any guidance on how to map it?
My code so far:
<!DOCTYPE html><meta charset="utf-8"><style>body { font-family: "Helvetica Neue", Helvetica, Arial,sans-serif; width: 960px; height: 500px; position: relative;}
svg { width: 100%; height: 100%;}
path.slice{ stroke-width:2px;}
polyline{ opacity: .3; stroke: black; stroke-width: 2px; fill: none;}
</style><body><form> <select name="year"id="year"> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963" selected>1963</option> </select></form><div id="vis"></div><scriptsrc="https://d3js.org/d3.v3.min.js"></script><script>
var svg = d3.select("body") .append("svg") .append("g")
svg.append("g") .attr("class", "slices");svg.append("g") .attr("class", "labels");svg.append("g") .attr("class", "lines");
var width = 960, height = 450, radius = Math.min(width, height) / 2;
var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; });
var arc = d3.svg.arc() .outerRadius(radius * 0.8) .innerRadius(radius * 0.4);
var outerArc = d3.svg.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height /2 + ")");
var key = function(d){ return d.data.label; };
var color = d3.scale.ordinal() .domain(["alcohol", "cereals", "dairy","fruits_veg", "meats", "oils_fats", "other", "roots", "pulses","sugar"]) .range(["#98abc5", "#8a89a6", "#7b6888","#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
function update(year) { d3.csv('dietary-data.csv', function(csv_data){
var year_filter =csv_data.filter(function(d) { if(d["year"]==year){ return d; } });
});}
var select = d3.select('#year');select.on('change', function() { console.log(this.value); update(this.value);})
update('1963');</script></body></html>
My code so far:
<!DOCTYPE html><meta charset="utf-8"><style>body { font-family: "Helvetica Neue", Helvetica, Arial,sans-serif; width: 960px; height: 500px; position: relative;}
svg { width: 100%; height: 100%;}
path.slice{ stroke-width:2px;}
polyline{ opacity: .3; stroke: black; stroke-width: 2px; fill: none;}
</style><body><form> <select name="year"id="year"> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963" selected>1963</option> </select></form><div id="vis"></div><scriptsrc="https://d3js.org/d3.v3.min.js"></script><script>
var svg = d3.select("body") .append("svg") .append("g")
svg.append("g") .attr("class", "slices");svg.append("g") .attr("class", "labels");svg.append("g") .attr("class", "lines");
var width = 960, height = 450, radius = Math.min(width, height) / 2;
var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; });
var arc = d3.svg.arc() .outerRadius(radius * 0.8) .innerRadius(radius * 0.4);
var outerArc = d3.svg.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height /2 + ")");
var key = function(d){ return d.data.label; };
var color = d3.scale.ordinal() .domain(["alcohol", "cereals", "dairy","fruits_veg", "meats", "oils_fats", "other", "roots", "pulses","sugar"]) .range(["#98abc5", "#8a89a6", "#7b6888","#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
function update(year) { d3.csv('dietary-data.csv', function(csv_data){
var year_filter =csv_data.filter(function(d) { if(d["year"]==year){ return d; } });
});}
var select = d3.select('#year');select.on('change', function() { console.log(this.value); update(this.value);})
update('1963');</script></body></html>