31:T851,function Legend() { var cutoff = 0; while (fills_legend[cutoff + 1].d < 201) ++cutoff; var fills1 = fills_legend.slice(cutoff); var right_margin = 25; var w = Math.min(width - right_margin, 500); var h = 30; var log_d = fills1.map(f => Math.log10(f.d)); log_d[0] = Math.log10(200); var log_end = log_d[log_d.length - 1] + 0.1; log_d.push(log_end); var log_scale = (w) / (log_end - log_d[0]); var x0 = log_d[0]; log_d = log_d.map(x => Math.round((x - x0) * log_scale) ); var patterns = fills1.map(x => x.p && x.p.with({scale: 1, id: x.p.id + "-l"})); var patterndefs = patterns.map(p => p ? p.svg() : "").join(""); var boxes = fills1.map( function (f, i) { var box_w = (log_d[i+1] - log_d[i]); var f = patterns[i] ? patterns[i].url() : f.fill; return``; }).join(""); var tick_d = [500, 1000, 3000, 10000, 30000, 1e5, 2e5]; var ticks = tick_d.map( function (d, i) { var x = 0.5 + Math.floor((Math.log10(d) - x0) * log_scale); var tx = x + 10 * (d == 2e5); return `\n`+ `${d}`; }).join(""); var tick_minor_d = [2000, 4000, 5000, 20e3, 40e3, 50e3]; ticks += tick_minor_d.map( function (d, i) { var x = 0.5 + Math.floor((Math.log10(d) - x0) * log_scale); var tx = x + 10 * (d == 2e5); return ``; }).join(""); var svg1 = svg``; return html`

People per km²
${svg1}

` }32:[] 2f:{"title":"Halftone Choropleth Map","cells":[{"id":0,"value":"md`# Halftone Choropleth Map\n\nPopulation density as reported by Stats NZ with the 2018 census. The data is the same as on the [mode share notebook](/@roelandschoukens/mode-share-map?mode=density&sa=1).\n\nHere we try to visualise both the density in the city centre (with peaks over 150,000) with the suburbs (mostly below 6,000). We use a limited set of colours, but use halftone patterns to create recognisable bins in between.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof sa_type =\n Inputs.radio([1, 2],\n {label: \"Statistical Areas\", format: x => \"SA\" + x,\n value: param('sa', '1') == '1' ? 1 : 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"Choropleth_map = chart.node","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"Legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"viewof grainSize = Inputs.range([3, 16], {label: \"Grain size\", step: 1, value: 8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`## Recipe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"chart = Chart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"chart.update_fill(census_collection, fill_for, title_text);","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"{\n chart[zoom_key] = undefined;\n chart.set_transform_callback(make_fills);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"colors = [\n {d: 0, c:\"white\"},\n {d: 4000, c:\"rgb(255, 215, 120)\"},\n {d: 40e3, c:\"rgb(220, 70, 80 )\"},\n {d: 200e3, c:\"rgb(90, 0, 150 )\"}];","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"{\n var boxes = colors.map(\n c => ``).join(\"\");\n \n return html`

${boxes}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"// define the list of fill here\n// having a persistent list gives all the derived fills stable IDs, so we\n// get much less weird behaviour on the map.\nfills_base = {\n var Tile = HalfToneTile8({size: 1, fill_alldots: .5});\n \n // the steps are chosen to coincide with fill levels of 1/8, 1/4 and 1/2\n var steps = [.0625, .125, .25, .35, .50, .70];\n \n function mkfill(i, st)\n {\n var d = colors[i-1].d * (1.03 - st) + colors[i].d * (-.03 + st);\n var p = Tile.with({bg: colors[i-1].c, fg: colors[i].c, fill: st});\n return {p, fill:p.url(), d};\n }\n\n var fills = [\n {fill: colors[0].c, d: 100},\n mkfill(1, .025)\n ];\n\n for (var i = 1; i < colors.length; ++i)\n {\n for (var st of steps)\n {\n fills.push(mkfill(i, st));\n }\n fills.push({fill: colors[i].c, d:colors[i].d});\n }\n return fills;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"fills_map = fills_base.map(f => {\n if (!f.p) return f;\n var pat_grain = f.p.with({size: grainSize, id: f.p.id + '-map'});\n return {p: pat_grain, fill: pat_grain.url(), d:f.d};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"fills_legend = fills_base.map(f => {\n if (!f.p) return f;\n var pat_grain = f.p.with({size: grainSize, id: f.p.id + '-leg'});\n return {p: pat_grain, fill: pat_grain.url(), d:f.d};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"fill_key = Symbol('fills')","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"zoom_key = Symbol('zoom')","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"function make_fills(transform, chart)\n{\n // don't update on panning:\n if ( chart[zoom_key] == transform.k) return;\n \n var sc = 1 / transform.k;\n for (var f of fills_map)\n {\n if (f.p) {\n f.p.settings.scale = sc;\n }\n }\n var fill_patterns = fills_map.map(x => x.p ? x.p.svg() : \"\").join(\"\\n\");\n if (!chart[fill_key]) {\n chart[fill_key] = chart.svg.insert(\"defs\",\":first-child\");\n }\n chart[zoom_key] = transform.k;\n chart[fill_key].html(fill_patterns);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"function fill_for(d)\n{\n var density = d.properties.density;\n var f1 = fills_map[0];\n for (var f of fills_map)\n {\n if (f.d > density) {break; }\n f1 = f;\n }\n return f1.fill;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"max_zoom = 6;","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"max_chart_h = 1500","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { Chart, census_collection, title_text, param }\nwith {sa_type as sa_type, max_zoom as max_zoom, max_chart_h as max_chart_h}\nfrom \"@roelandschoukens/mode-share-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { HalfToneTile8 } from \"@roelandschoukens/svg-tiled-pattern-fills\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}