31:T131c,strokchart = { // top level SVG const svg = d3.create("svg") .attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`) .style("width", "960px") .style("height", "auto"); // 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 tracts const countiesGroup = g .append('g') .attr('class', 'counties'); countiesGroup .selectAll('.counties') .data(mapData) .join('path') .attr('class', 'county') .attr('fill', d => d.properties[circleValue] === 0 ? '#e6e6e6' : colorScale(d.properties[circleValue])) .attr('stroke', '#f1f1f1') .attr('stroke-width', 0.5) .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 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', "#ffffff") .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) .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) .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', 200) .attr('transform', `translate(${mapWidth-600},${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('← Smaller') .attr('font-size', '13px') .attr('font-family', 'sans-serif') legendGroup .append('text') .attr('dx',140) .attr('text-anchor','end') .attr('dy', -5) .text('Larger →') .attr('font-size', '12px') .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', 43) .attr('x', 35) .attr('text-anchor','start') .text('No data') .attr('font-size', '13px') .attr('font-family', 'sans-serif') svg.append("g") .selectAll("text") .data(stateCities.features) .join("text") .text(d => d.properties.name) .attr("x", d => path.centroid(d)[0] + 5) .attr("y", d => path.centroid(d)[1] - 1) .attr("text-anchor", function(d) { if (d.properties.name == 'San Francisco') { return "middle"; } else { return "start"; } }) .attr('font-size','8.5pt') .attr('font-family', 'arial,sans-serif') .attr('fill', "none") .attr('stroke', '#ffffff') .attr('stroke-width', 2) svg.append("g") .selectAll("text") .data(stateCities.features) .join("text") .text(d => d.properties.name) .attr("x", d => path.centroid(d)[0] + 5) .attr("y", d => path.centroid(d)[1] - 1) .attr("text-anchor", function(d) { if (d.properties.name == 'San Francisco') { return "middle"; } else { return "start"; } }) .attr('font-size','8.5pt') .attr('font-family', 'arial,sans-serif') return svg.node(); }32:T4ee,cityList = [ { name: 'Downtown', type: 'neighborhood', coordinates: [-118.24859619140626, 34.043556504127444], }, { 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: 'Pomona', type: 'city', coordinates: [-117.749992, 34.055103], x: '-9', anchor: 'end', } ]33:[] 2f:{"title":"% Change in state unemployment claims, February to March","cells":[{"id":0,"value":"md`# % Change in state unemployment claims, February to March`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof circleValue = select({\n title: \"Circle value\",\n description: \"The data field that will be used to determine the size of the circle\",\n options: Object.keys(geojsonData.features[0].properties).filter(d => claims_value.includes(d)),\n value: \"harris\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"simpleScale = d3.scaleSequential(d3.interpolateBlues)\n .domain([0, 2400])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"legendBreaks.map(d=>legendScale(d[0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"labelTextSize = '16px'","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof geojsonUrl = text({\n title: \"GeoJSON URL\",\n description: \"The data you want to load on the map\",\n value: \"https://gist.githubusercontent.com/rdmurphy/6220e311b75c98fa3af489cb194a3c9f/raw/913026e9d5a759e8783a9dbc89a09458ae78ac49/la-county-tracts.json\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"geojsonData = await d3.json(geojsonUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"mapData = {\n return geojsonData.features\n .map(d => (d.value = d.properties[circleValue], d))\n .sort((a, b) => b.value - a.value) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"claims_value = [\n 'change',\n]","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 (claims_value.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":399,"value":"viewof roadStrokeColor = color({\n title: \"Road stroke color\",\n value: \"#999999\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof baseFillColor = color({\n title: \"Base fill color\",\n value: \"#216db9\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"viewof breaks = slider({\n min: 2,\n max: 9,\n value: 6,\n step: 1,\n title: \"Breaks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof cities = checkbox({\n title: \"Cities\",\n options: cityList.map(d => d.name).sort(),\n value: [\"Los Angeles\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"stateCities = await d3.json(\"https://gist.githubusercontent.com/anthonyjpesce/d491d6bb3a2d7335b9a9f722040feec3/raw/9e69a3ccf244961786b03d21e952abe98e8fc75b/california_3_cities.geojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"colors = ({\n change: '#054b66'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"colorPalette = \n['#d9eff4','#bae1ed','#60b8d4','#3996b7','#056e90','#054b66']","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"colorScale = d3.scaleThreshold(groups, colorPalette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"['#d9eff4','#bae1ed','#60b8d4','#3996b7','#056e90','#054b66'] ","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":757,"value":"selectedCities = cityList.filter(d => cities.includes(d.name))","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"$32","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":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"legendScale = d3.scaleLinear()\n .domain(d3.extent(values))\n .range([0, 2460]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"legendAxis = d3.axisBottom(legendScale)\n .tickSize(15)\n .tickValues(colorScale.domain())\n .ticks(breaks)","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"formatTick = v => journalize.intcomma(roundHundred(v))","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"roundHundred = v => Math.round(v/100)*100","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`### Background` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof mapFillColor = color({\n title: \"Map fill color\",\n value: \"#e6e6e6\"\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`### 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([-119, 37.4])\n .scale((1 << 18) / (28 * Math.PI))\n .translate([320, 320])","pinned":false,"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":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":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":1140,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"function toBase64(url) {\n return new Promise(async (resolve, reject) => {\n const blob = await fetch(url).then(res => res.blob());\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n\n reader.addEventListener('load', () => resolve(reader.result));\n reader.addEventListener('error', error => reject(error));\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}