Stories with data, visuals & code at CNN.
Published
Edited
Feb 24, 2020
2 forks
2 stars
chart960 = chart(960)
function chart(width) {
// top level SVG
const svg = d3.create("svg")
.attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`)
.style("width", `${width}px`)
.style("height", "auto");
// <g> grouping element
const g = svg.append('g');
const baseGroup = g.append('g').attr('class', 'base');
// the base county layer
baseGroup.append("path")
.datum(la_county)
.attr("fill", mapFillColor)
.attr("d", path);
// <g> for the zips
const zipsGroup = g
.append('g')
.attr('class', 'zips');
zipsGroup
.selectAll('.zip')
.data(geojsonData.features)
.join('path')
.attr('class', 'zip')
.attr('fill', d => d.properties[circleValue] === 0 ? '#eeeeee' : colorScale(d.properties[circleValue]))
.attr('stroke', d => d.properties[circleValue] === 0 ? '#eeeeee' : colorScale(d.properties[circleValue]))
.attr('d', path);
// <g> for the roads
const roadsGroup = g.append('g').attr('class', 'roads');
roadsGroup.selectAll('.road')
.data(roads.features)
.join('path')
.attr('class', 'road')
.attr('fill', 'none')
.attr('opacity', 0.5)
.attr('stroke', roadStrokeColor)
.attr('stroke-width', 0.5)
.attr('d', path);
// <g> for the district
const districtGroup = g.append('g').attr('class', 'district');
districtGroup.selectAll('.district')
.data(district.features)
.join('path')
.attr('class', 'district')
.attr('fill', 'none')
.attr('opacity', 1)
.attr('stroke', districtStrokeColor)
.attr('stroke-width', 1)
.attr('d', path);
// <g> for cities
const citiesGroup = g.append('g').attr('class', 'cities');
// <g> for each city
const cityCircles = citiesGroup.selectAll('.city')
.data(selectedCities)
.join('g')
.attr('class', 'city')
.attr('data-name', d => d.name)
.attr('transform', d => `translate(${projection(d.coordinates)[0]}, ${projection(d.coordinates)[1]})`);
// city circles
cityCircles.append('circle')
.attr('fill', '#222222')
.attr('stroke', "#222222")
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 2);
// city labels
cityCircles.append('text')
.attr('x', d => d.x || 7)
.attr('y', d => d.y || 5)
.attr('text-anchor', d => d.anchor || 'start')
.attr('font-family', 'Benton Gothic, sans-serif')
.attr('fill', 'none')
.attr('stroke', 'white')
.attr('stroke-width', '2.5')
.attr('stroke-opacity', '0.8')
.attr('font-size', `${labelTextSize}px`)
.attr('pointer-events', 'none')
.attr('font-style', d => d.type === 'neighborhood' ? 'italic' : null)
.text(d => d.name);
cityCircles.append('text')
.attr('x', d => d.x || 7)
.attr('y', d => d.y || 5)
.attr('text-anchor', d => d.anchor || 'start')
.attr('font-family', 'Benton Gothic, sans-serif')
.attr('fill', '#222')
.attr('font-size', `${labelTextSize}px`)
.attr('pointer-events', 'none')
.attr('font-style', d => d.type === 'neighborhood' ? 'italic' : null)
.text(d => d.name);
//<g> for legend
const legendGroup = svg.append('g')
.attr('class', 'county-legend')
.attr('width', 300)
.attr('transform', `translate(${mapWidth-200},${mapHeight-80})`)
legendGroup.selectAll('rect')
.data(colorPalette.slice(1, colorPalette.length))
.join('rect')
.attr('height',20)
.attr('x', (d,i)=>(i*(28)))
.attr('width', 28)
.attr('fill', d => d)
legendGroup
.append('text')
.attr('dy', -5)
.text('← Less')
.attr('font-size', '13px')
.attr('font-family', 'sans-serif')
legendGroup
.append('text')
.attr('dx',200)
.attr('text-anchor','end')
.attr('dy', -5)
.text('More →')
.attr('font-size', '13px')
.attr('font-family', 'sans-serif')
legendGroup
.append('rect')
.attr('y', 30)
.attr('width', '28px')
.attr('height', '20px')
.attr('fill', '#eeeeee')
legendGroup
.append('text')
.attr('y', 43)
.attr('x', 35)
.attr('text-anchor','start')
.text('No donors')
.attr('font-size', '13px')
.attr('font-family', 'sans-serif')
return svg.node();
}
values = d3.merge(geojsonData.features.map(
d => Object.entries(d.properties).map(
([key, value]) => {
if (candidates.includes(key)) {
return value;
}
}).filter(Number.isFinite)))
colors = ({
jake_jeong: '#d95f02',
holly_mitchell: '#7570b3',
jan_perry: '#e7298a',
herb_wesson: '#1b9e77',
jorge_nuno: '#66a61e',
alber_robles: '#e6ab02',
})
groups = ckmeans(values, breaks).map(d => d3.min(d))
colorScale = d3.scaleThreshold(groups, colorPalette.slice(1, colorPalette.length))
district = await d3.json('https://gist.githubusercontent.com/stiles/6e24fc5d70bf78dbcebb1878c16648d9/raw/a2f5b2949207ff3e4908a8cb4deb47ee12824df0/2nddistrict.geojson')
districtLabels = await d3.json('https://gist.githubusercontent.com/stiles/b7ea564c2252c1d8d813e2e66010f892/raw/864d782a889a510bef6542436baf0d737cf77ff8/district2labels.geojson')
async function createZIP() {
const zip = new JSZip()
const folder = zip.folder(circleValue);
folder.file('320.png', await exportPNG(chart320));
folder.file('640.png', await exportPNG(chart640));
folder.file('960.png', await exportPNG(chart960));
return zip.generateAsync({type: 'blob'})
}
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.
