30:T623,{ let projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], districts) let pathGenerator = d3.geoPath().projection(projection) let divisor = countPerSymbol // create SVG element let svg = d3.select(DOM.svg(width, height)) let time = Date.now() let points = districts.features.map(geo => { let num = newCars[geo.properties.BEZ-1] let numPoints = Math.round(Math.abs(num) / divisor) return makeDots(geo.geometry.coordinates[0].map(projection), numPoints, {distance: 1, edgeDistance: 4, properties: { 'class': num > 0 ? 'car' : 'tree'}}) }) mutable timer = Date.now()-time let carColor = d3.color('#999999') let treeColor = d3.color('#009900') svg.selectAll('path') .data([boundaries]) .enter() .append('path') .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', '#cccccc') .attr('stroke-width', 1) let els = svg.selectAll('g.dots') .data(points) els.enter() .append('g') .classed('dots',true) //.attr('fill',d => d.complete ? '#000000' : '#ff0000') .selectAll('use') .data(d => d) .enter() .append('use') .attr('x', d => d[0]) .attr('y', d => d[1]) .attr('fill', d => (d.class == 'tree' ? treeColor : carColor).brighter(Math.random()*0.8).hex() ) .attr('href',d => '#' + d.class) //els.exit().remove() svg .style('background', '#ffffff' ) .style('width', '100%') .style('height', '100%') // pass to Observable to represent this block return svg.node() }31:T513,html` `32:T7e2,/* Generate points at random locations inside polygon. polygon: polygon (Array of points [x,y]) numPoints: number of points to generate Returns an Array of points [x,y]. The returned Array will have a property complete, which is set to false if the desired number of points could not be generated within `options.numIterations` attempts */ function makeDots(polygon, numPoints, options) { options = Object.assign({ // DEFAULT OPTIONS: maxIterations: numPoints * 50, distance: null, // by default: MIN(width, height) / numPoints / 4, edgeDistance: options.distance },options); numPoints = Math.floor(numPoints) // calculate bounding box let xMin = Infinity, yMin = Infinity, xMax = -Infinity, yMax = -Infinity polygon.forEach(p => { if (p[0]xMax) xMax = p[0] if (p[1]yMax) yMax = p[1] }); let width = xMax - xMin let height = yMax - yMin // default options depending on bounds options.distance = options.distance || Math.min(width, height) / numPoints / 4 options.edgeDistance = options.edgeDistance || options.distance // generate points let points = []; outer: for (let i=0; i= numPoints) return points }33:[] 2e:{"title":"Trees or Cars?","cells":[{"id":0,"value":"md`# Trees or Cars?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`What if we plant a tree for every car that we get rid of in our cities? This is the map for Vienna's districts, showing the difference in car registrations for 2018 vs. the previous year.\n\nWe could plant lots of trees in the inner districts, but the outskirts continue to be swamped with metal boxes...\n\nThis is inspired by a map by [Ulrich Leth](https://twitter.com/ulrich_leth) and rendered with my (incomplete) [implementation of dot-density map rendering for D3](https://observablehq.com/@floledermann/dot-density-maps-with-d3).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"html`

Legend

\n for ${countPerSymbol == 1 ? \"each car\" : countPerSymbol + \" cars\"} less in 2018
\n\n for ${countPerSymbol == 1 ? \"each car\" : countPerSymbol + \" cars\"} more in 2018\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"viewof countPerSymbol = helpers.steppedSlider({\n label: \"Car count per map symbol:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"helpers.signature","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"md`#### SVG Symbols`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`#### Data\n(source: [Statistik Austria](http://www.statistik.at/web_de/statistiken/energie_umwelt_innovation_mobilitaet/verkehr/strasse/kraftfahrzeuge_-_bestand/index.html))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"// registration of additional cars by district 2017-2018, source: http://www.statistik.at/web_de/statistiken/energie_umwelt_innovation_mobilitaet/verkehr/strasse/kraftfahrzeuge_-_bestand/index.html\nnewCars = [-172,-17,408,-203,-562,-374,-376,-154,-529,1184,1388,161,159,558,-521,-57,16,-208,668,-555,1994,2317,2187]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`#### Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"// ported from https://stackoverflow.com/q/30559799\nfunction distPointEdge(p, l1, l2) {\n\n let A = p[0] - l1[0],\n B = p[1] - l1[1],\n C = l2[0] - l1[0],\n D = l2[1] - l1[1];\n\n let dot = A * C + B * D;\n let len_sq = C * C + D * D;\n \n // alpha is proportion of closest point on the line between l1 and l2\n let alpha = -1;\n if (len_sq != 0) //in case of 0 length line\n alpha = dot / len_sq;\n\n // points on edge closest to p\n let X, Y;\n\n if (alpha < 0) {\n X = l1[0];\n Y = l1[1];\n }\n else if (alpha > 1) {\n X = l2[0];\n Y = l2[1];\n }\n else {\n X = l1[0] + alpha * C;\n Y = l1[1] + alpha * D;\n }\n\n let dx = p[0] - X;\n let dy = p[1] - Y;\n \n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`#### Geometry`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {viennaTopoJSON as topology} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"presimplified = simplify.presimplify(topology)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof geometryDetail = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"geometryDetail","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"simplified = simplify.simplify(presimplified, simplify.quantile(presimplified, geometryDetail))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"districts = topojson.feature(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"boundaries = topojson.mesh(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"mutable timer = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3\",\"d3-polygon\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"simplify = require(\"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"import {helpers} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}