Stories with data, visuals & code at CNN.
Published
Edited
Aug 30, 2019
chart640 = chart(640)
chart960 = chart(960)
chart320 = chart(320)
DOM.download(() => createZIP(), `${circleValue}.zip`, 'Download a ZIP directory of PNGs')
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 tracts
const tractsGroup = g
.append('g')
.attr('class', 'tracts');
tractsGroup
.selectAll('.tract')
.data(geojsonData.features)
.join('path')
.attr('class', 'tract')
.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',10)
.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', '10px')
.attr('fill', '#eeeeee')
legendGroup
.append('text')
.attr('y', 38)
.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 (measure.includes(key)) {
return value;
}
}).filter(Number.isFinite)))
viewof cities = checkbox({
title: "Cities to add to the map",
options: cityList.map(d => d.name).sort(),
value: [
"Downtown",
"Lancaster",
"Long Beach",
"Malibu",
"Pasadena",
"Pomona",
"Santa Clarita",
"Santa Monica",
"West Hollywood",
]
})
colors = ({
totpeople: "#ec8331",
totpeople2018: "#ec8331",
totpeople2017: "#ec8331",
totpeople2016: "#ec8331",
totpeople2015: "#ec8331",
})
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.
