2f:T106b,function chart(width) { // top level SVG const svg = d3.create("svg") .attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`) .style("width", `${width}px`) .style("height", '${height}px'); // 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); // for the hoods const hoodsGroup = g .append('g') .attr('class', 'hoods'); hoodsGroup .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); // 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); // 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); // for cities const citiesGroup = g.append('g').attr('class', 'cities'); // 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); // 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',15) .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', '15px') .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(); }30:T5b0,cityList = [ { name: 'Leimert Park', type: 'neighborhood', coordinates: [-118.3307598, 34.0131431], }, { name: 'Carson', type: 'city', coordinates: [-118.28202, 33.83141], }, { name: "Long Beach", type: 'city', coordinates: [-118.21426391601561, 33.804255802014865], }, { name: "Inglewood", type: 'city', coordinates: [-118.355370, 33.961018], x: "-9", anchor: "end" }, { name: "Culver City", type: 'city', x: "-9", anchor: "end", coordinates: [-118.3964665, 34.0211224], }, { name: "Compton", type: 'city', coordinates: [-118.220070, 33.895847] }, { name: "Lancaster", type: 'city', coordinates: [-118.157958984375, 34.69476751842919] }, { name: "Beverly Hills", type: 'city', coordinates: [-118.3993148803711, 34.073706174064164] }, { name: "West Hollywood", type: 'city', coordinates: [-118.35708618164064, 34.091620235447365] }, { name: "Arcadia", type: 'city', coordinates: [-118.03779602050781, 34.13709922600642] }, { name: "Santa Monica", type: 'city', coordinates: [-118.48342895507812, 34.011119420618684], x: "-9", anchor: "end" }, { name: 'Pasadena', type: 'city', coordinates: [-118.14452, 34.14778], }, { name: 'Pomona', type: 'city', coordinates: [-117.749992, 34.055103], x: '-9', anchor: 'end', } ]31:[] 2d:{"title":"Mapping donations to candidates in the race for 2nd District supervisors, by Los Angeles County neighborhoods","cells":[{"id":0,"value":"md`# Mapping donations to candidates in the race for 2nd District supervisors, by Los Angeles County neighborhoods\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"md`**Choose candidate to view**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof circleValue = select({\n options: candidates.map(value => ({\n label: value === 'orourke' ? \"O'Rourke\" : journalize.capfirst(value),\n value\n })),\n value: \"harris\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"DOM.download(() => createZIP(), `${circleValue}.zip`, 'Download a ZIP directory of PNGs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"chart320 = chart(320)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"chart640 = chart(640)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"chart960 = chart(960)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"md`First we load the zip level data we want to work with.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"geojsonData = await d3.json(\n 'https://gist.githubusercontent.com/stiles/d0bbee78d31431c7bf6391ba08646776/raw/66e7aae04ab46b40b8a5b7f91dda73040f189dd2/second_district_hoods_winner_groups.geojson'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"md`A list of all the candidates we want to be able to visualize.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"candidates = [\n 'herb_wesson',\n 'jan_perry',\n 'holly_mitchell',\n 'chan_jeong',\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"md`Pull out all the valid values from the block level data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"values = d3.merge(geojsonData.features.map(\n d => Object.entries(d.properties).map(\n ([key, value]) => {\n if (candidates.includes(key)) {\n return value;\n }\n }).filter(Number.isFinite)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`### Symbology`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"viewof labelTextSize = number({ description: 'In pixels (px)', steps: 1, title: 'Label text size', value: 17 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof roadStrokeColor = color({\n title: \"Road stroke color\",\n value: \"#999999\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"viewof districtStrokeColor = color({\n title: \"District stroke color\",\n value: \"#000000\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof baseFillColor = color({\n description: 'Only used if a candidate does not have a unique color',\n title: \"Default fill color\",\n value: \"#216db9\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"viewof breaks = slider({\n description: 'Number of breaks to render in the map',\n min: 2,\n max: 9,\n value: 7,\n step: 1,\n title: \"Breaks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof cities = checkbox({\n title: \"Cities to add to the map\",\n options: cityList.map(d => d.name).sort(),\n value: [\n \"Downtown\",\n \"Culver City\",\n \"Carson\",\n \"Inglewood\",\n \"Leimert Park\",\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1206,"value":"md`Unique colors for certain candidates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"colors = ({\n chan_jeong: '#d95f02',\n holly_mitchell: '#7570b3',\n jan_perry: '#e7298a',\n herb_wesson: '#1b9e77',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1226,"value":"md`Use ckmeans (a better version of jenks) to generate our own breaks based on our data values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"groups = ckmeans(values, breaks).map(d => d3.min(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1235,"value":"md`Generate our color scale based on our potentially unique color value using our wrapper for Chroma.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"colorPalette = generateColorScale(['#eeeeee', colors[circleValue] || baseFillColor], breaks + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"md`Use our custom groups to generate our own scale using our generated color palette and d3.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"colorScale = d3.scaleThreshold(groups, colorPalette.slice(1, colorPalette.length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"md`A list of all the selected cities above with their coordinates included.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"selectedCities = cityList.filter(d => cities.includes(d.name))","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"md`### Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"legendBreaks = colorScale.range().map(c => {\n var d = colorScale.invertExtent(c);\n if (d[0] == null) d[0] = 1;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"legendScale = d3.scaleLinear()\n .domain(d3.extent(values))\n .range([0, 200]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"legendAxis = d3.axisBottom(legendScale)\n .tickSize(13)\n .tickValues(colorScale.domain())\n .ticks(breaks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"formatTick = v => journalize.intcomma(roundHundred(v))","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"roundHundred = v => Math.round( v /100) * 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`### Basemap options` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof mapFillColor = color({\n title: \"Map fill color\",\n value: \"#eeeeee\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof mapWidth = slider({\n title: \"Width\",\n value: 640,\n min: 10,\n max: width,\n step: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof mapHeight = slider({\n title: \"Height\",\n value: 640,\n min: 10,\n max: 1000,\n step: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`### Map projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"projection = d3.geoMercator()\n .center([-118.33, 33.93])\n .scale((1 << 22.9999) / (26 * Math.PI))\n .translate([mapWidth / 2, mapHeight / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`### Geographies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"la_county = await d3.json(\"https://gist.githubusercontent.com/palewire/4de5720365ad56db50b1085bb5b0653b/raw/cd04b67294c9a5e719e150b4b3caf9126c70e9a8/la-county.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"roads = await d3.json('https://gist.githubusercontent.com/rdmurphy/8905c3180c949d9342ec3af90fd60fef/raw/433135846fbd6e1db4dd3d5b246f4fa20905d07b/la-county-roads.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"district = await d3.json('https://gist.githubusercontent.com/stiles/6e24fc5d70bf78dbcebb1878c16648d9/raw/a2f5b2949207ff3e4908a8cb4deb47ee12824df0/2nddistrict.geojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1348,"value":"districtLabels = await d3.json('https://gist.githubusercontent.com/stiles/b7ea564c2252c1d8d813e2e66010f892/raw/864d782a889a510bef6542436baf0d737cf77ff8/district2labels.geojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`### Chroma.js Palette Generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`Based on [Chroma.js' Color Palette Helper](https://gka.github.io/palettes/). Sourced directly from [this Svelte component](https://github.com/gka/palettes/blob/master/src/PalettePreview.svelte) in the source repo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"bezier = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"correctLightness = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"function generateColorScale(colors, numColors) {\n const even = numColors % 2 === 0;\n const numColorsLeft = numColors;\n const numColorsRight = 0;\n const genColors = colors.length !== 1 ? colors : autoColors(colors[0], numColorsLeft);\n const stepsLeft = colors.length ? chroma.scale(bezier && colors.length>1 ? chroma.bezier(genColors) : genColors)\n .correctLightness(correctLightness)\n .colors(numColorsLeft) : [];\n const stepsRight = [];\n const steps = stepsLeft.concat(stepsRight.slice(1));\n \n return steps;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"function autoColors(color, numColors, reverse=false) {\n return autoGradient(color, numColors);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"function autoGradient(color, numColors) {\n const lab = chroma(color).lab();\n const lRange = 100 * (0.95 - 1/numColors);\n const lStep = lRange / (numColors-1);\n let lStart = (100-lRange)*0.5;\n const range = d3.range(lStart, lStart+numColors*lStep, lStep);\n let offset = 9999;\n for (let i=0; i < numColors; i++) {\n let diff = lab[0] - range[i];\n if (Math.abs(diff) < Math.abs(offset)) {\n offset = diff;\n }\n }\n \n return range.map(l => chroma.lab([l + offset, lab[1], lab[2]]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"md`## Prepare a ZIP file`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"async function createZIP() {\n const zip = new JSZip()\n\n const folder = zip.folder(circleValue);\n \n folder.file('320.png', await exportPNG(chart320));\n folder.file('640.png', await exportPNG(chart640));\n folder.file('960.png', await exportPNG(chart960));\n\n return zip.generateAsync({type: 'blob'})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"journalize = require(\"journalize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-svg-legend@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"ckmeans = require('simple-statistics').then(({ ckmeans }) => ckmeans)","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"import { select, slider, text, color, number, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"JSZip = require('https://unpkg.com/jszip@3/dist/jszip.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"import { exportPNG } from \"@rdmurphy/exports\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}