31:T423,{ let projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], districts) let pathGenerator = d3.geoPath().projection(projection) // create SVG element let svg = d3.select(DOM.svg(width, height)) let time = Date.now() let points = districts.features.map(geo => makeDots(geo.geometry.coordinates[0].map(projection), numPoints, {distance: distance, edgeDistance: Math.max(3,distance)})) mutable timer = Date.now()-time svg.selectAll('g.dots') .data(points) .enter() .append('g') .classed('dots',true) .attr('fill',d => d.complete ? '#000000' : '#ff0000') .selectAll('circle') .data(d => d) .enter() .append('circle') .attr('cx', d => d[0]) .attr('cy', d => d[1]) .attr('r', 2) svg.selectAll('path') .data([boundaries]) .enter() .append('path') .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', '#bbbbbb') .attr('stroke-width', 1.5) // pass to Observable to represent this block return svg.node() }32:T7b6,/* 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:[] 2f:{"title":"Dot Density Maps with D3","cells":[{"id":0,"value":"md`# Dot Density Maps with D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`A random-placement dot density symbolizer, inspired by QGIS' [random points inside polygon](https://docs.qgis.org/2.8/en/docs/user_manual/processing_algs/qgis/vector_creation_tools/randompointsinsidepolygonsfixed.html) algorithm. Keeps a set distance between points, and keeps a set distance from the polygon boundary (!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"helpers.signature","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof distance = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`${distance} Pixels`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof numPoints = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html`${numPoints}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"html`\n\nAreas where not all points could be fitted
\nPoint generation time: ${timer} ms`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`The core of this example is the \\`makeDots()\\` function, taking a *projected* polygon and the desired number of points as arguments. It generates random point candidates within the polygon's bounding box, and for each candidate checks:\n\n- whether it is inside the polygon\n- the distance from already genreated points\n- the distanc from the polygon's boundary` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`The function \\`distPointEdge()\\` calculates the distance between a point \\`p\\` and an edge defined by two vertices \\`l1\\` and \\`l2\\`.`","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":357,"value":"md`#### To Do:\n- consider [Poisson-Disc sampling](https://bl.ocks.org/mbostock/19168c663618b7f07158) / [Example](https://bl.ocks.org/armollica/a4fa76d348a9825f0c90328dddf0d56b)\n- Polygon skeleton / erosion for low point numbers?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`----\n### Appendix`","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":15,"value":"md`#### Data`","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"}