30:Tb2b,fireflies = { //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr('id', 'mapArea'); //create svg background color let bg = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr('fill', '#000'); // create Map grouping for asset management let mapGroup = svg.append("g").attr("id", "map"); function zoomed() { mapGroup .selectAll('path') // To prevent stroke width from scaling .attr('transform', d3.event.transform); mapGroup .selectAll('circle') // To prevent stroke width from scaling .attr('transform', d3.event.transform); } const zoom = d3 .zoom() .scaleExtent([1, 10]) .on('zoom', zoomed); mapGroup.call(zoom); //build converter from projected coordinates to SVG drawing instructions var path = d3.geoPath().projection(projection); mapGroup .selectAll('.schools') .data(rawSchools.features) .enter() .append('path') .attr('class', 'schools') .attr('d', path) .attr('fill', '#333') .attr('stroke', 'white') .attr('stroke-width', 0) .attr('opacity', 1) .on('mouseover', function(d) { mapGroup .selectAll('.schools') .transition() .attr('stroke-width', .5); }) .on('mouseout', function(d) { mapGroup .selectAll('.schools') .transition() .attr('stroke-width', 0); }); return svg.node(); for (let i = 0; i < calculatedSchools.features.length; i++) { let district = calculatedSchools.features[i]; mapGroup .selectAll('.districtFirefly' + district.properties.school_id) .data(district.properties.fireflies) .enter() .append('circle') .attr('cx', d => projection(d)[0]) .attr('cy', d => projection(d)[1]) .attr('r', .7) .attr('fill', 'white') .attr('class', 'districtFirefly' + district.properties.school_id) .attr('pointed-events', 'none'); } // while (true) { // for (let i = 0; i < calculatedSchools.features.length; i++) { // let district = calculatedSchools.features[i]; // for (let j = 0; j < district.properties.fireflies.length; j++) { // district.properties.fireflies[j] = generateContainedPoint(district); // } // mapGroup // .selectAll('.districtFirefly' + district.properties.school_id) // .data(district.properties.fireflies) // .transition() // .duration(1000) // .ease(d3.easeSinInOut) // .delay((d, i) => i * 200) // .attr('cx', d => projection(d)[0]) // .attr('cy', d => projection(d)[1]); // } // yield Promises.delay(1000, svg.node()); // } }31:[{"id":"dec0a61172bce10c4954d412a719eea7ffa171f7b4d8c131f18c6d016375796f36faa3492b957ccd15071dce0b86e8d3a279932352e61b105e50910e64dc2bfb","href":"https://static.observableusercontent.com/files/dec0a61172bce10c4954d412a719eea7ffa171f7b4d8c131f18c6d016375796f36faa3492b957ccd15071dce0b86e8d3a279932352e61b105e50910e64dc2bfb","name":"elementaryschool.json","type":"application/json","lastModified":1606585255394.684,"size":4322543},{"id":"31ed5797949aa92009b09d7ddd64e27e5ecd095824b35c8189bc654f3aef0115b7c8d5f32e67e49c5dd28ad56f7ce1f4a02f243109699e116e41c14501a74f9d","href":"https://static.observableusercontent.com/files/31ed5797949aa92009b09d7ddd64e27e5ecd095824b35c8189bc654f3aef0115b7c8d5f32e67e49c5dd28ad56f7ce1f4a02f243109699e116e41c14501a74f9d","name":"Boundaries - Census Tracts - 2010@1.geojson","type":"application/geo+json","lastModified":1607334965897.097,"size":4023873}] 2e:{"title":"Map Fireflies","cells":[{"id":0,"value":"md`# Map Fireflies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"timing = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"stride = 0.0001","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"fireflyCount = [1, 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"rawSchools = FileAttachment(\n \"Boundaries - Census Tracts - 2010@1.geojson\"\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"calculatedSchools = {\n //calculate area and bounding rectangle for each district\n for (let i = 0; i < rawSchools.features.length; i++) {\n let district = rawSchools.features[i];\n\n district.properties.radialArea = d3.geoArea(district.geometry);\n district.properties.bounds = d3.geoBounds(district.geometry);\n }\n\n let countScale = d3\n .scaleLinear()\n .domain(d3.extent(rawSchools.features, d => d.properties.radialArea))\n .range(fireflyCount);\n\n for (let i = 0; i < rawSchools.features.length; i++) {\n let district = rawSchools.features[i];\n\n let fireflyCount = countScale(district.properties.radialArea);\n district.properties.fireflies = [];\n\n for (let j = 0; j < fireflyCount; j++) {\n let coord = generateContainedPoint(district);\n district.properties.fireflies.push(generateContainedPoint(district));\n }\n }\n\n return rawSchools;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"// Use Mercator projection - how we interrelate svg coordinates to map coordinates\nprojection = d3\n .geoMercator()\n .fitExtent([[20, 20], [width, height]], rawSchools)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"//update()","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"// function update() {\n// for (let i = 0; i < calculatedSchools.features.length; i++) {\n// let district = calculatedSchools.features[i];\n\n// for (let j = 0; j < district.properties.fireflies.length; j++) {\n// let newPosition = flip(district.properties.fireflies[j], district);\n\n// district.properties.fireflies[j] = newPosition;\n// }\n// }\n \n// d3.select(\"#map\")\n// .selectAll('.districtFirefly' + district.properties.school_id)\n// .data(district.properties.fireflies)\n// .transition()\n// .ease(d3.easeSinInOut)\n// .duration(timing + timing / 2)\n// .delay(d => Math.random() * (timing / 2))\n// .attr('fill', d => d3.interpolateWarm(Math.random()))\n// .attr('cx', d => projection(d)[0])\n// .attr('cy', d => projection(d)[1]);\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"function flip(coordinates, geoData) {\n let x = coordinates[0];\n let y = coordinates[1];\n\n while (true) {\n let newFlip = Math.random();\n\n if (newFlip < .25) {\n x += stride;\n } else if (newFlip < .5) {\n x -= stride;\n } else if (newFlip < .75) {\n y += stride;\n } else if (newFlip <= 1) {\n y -= stride;\n }\n\n if (d3.geoContains(geoData.geometry, [x, y])) {\n return [x, y];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"// {\n// while (true) {\n// yield Promises.delay(timing, update());\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function generateContainedPoint(geoData) {\n while (true) {\n let x = randomRange(\n geoData.properties.bounds[0][0],\n geoData.properties.bounds[1][0]\n );\n let y = randomRange(\n geoData.properties.bounds[0][1],\n geoData.properties.bounds[1][1]\n );\n //hello\n if (d3.geoContains(geoData.geometry, [x, y])) {\n return [x, y];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"function randomRange(min, max) {\n return Math.random() * (max - min) + min;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}