30:T818,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(calculatedSchools.features) .enter() .append('path') .attr('class', 'schools') .attr('d', path) .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); }); 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', 1.5) .attr('fill', 'white') .attr('class', 'districtFirefly' + district.properties.school_id) .attr('pointed-events', 'none'); } return svg.node(); }31:[{"id":"dec0a61172bce10c4954d412a719eea7ffa171f7b4d8c131f18c6d016375796f36faa3492b957ccd15071dce0b86e8d3a279932352e61b105e50910e64dc2bfb","href":"https://static.observableusercontent.com/files/dec0a61172bce10c4954d412a719eea7ffa171f7b4d8c131f18c6d016375796f36faa3492b957ccd15071dce0b86e8d3a279932352e61b105e50910e64dc2bfb","name":"elementaryschool.json","type":"application/json","lastModified":1606683655599.729,"size":4322543}] 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","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"fireflyCount = [10, 5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"rawSchools = FileAttachment(\"elementaryschool.json\").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]], calculatedSchools)","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 district.properties.fireflies[j] = flip(\n district.properties.fireflies[j],\n district\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.interpolateCool(Math.random()))\n .attr('cx', d => projection(d)[0])\n .attr('cy', d => projection(d)[1]);\n }\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"}