Built with blockbuilder.org
xxxxxxxxxx
<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; }
path{
stroke: black;
stroke-width: 5;
fill: none;
}
</style>
</head>
<body>
<select id="dropdown-category"></select>
<select id="dropdown-countries"></select>
<script>
var margin = { top: 20, right: 20, bottom: 20, left: 20 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// 1. Determine the range (screen space display)
var loadRange = function() {
return {
x: [0, width],
y: [height, 0]
}
}
// 2. Determine the domain (your data. Requires the extent (the min and max))
var loadDomain = function(xValues, yValues) {
return {
x: d3.extent(xValues),
y: d3.extent(yValues)
}
}
// 3. Determine the scale (requires domain and range)
var loadScale = function(domain, range) {
return {
x: d3.scaleLinear().domain(domain.x).range(range.x),
y: d3.scaleLinear().domain(domain.y).range(range.y)
}
}
// 4. Determine the axes (requires scale)
var loadAxis = function(scale) {
return {
x: d3.axisBottom().scale(scale.x),
y: d3.axisLeft().scale(scale.y)
}
}
// 5. Draw svg / add svg to canvas.
var drawSVG = function() {
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
return svg;
}
// 6. Append axes
var appendAxes = function(svg, axes) {
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(axes.x)
svg.append("g")
.call(axes.y)
return svg
}
function getAxisValueExtent(nationsData) {
var nationYears = nationsData.map(function(nation) {
// Determine min and max for each
var incomeMinMax = d3.extent(nation.income, function(i) {return i[0]})
var lifeMinMax = d3.extent(nation.lifeExpectancy, function(i) {return i[0]})
var popMinMax = d3.extent(nation.population, function(i) {return i[0]})
// Merge the arrays
var allMinMax = d3.merge([incomeMinMax, lifeMinMax, popMinMax])
// Find the extent of all the arrays
return d3.extent(allMinMax)
})
var xValuesYearMinMax = d3.extent(d3.merge(nationYears));
return xValuesYearMinMax
}
var findByYear = function(data, year) {
var resultArray = data.find(function(i) {
return i[0] === year
})
if(resultArray) {
return resultArray[1]
}
}
// 8. Build an object for category population
var buildObjectForCountry = function(nation, year, categoryStr) {
if (categoryStr === "population") {
var n = {
country: nation[0].name,
year: year,
category: "population",
value: findByYear(nation[0].population, year)
}
return n
} else if (categoryStr === "lifeExpectancy") {
var n = {
country: nation[0].name,
year: year,
category: "lifeExpectancy",
value: findByYear(nation[0].lifeExpectancy, year)
}
return n
} else if (categoryStr === "income") {
var n = {
country: nation[0].name,
year: year,
category: "income",
value: findByYear(nation[0].income, year)
}
return n
}
// 7. Get original data for specified country
function getDataForCountry(nationsData, countryName) {
return nationsData.filter(function(nation) {
if (nation.name === countryName) {
return nation
}
});
}
function getLineDataForCountryAndCategory(xValuesYearMinMax, nationsData, countryName, categoryStr) {
var data = [];
var originalDataForOneCountry = getDataForCountry(nationsData, countryName);
for (var year = xValuesYearMinMax[0];
year <= xValuesYearMinMax[1]; ++year) {
var newNation = buildObjectForCountry(originalDataForOneCountry, year, categoryStr)
if (newNation.value) {
data.push([newNation.year, newNation.value])
}
}
return data;
}
function drawLine(svg, scale, lineData) {
var line = d3.line()
.x(function(d) { return scale.x(d[0])})
.y(function(d) { return scale.y(d[1])})
svg.append("path")
.attr("class", "line")
.datum(lineData)
.attr("d", line);
return svg;
}
function updateChart(xValuesYearMinMax, nationsData, countryName, categoryStr) {
var arrayOfYAxisValuesForCountry = [];
var originalDataForOneCountry = getDataForCountry(nationsData, countryName);
for(var year=xValuesYearMinMax[0];
year <= xValuesYearMinMax[1]; ++year) {
var newNation = buildObjectForCountry(originalDataForOneCountry, year, categoryStr)
// Get an array of nation population values for domain/extent
if (newNation.values) {
arrayOfYAxisValuesForCountry.push(newNation.value);
}
}
var domain = loadDomain(xValuesYearMinMax, arrayOfYAxisValuesForCountry);
var range = loadRange();
var scale = loadScale(domain, range);
var axes = loadAxis(scale);
var svg = drawSVG();
appendAxes(svg, axes);
var lineData = getLineDataForCountryAndCategory(xValuesYearMinMax, nationsData, countryName, categoryStr);
drawLine(svg, scale, lineData)
}
// Populate dropdowns
function populateCategoryDropdown() {
var dropdownOptions = [
{text: "Population", value: "population"},
{text: "Income", value: "income"},
{text: "Life Expectancy", value: "lifeExpectancy"}
]
d3.select("#dropdown-category")
.selectAll("option")
.data(dropdownOptions)
.enter()
.append("option")
.attr("value", function(option) {return option.value;})
.text(function(option) {return option.text;})
}
function populateCountryDropdown(nationsData) {
var dropdownOfCountries = []
nationsData.forEach(function(nation) {
dropdownOfCountries.push({ text: nation.name, value: nation.name })
});
d3.select("#dropdown-countries")
.selectAll("option")
.data(dropdownOfCountries)
.enter()
.append("option")
.attr("value", function(option) {return option.value;})
.text(function(option) {return option.text;})
}
var dropdownValue = "population";
function updateChartByCategory(xValuesYearMinMax, nationsData, countryName) {
populateCategoryDropdown()
var dropdownCategory = d3.select("#dropdown-category");
console.log('dropdowncat', dropdownCategory);
dropdownCategory.on("change", function() {
dropdownValue = this.value;
console.log("dropdown options", dropdownValue);
var sel = d3.select("#dropdown-category").node().value;
console.log("hey", sel);
updateChart(xValuesYearMinMax, nationsData, countryName, this.value)
})
}
d3.json('nations.json', function(error, nations) {
console.log("Original data", nations)
var xValuesYearMinMax = getXAxisValueExtent(nations);
})
data = d3.json("nations.json", function(error, data) {
data = data[0].income
if (error) return error;
var xScale = d3.scaleLinear()
.domain([1800, 2010])
.range([0, width]); //chart becomes flipped if enter [960, 0] into range instead
var yScale = d3.scaleLinear()
.domain([0, 100000])
.range([height,0]);
// axes
var x = d3.axisBottom()
.scale(xScale)
.ticks(10, ".0f");
var y = d3.axisLeft()
.scale(yScale);
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 line = d3.line()
.x(function(d) { return xScale(d[0])})
.y(function(d) { return yScale(d[1])});
// axes
var xAxis = svg.append("g")
.call(x)
.attr("transform", "translate(0, " + height + ")");
var yAxis = svg.append("g")
.call(y);
// var yLabel = yAxis.append("text")
// .text("income per capita, inflation adjusted (dollars)")
// .attr("class", "axis")
// .attr("transform", "translate(" + (margin.left * 0.85) + ", 0) rotate(-90)")
// .attr("text-anchor", "end");
console.log(line(data));
svg.append("path")
.datum(data) //.datum tells the computer to create ONE thing, vs plotting multiple circles
.attr("d", line); //The shape of an SVG Path element is defined by one attribute: d
};
</script>
</body>
https://d3js.org/d3.v4.min.js