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'})
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.