Public
Edited
Jul 19, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("population.csv")
Insert cell
// Loading CSV as text only
population_text = FileAttachment("population.csv").text()
Insert cell
// Loading CSV as named data and values - note that everything is a string in this case ( you can notice this by looking at the "" )
FileAttachment("population.csv").csv()
Insert cell
// To convert these strings into dates and numbers, we can set file.csv’s typed option to true. (This is equivalent to passing d3.autoType as the second argument to d3.csvParse, which calls d3.autoType for each row.)
population_data = FileAttachment("population.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
d3.min(population_data, function(d) { return d.Year; })
Insert cell
d3.max(population_data, function(d) { return d.Year; })
Insert cell
d3.mean(population_data, function(d) { return d["Population estimates"]; })
Insert cell
uniqueListOfYears = {
const listOfYears = population_data.map(row => row.Year);
const uniqueListOfYearsSet = new Set(listOfYears.values());
const uniqueListOfYearsArray = Array.from(uniqueListOfYearsSet)
return uniqueListOfYearsArray.sort();
}
Insert cell
populationEstimatePerYear = {
let sum = 0;
const populationEstimatePerYear = [];
uniqueListOfYears.forEach(key => populationEstimatePerYear.push({year: key, population: 0}));
population_data.forEach(getTotalEstimate);

function getTotalEstimate(row) {
for (let index = 0; index < uniqueListOfYears.length; ++index) {
if(populationEstimatePerYear[index].year == row.Year){
populationEstimatePerYear[index].population += row["Population estimates"] ;
break;
}
}
}

return populationEstimatePerYear;
}
Insert cell
d3.min(population_data, function(d) { return d.Year; })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {keyStyled} from "@mbostock/keys"
Insert cell
d3 = require("d3@6") // Use the latest Version
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more