The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Practice Exercises
Edited
Jan 5
Fork of Maps Practice
•
7 forks
1 star
1
Practice Exercises
JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation PracticeData Transformation Practice - SolutionsSVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart PracticeBar Chart Practice - SolutionsLine and Area Charts PracticeLine and Area Charts Practice - SolutionsMaps PracticeMaps Practice - SolutionsMaps Practice II - Solutions
Maps Practice II
Small Multiples PracticeSmall Multiples Practice - SolutionsColor and Clarity PracticeColor and Clarity Practice - SolutionsAnimated Maps PracticeAnimated Maps Practice - SolutionsNetworks PracticeNetworks Practice - SolutionsInteraction PracticeInteraction Practice - SolutionsGraph Design Practice
Insert cell
Insert cell
Insert cell
Insert cell
examplePieGenerator = d3.pie()
.value(d => d.cost)
Insert cell
exampleAngles = examplePieGenerator(exampleData)
Insert cell
Insert cell
exampleArcGenerator = d3.arc()
.innerRadius(0)
.outerRadius(100)
Insert cell
exampleArcGenerator(exampleAngles[0])
Insert cell
Insert cell
Insert cell
Insert cell
{
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();
}
Insert cell
Insert cell
Insert cell
rawData = FileAttachment("age_distribution_by_state_2019.csv").csv({ typed: true })
Insert cell
Insert cell
maxPopulation = d3.max(rawData, d => d.total)
Insert cell
Insert cell
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];
}))
Insert cell
Insert cell
usaGeo
Insert cell
states = usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')
Insert cell
Insert cell
visWidth = width
Insert cell
visHeight = width * 0.625
Insert cell
Insert cell
projection = d3.geoAlbersUsa()
.fitSize([visWidth, visHeight], usaGeo)
Insert cell
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
Insert cell
pie = d3.pie()
.value(d => d.count)
.sort((a, b) => d3.ascending(a.age, b.age))
Insert cell
Insert cell
radius = d3.scaleSqrt()
.domain([0, maxPopulation])
.range([0, 30])
Insert cell
Insert cell
arc = d3.arc()
.innerRadius(0)
.outerRadius(d => radius(d.data.stateTotalPopulation))
Insert cell
Insert cell
color = d3.scaleOrdinal()
.domain(['0-18', '19-64', '65+'])
.range(d3.schemeCategory10)
Insert cell
Insert cell
Insert cell
{
const svg = d3.create('svg')
.attr('width', visWidth)
.attr('height', visHeight);

// task 1


// task 2


// task 3



return svg.node();
}
Insert cell
Insert cell
Insert cell
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