32:Tf69,function map(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'); // for the plain neighborhoods const neighborhoodsGroup = g .append('g') .attr('class', 'neighborhoods'); // for the hoods const hoodsGroup = g .append('g') .attr('class', 'hoods'); // 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 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); // // city circles // cityCircles.append('circle') // .attr('fill', '#555555') // .attr('stroke', "#555555") // .attr('cx', 0) // .attr('cy', 0) // .attr('r', 1); hoodsGroup .selectAll('.hood') .data(geojsonData.features) .join('path') .attr('class', 'hood') .attr('fill', d => d.properties[yearValue] === 0 ? '#eeeeee' : colorScale(d.properties[yearValue])) .attr('stroke', '#ffffff') .attr("stroke-width",0.4) .attr('d', path); neighborhoodsGroup .selectAll('.hood') .data(neighborhoodsData.features) .join('path') .attr('class', 'hood') .attr('fill', '#eeeeee') .attr('stroke', '#ffffff') .attr("stroke-width",0.4) .attr('d', path); // for legend // const legendGroup = svg.append('g') // .attr('class', 'legend') // .attr('width', 300) // .attr('transform', `translate(${mapWidth-600},${mapHeight-100})`) // 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', '15px') // .attr('font-family', 'sans-serif') // legendGroup // .append('text') // .attr('dy', -35) // .text('Arrests per 100 homeless residents') // .attr('font-size', '20px') // .attr('font-family', 'sans-serif') // legendGroup // .append('text') // .attr('dx',200) // .attr('text-anchor','end') // .attr('dy', -5) // .text('More →') // .attr('font-size', '15px') // .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 arrests') // .attr('font-size', '15px') // .attr('font-family', 'sans-serif') return svg.node(); }33:T8f6,cityList = [ { name: 'Downtown', type: 'neighborhood', coordinates: [-118.24859619140626, 34.043556504127444], y: "-10", anchor: "middle" }, { name: 'Palms', type: 'neighborhood', coordinates: [-118.4097438024372, 34.02493520257345], anchor: "middle" }, { name: 'San Pedro', type: 'neighborhood', coordinates: [-118.2879432936467, 33.73774291763336], // y: "-10", anchor: "middle" }, { name: 'Skid Row', type: 'neighborhood', coordinates: [-118.24859619140626, 34.043556504127444], y: "10", x: "35", anchor: "middle" }, { name: 'Westlake', type: 'neighborhood', coordinates: [-118.2738794751353, 34.06200337283511], anchor: "middle" }, { name: "Malibu", type: 'city', coordinates: [-118.7798, 34.05], x: "-9", anchor: "end" }, { name: "Long Beach", type: 'city', coordinates: [-118.21426391601561, 33.804255802014865], }, { name: "Santa Clarita", type: 'city', coordinates: [-118.53561401367188, 34.39897808891371] }, { 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: 'Hollywood', type: 'neighborhood', coordinates: [-118.3269527, 34.0961755], y: "-3", anchor: "middle" }, { name: 'Venice', type: 'neighborhood', coordinates: [-118.470174,33.986554], y: "-3", anchor: "middle" }, { name: 'North Hills', type: 'neighborhood', coordinates: [-118.4946218, 34.2388213], y: "-3", anchor: "middle" }, { name: 'Pomona', type: 'city', coordinates: [-117.749992, 34.055103], x: '0', anchor: 'middle', } ]34:[] 30:{"title":"City of Los Angeles: 'Sit-lie' arrests per 100 homeless residents, by neighborhood and year","cells":[{"id":0,"value":"md`# City of Los Angeles: 'Sit-lie' arrests per 100 homeless residents, by neighborhood and year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"md`## *Explore: Choose a year to see the rate by L.A. Times neighborhood.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"DOM.download(() => createZIP(), `${yearValue}.zip`, 'Download three map sizes for ' + yearValue + ' in a ZIP')","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof yearValue = select({\n options: measure.map(value => ({\n label: journalize.capfirst(value),\n value\n })),\n value: \"rate_2019\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"tablet = map(640)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1404,"value":"desktop = map(960)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1537,"value":"mobile = map(320)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"$32","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/fc922f14c4ba256515869c5d0e5d7b8c/raw/776d1a04845f5d98a71644b368ce003779274e9b/hoods_homeless_counts_years_pivot_geo.json'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"neighborhoodsData = await d3.json('https://gist.githubusercontent.com/stiles/ac709069f93966b5f19b36860c7a6f1d/raw/2fc3316a68f2d24cb6e7fd955761aafcf3fc8622/homeless_cnt_neighborhood.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"md`A list of all the homeless variables we want to be able to visualize.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"measure = [\n 'rate_2010',\n 'rate_2011',\n 'rate_2012',\n 'rate_2013',\n 'rate_2014',\n 'rate_2015',\n 'rate_2016',\n 'rate_2017',\n 'rate_2018',\n 'rate_2019',\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 (measure.includes(key)) {\n return value;\n }\n }).filter(Number.isFinite)))","pinned":false,"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: 13 })","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 variable 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 \"San Pedro\",\n \"Hollywood\",\n \"Venice\",\n \"North Hills\",\n \"Skid Row\",\n \"Westlake\",\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"md`Unique colors for homeless variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"colors = ({\n rate_2010: '#e6550d',\n rate_2011: '#e6550d',\n rate_2012: '#e6550d',\n rate_2013: '#e6550d',\n rate_2014: '#e6550d',\n rate_2015: '#e6550d',\n rate_2016: '#e6550d',\n rate_2017: '#e6550d',\n rate_2018: '#e6550d',\n rate_2019: '#e6550d',\n})","pinned":false,"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":false,"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[yearValue] || baseFillColor], breaks + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"md`### City list`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"selectedCities = cityList.filter(d => cities.includes(d.name))","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":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, 120]);","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":true,"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: 880,\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":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"projection = d3.geoMercator()\n .center([-118.42, 34.022])\n .scale((1 << 23) / (41 * 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":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":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"correctLightness = true","pinned":true,"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(yearValue);\n \n folder.file( yearValue + '_mobile.png', await exportPNG(mobile));\n folder.file( yearValue + '_tablet.png', await exportPNG(tablet));\n folder.file( yearValue + '_desktop.png', await exportPNG(desktop));\n\n return zip.generateAsync({type: 'blob'})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"journalize = require(\"journalize\")","pinned":true,"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":"$W34","stdlib":"1","titling":"auto"}