Public
Edited
May 9
examplePieGenerator = d3.pie()
.value(d => d.cost)
exampleAngles = examplePieGenerator(exampleData)
exampleArcGenerator = d3.arc()
.innerRadius(0)
.outerRadius(100)
exampleArcGenerator(exampleAngles[0])
exampleColor = d3.scaleOrdinal()
.domain(exampleData.map(d => d.utility))
.range(d3.schemeCategory10);
swatches({ color: exampleColor })
{
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 200);
const g = svg.append('g')
.attr('transform', 'translate(100,100)');
g.selectAll('path')
.data(exampleAngles)
.join('path')
.attr('d', exampleArcGenerator)
.attr('fill', d => exampleColor(d.data.utility));
return svg.node();
}
rawData = FileAttachment("age_distribution_by_state_2019.csv").csv({ typed: true })
maxPopulation = d3.max(rawData, d => d.total)
dataset = Object.fromEntries(rawData
.map(d => {
const adults = d['19-25'] + d['26-34'] + d['35-54'] + d['55-64'];
const key = d.state;
const value = [
{ age: '0-18', count: d['0-18'], stateTotalPopulation: d.total },
{ age: '19-64', count: adults, stateTotalPopulation: d.total },
{ age: '65+', count: d['65+'], stateTotalPopulation: d.total },
];
return [key, value];
}))
También se cuenta con datos GeoJSON para los estados. Como la proyección no incluye a Puerto Rico, se filtrará del conjunto de datos.
usaGeo = FileAttachment('gz_2010_us_040_00_20m.json').json()
states = usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')
visWidth = width
visHeight = width * 0.625
projection = d3.geoAlbersUsa()
.fitSize([visWidth, visHeight], usaGeo)
path = d3.geoPath().projection(projection)
pie = d3.pie()
.value(d => d.count)
.sort((a, b) => d3.ascending(a.age, b.age))
radius = d3.scaleSqrt()
.domain([0, maxPopulation])
.range([0, 30])
arc = d3.arc()
.innerRadius(0)
.outerRadius(d => radius(d.data.stateTotalPopulation))
color = d3.scaleOrdinal()
.domain(['0-18', '19-64', '65+'])
.range(d3.schemeCategory10)
swatches({ color })
{
const svg = d3.create("svg")
.attr("width", 1152)
.attr("height", 720);
svg.append("g")
.selectAll("path")
.data(states)
.join("path")
.attr("d", path)
.attr("fill", "#ccc")
.attr("stroke", "#fff");
svg.append("g")
.selectAll("g")
.data(states)
.join("g")
.attr("transform", d => {
const [x, y] = path.centroid(d);
return `translate(${x},${y})`;
})
.each(function(d) {
const stateName = d.properties.NAME;
const data = dataset[stateName];
if (data) {
const g = d3.select(this);
g.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc)
.attr("fill", d => color(d.data.age));
}
});
return svg.node();
}
{
const svg = d3.create('svg')
.attr('width', visWidth)
.attr('height', visHeight);
// T 1
// T 2
// task 3
return svg.node();
}
d3 = require('d3@7')
import { swatches } from "@d3/color-legend"
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.
