30:T450,map = { let elem = svg` `; d3.select(elem) .selectAll('circle') .remove(); // let selection = tracts.features[0]; let match = tracts.features.find(d => d3.geoContains(d, center)); console.log(match); codes.forEach(function(code) { console.log(parseInt(match[code.code])); for (let i = 0; i < parseInt(match[code.code]) / perPerson; i++) { d3.select(elem) .append('circle') .attr('cx', Math.random() * 800) .attr('cy', Math.random() * 800) .attr('r', circleScale) .attr('opacity', .2) .attr('fill', code.color(Math.random())); } }); return elem; }31:[{"id":"23d37d114c91a539163838133d1ba612a77d9a5a99e749f7ae31218124e96a277fe07bbdd9d651571931cd744f358af985ad2638ed89f3fa3d70762fbbce3dad","href":"https://static.observableusercontent.com/files/23d37d114c91a539163838133d1ba612a77d9a5a99e749f7ae31218124e96a277fe07bbdd9d651571931cd744f358af985ad2638ed89f3fa3d70762fbbce3dad","name":"tracts.json","type":"application/json","lastModified":1607345302008.474,"size":4296164}] 2e:{"title":"Natural Topographies -> Human Geographies","cells":[{"id":0,"value":"md`# Natural Topographies -> Human Geographies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof longitudeCenter = slider({\n min: bounds[0][0],\n max: bounds[1][0],\n step: .01,\n value: -87.66,\n description: \"Horizontal center\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof latitudeCenter = slider({\n min: bounds[0][1],\n max: bounds[1][1],\n step: .01,\n value: 41.91,\n description: \"Vertical center\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof scale = slider({\n min: 10000,\n max: 1800000,\n step: 1000,\n value: 1800000,\n description: \"Zoom Level\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"viewof perPerson = slider({\n min: 1,\n max: 1000,\n step: 10,\n value: 100,\n description: \"People per Circle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof circleScale = slider({\n min: .1,\n max: 20,\n step: .1,\n value: 5,\n description: \"Circle Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"viewof strokeThickness = slider({\n min: .5,\n max: 5,\n step: .1,\n value: 1,\n description: \"Stroke Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof bgC = color({\n value: \"#221F20\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"tracts = await FileAttachment(\"tracts.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"codes = {\n return [\n // { label: \"total\", code: \"B02001_001E\", color: d3.interpolateViridis },\n { label: \"white\", code: \"B02001_002E\", color: d3.interpolateGreys },\n { label: \"black\", code: \"B02001_003E\", color: d3.interpolateBlues },\n {\n label: \"american indian\",\n code: \"B02001_004E\",\n color: d3.interpolateGreens\n },\n { label: \"asian\", code: \"B02001_005E\", color: d3.interpolatePurples },\n {\n label: \"pacific islander\",\n code: \"B02001_006E\",\n color: d3.interpolateGreens\n },\n { label: \"other\", code: \"B02001_007E\", color: d3.interpolateReds }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3\n .geoMercator()\n .center(center)\n .scale(scale)\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"tiles = Promise.all(\n tile().map(async d => {\n d.data = await fetch(\n `https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=wwFpAwh2R2OemlVgyJjx_g`\n ).then(response => response.json()); \n \n return d;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3\n .tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"function filter({ features }, test) {\n return { type: \"FeatureCollection\", features: features.filter(test) };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"key = \"wwFpAwh2R2OemlVgyJjx_gjdPwBXkWSB-v5_CPQYDiIQ\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"center = [longitudeCenter, latitudeCenter]","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"bounds = [\n [-87.94011408295249, 41.644544271942785],\n [-87.52413870787424, 42.02303858738875]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"import { slider, color, button, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}