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'})
}
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.