Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="viz.js"></script>
<style>
body { margin:100;position:fixed;top:0;right:0;bottom:0;left:0; }
#area-1 {
stroke: blue;
stroke-width: 2;
fill: steelblue;
opacity: 0.5;
}
svg {
display: block;
margin: auto;
}
line {
fill: none;
stroke: grey;
stroke-width: 1;
}
form{
font-size: 12;
display: block;
}
input {
display: block;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 60},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var dispatch = d3.dispatch("load", "statechange");
var area = d3.area()
.x(d => d[0])
.y(d => d[1])
.curve(d3.curveBasis);
// setup svg cahrt area
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var chart = svg.append('g')
.attr("id", "chart")
.attr("width", width).attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// setup axes
chart.append('g')
.attr("class", "axis")
.attr("id", "x-axis")
.attr("transform", "translate(" + "0," + height + ")");
chart.append('g')
.attr("class", "axis")
.attr("id", "y-axis");
d3.json('nations.json', d => {
var data = mapCountry(d);
dispatch.call("load", this, data);
dispatch.call("statechange", this, data, 'United States');
});
dispatch.on("load.menu", d => {
var dropdown = d3.select("body")
.append("div").attr("class", "menu")
.append("select")
.attr("class", "dropdown").attr("id", "select-country")
.on("change", () => {dispatch.call("statechange", this, d);});
var countryList = Object.keys(d).sort();
dropdown.selectAll("option")
.data(countryList)
.enter().append("option")
.attr("value", d => d)
.text(d => d);
// Create radio buttons
var radio = d3.select(".menu")
.append("form").attr("id", "select-metric")
.on("change", () => {dispatch.call("statechange", this, d)});
const metricOptions = ["income", "population", "lifeExpectancy"];
radio.selectAll("input")
.data(metricOptions)
.enter()
.append("label").text(d => d)
.append("input").attr("type", "radio")
.attr("class", "metric-button")
.attr("name", "metric")
.attr("value", d => d);
radio.select(".metric-button").attr("checked", true);
// Set statechange handler
// dispatch.on("statechange.menu", (country) =>{
// console.log(d3.select(".dropdown").property("value"));
// dropdown.property("value", country);
// let radioVal = d3.select(".metric-button:checked").property("value");
// radio.property("value", radioVal);
// });
});
// Create chart and load up default data
dispatch.on("load.area", d => {
console.log("load area");
var initialArea = updateChart(chart, d, "United States", "lifeExpectancy");
chart.append("g").append("path")
.attr("class", "area")
.attr("id", "area-1")
.attr("d", initialArea);
dispatch.on("statechange.area", d => {
let metricVal = d3.select(".metric-button:checked").property("value");
let countryVal = d3.select(".dropdown").property("value");
console.log(d);
var updatedArea = updateChart(chart, d, countryVal, metricVal);
d3.select("#area-1")
.transition(1000)
.ease(d3.easeLinear)
.attr("d", updatedArea);
});
});
</script>
</body>
https://d3js.org/d3.v4.min.js