examplePieGenerator = d3.pie()
.value(d => d.cost)
exampleAngles = examplePieGenerator(exampleData)
exampleArcGenerator = d3.arc()
.innerRadius(0)
.outerRadius(100)
exampleArcGenerator(exampleAngles[0])
{
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 200);
// by default, the pie chart is centered at 0, 0
// we will translate it so that it is in the center of the svg element
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];
}))
usaGeo
states = usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')
margin = ({top: 0, right: 0, bottom: 0, left: 0})
visWidth = width - margin.top - margin.bottom
visHeight = (width * 0.625) - margin.left - margin.right
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)
{
const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right,
visHeight + margin.top + margin.bottom));
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
g.selectAll('path')
.data(states)
.join('path')
.attr('d', path)
.attr('fill', '#d3d3d3')
.attr('stroke', 'white');
const groups = g.selectAll('g')
.data(states)
.join('g')
.attr('transform', state => `translate(${path.centroid(state)})`);
groups.selectAll('path')
.data(state => pie(dataset[state.properties.NAME]))
.join('path')
.attr('d', arc)
.attr('fill', slice => color(slice.data.age))
return svg.node();
}
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.
