29:null 2a:["$","title",null,{"children":"Dot Density Maps with D3 | Florian Ledermann | Observable"}] 2f: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() }30: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 }31:[] 2d:{"id":"9ecbf53e94763a52","slug":"dot-density-maps-with-d3","title":"Dot Density Maps with D3","thumbnail":"61ead69df30e06d29884478e1f894a1b57d117809db4a62a2c71e09b73f58e15","access_level":"public","create_time":"$D2018-05-10T18:48:53.255Z","update_time":"$D2018-05-17T11:17:04.988Z","view_time":null,"first_public_time":"$D2018-05-12T14:42:22.819Z","has_unpublished_edits":null,"fork":true,"stars":18,"starred":false,"owner":{"type":"team","id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":"starter_2024"},"version":379,"publish_version":379,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null}],"members":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"7e1078d5396f1f06","slug":"cartographic-experiments","title":"Cartographic Experiments","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"type":"notebook","body":{"title":"Dot Density Maps with D3","cells":[{"id":0,"value":"md`# Dot Density Maps with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"helpers.signature","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof distance = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"html`${distance} Pixels`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof numPoints = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"html`${numPoints}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"html`\n\nAreas where not all points could be fitted
\nPoint generation time: ${timer} ms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`#### Parameters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {viennaTopoJSON as topology} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"presimplified = simplify.presimplify(topology)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof geometryDetail = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"geometryDetail","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"simplified = simplify.simplify(presimplified, simplify.quantile(presimplified, geometryDetail))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"districts = topojson.feature(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"boundaries = topojson.mesh(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"mutable timer = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3\",\"d3-polygon\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"simplify = require(\"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"import {helpers} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"