The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Guides and Examples
Edited
Feb 19
Fork of Line and Area Charts
•
9 forks
Importers
8 stars
Guides and Examples
IntroductionJavaScript BasicsData TransformationSVG and D3 BasicsBar Chart Walk-throughLine and Area ChartsSelections and Joins
Maps
Choropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Insert cell
Insert cell
nycGeo
Insert cell
Insert cell
nycGeo.features[0]
Insert cell
Insert cell
nycGeo.features[0].properties.zcta
Insert cell
Insert cell
mapWidth = 640
Insert cell
mapHeight = 640
Insert cell
Insert cell
projection = d3.geoAlbers()
.fitSize([mapWidth, mapHeight], nycGeo)
Insert cell
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
Insert cell
path(nycGeo)
Insert cell
<svg width=${mapWidth} height=${mapHeight}>
<path
d=${path(nycGeo)}
fill="#d3d3d3"
stroke="white"
/>
</svg>
Insert cell
path(nycGeo).length
Insert cell
Insert cell
path(nycGeo.features[0])
Insert cell
<svg width=${mapWidth} height=${mapHeight}>
<path
d=${path(nycGeo.features[0])}
fill="#d3d3d3"
stroke="white"
/>
</svg>
Insert cell
Insert cell
{
const svg = d3.create('svg')
.attr('width', mapWidth)
.attr('height', mapHeight);

// draw one svg path per zip code
svg.selectAll("path")
.data(nycGeo.features)
.join("path")
.attr("d", path) // same as `d => path(d)`
.attr("fill", '#d3d3d3')
.attr("stroke", "white");

return svg.node();
}
Insert cell
Insert cell
{
const svg = d3.create('svg')
.attr('width', mapWidth)
.attr('height', mapHeight);

// draw one svg path for the entire map
svg.append("path")
.attr("d", path(nycGeo))
.attr("fill", '#d3d3d3')
.attr("stroke", "white");

return svg.node();
}
Insert cell
Insert cell
zipToInjuries
Insert cell
maxInjuriesForZip = d3.max(Object.values(zipToInjuries))
Insert cell
Insert cell
Insert cell
Insert cell
t
Insert cell
d3.interpolateBlues(t)
Insert cell
<svg width="100" height="100">
<rect width="100" height="100" fill="${d3.interpolateBlues(t)}"/>
</svg>
Insert cell
color = d3.scaleSequential()
.domain([0, maxInjuriesForZip])
.interpolator(d3.interpolateBlues)
.unknown('#d3d3d3')
Insert cell
Insert cell
Insert cell
{
const svg = d3.create('svg')
.attr('width', mapWidth)
.attr('height', mapHeight);

// create one path for each zip code
svg.selectAll("path")
.data(nycGeo.features)
.join("path")
// use the geographic path generator to set the shape of the path
.attr("d", path)
// use the color scale to set the color of the path
.attr("fill", d => color(zipToInjuries[d.properties.zcta]))
.attr("stroke", "white");

return svg.node();
}
Insert cell
Insert cell
maxRadius = 10
Insert cell
// we want to map number of injuries to the area of the circle,
// so we use scaleSqrt since the area of a circle is pi * (r^2)
radius = d3.scaleSqrt()
.domain([0, maxInjuriesForZip])
.range([0, maxRadius])
Insert cell
Insert cell
path.centroid(nycGeo.features[0])
Insert cell
{
const svg = d3.create('svg')
.attr('width', mapWidth)
.attr('height', mapHeight);

// draw map

svg.selectAll("path")
.data(nycGeo.features)
.join("path")
.attr("d", path)
.attr("fill", '#d3d3d3')
.attr("stroke", "white");

// draw circles

svg.append("g")
.selectAll("circle")
.data(nycGeo.features)
.join("circle")
.attr("stroke", "steelblue")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.5)
// set the position of the circles
.attr("transform", d => `translate(${path.centroid(d)})`)
// set the size of the circles
.attr("r", d => radius(zipToInjuries[d.properties.zcta]));

// add legend

const legendGroup = svg.append("g")
.attr('transform', `translate(${maxRadius * 2}, 10)`)
.attr('font-family', 'sans-serif')
.attr('font-size', 12);
legendGroup.append('text')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.text('Vehicle collision injuries, 2019');
const legendRows = legendGroup.selectAll("g")
.data([100, 200, 400, 800])
.join("g")
.attr("transform", (d, i) => `translate(0, ${30 + i * 2.5 * maxRadius})`);
legendRows.append("circle")
.attr("r", d => radius(d))
.attr("stroke", "steelblue")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.5);

legendRows.append("text")
.attr("dominant-baseline", "middle")
.attr("x", maxRadius + 5)
.text(d => d);

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