31:T244b,async function ModeShareMap(settings) { const { img_size_px, chart_size_px, chart_extent, img_href, max_px_zoom = 1.5, copyright_text = "Insert copyright here" } = settings; // needed with fitSize, because we want to keep aspect ratio intact const img_scale = Math.min(chart_size_px[0] / img_size_px[0], chart_size_px[1] / img_size_px[1]) const chart_size_px_aspect = [img_size_px[0] * img_scale, img_size_px[1] * img_scale]; const img_bounds_path = ({ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ chart_extent[0], [chart_extent[0][0], chart_extent[1][1]], chart_extent[1], [chart_extent[1][0], chart_extent[0][1]], chart_extent[0] ] ] }, "properties": {} }); // the image is projected exactly to the SVG area // All our input data is already mapped to some projection // with northings and eastings so we can just scale it to // our map const projection = d3.geoIdentity().reflectY(true).fitSize(chart_size_px_aspect, img_bounds_path); const geo_path = d3.geoPath(projection); const div = d3.create("div"); const info_div = div.append("div"); info_div.style("display", "none") .style("position", "absolute") .style("font-size", "85%") .style("border", "1px solid #bbb") .style("border-radius", ".3em") .style("box-shadow", "1px 1px 4px rgba(0, 0, 0, .05)") .style("padding", "0 .5em"); const svg_root = div.append("svg") .style("display", "block") .attr("viewBox", [0, 0, chart_size_px[0], chart_size_px[1]]) .attr("width", chart_size_px[0]) .attr("height", chart_size_px[1]); const defs = svg_root.append("defs"); defs.append("pattern") .attr('id','bgimage') .attr("width", "100%") .attr("height", "100%") .attr("x", "0") .attr("y", "0") .attr("viewBox", `0 0 ${img_size_px[0]} ${img_size_px[1]}`) .append('image') .attr('width', img_size_px[0]) .attr('height', img_size_px[1]) .attr('xlink:href', img_href) const noDataHatch = HatchTile45({size: 4, fill: .4, fg: "#ccc", bg: "white", id: DOM.uid("no-data")}); const hatchPattern = defs.append(x => svg`${noDataHatch.svg()}`); var defs_extra; var transform_timeout; var k = 1; const clip_box_id = DOM.uid("clip-box"); var clip_rect = defs.append('clipPath') .attr('id', clip_box_id.id) .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', chart_size_px_aspect[0]) .attr('height', chart_size_px_aspect[1]); svg_root.append(() => svg``) var clip_layer = svg_root.append('g').attr('clip-path', clip_box_id); const map_layer = clip_layer.append("g"); const sa_layer = map_layer.append("g"); const img_layer = clip_layer.append("g"); img_layer.append("path") .datum(img_bounds_path) .attr("d", geo_path) .attr("style", "pointer-events: none;") .attr('fill','url(#bgimage)') const decoration_layer = clip_layer.append("g"); const text_pos = projection([chart_extent[1][0], chart_extent[0][1]]); decoration_layer.append("text") .attr("x", text_pos[0] - 5) .attr("y", text_pos[1] - 5) .style("font-family", "sans-serif") .style("font-size", (24 * img_scale) + "px") .style("fill", "#333").style("paint-order", "stroke fill") .style("stroke", "#fff").style("stroke-opacity", "0.6") .style("stroke-width", "3px").style("stroke-linejoin", "round") .attr("text-anchor", "end") .text(copyright_text); const scale_bar = new SvgScaleBar({m_per_px: 2 * img_m_per_px, ...scale_bar_settings}); scale_bar.node.setAttribute("transform", `translate(${20 * img_scale}, ${chart_size_px[1] - 68 * img_scale}) scale(${2 * img_scale})`) decoration_layer.append(() => scale_bar.node); const select_layer = clip_layer.append("g") .attr("stroke-width", 1.5); // click event function sa_clicked(event, d) { select_layer.selectAll("*").remove(); const id = d.properties.ID; if (obj.selection[id]) { delete obj.selection[id]; close_info(); return; } obj.selection = {[id]: d}; select_layer.append("path") .datum(d) .attr("d", geo_path) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round"); select_layer.append("path") .datum(d) .attr("id", "select-strokes") .attr("d", geo_path) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-dasharray", [3/k, 3/k]) .attr("stroke-linejoin", "round"); // fill info box if (obj.info_f) { info_div.selectAll("*").remove(); info_div.style("display", "block").style("background", "white"); const centroidX = geo_path.centroid(d.geometry)[0]; const zoom_transform = obj.zoom_transform(); if (centroidX * zoom_transform.k + zoom_transform.x > chart_size_px[0] * .5) { info_div.style("x", "0px"); info_div.style("right", null); } else { info_div.style("x", null); info_div.style("right", "0px"); } info_div.append("span") .style("cursor", "pointer") .style("margin-left", "1em") .style("margin-right", "-.5em") .style("float", "right") .text("✖") .on("click", close_info); const info_el = obj.info_f(d); for (var e of info_el) info_div.append(() => e); } } function close_info() { select_layer.selectAll("*").remove(); info_div.selectAll("*").remove(); info_div.style("display", "none"); } var obj = { node: div.node(), svg_root : svg_root, img_scale : img_scale, chart_size : chart_size_px, geo_path: geo_path, map_layer: map_layer, img_layer: img_layer, decoration_layer: decoration_layer, transform_callback: null, no_data_fill: noDataHatch.url(), selection: {}}; obj.update_fill = function(collection, fill_f, title_f, info_f) { close_info(); obj.selection = {}; obj.info_f = info_f; sa_layer.selectAll("path") .data(collection.features) .join("path") .attr("fill", d => fill_f(d) ?? noDataHatch.url()) .attr("d", geo_path) .on("click", sa_clicked) .selectAll("title") .data(f => [f]) .join("title") .text(title_f); } function zoomed({transform}) { k = transform.k; map_layer.attr("transform", transform); img_layer.attr("transform", transform); select_layer.attr("transform", transform) .attr("stroke-width", 1.5 / k); select_layer.selectAll("#select-strokes") .attr("stroke-dasharray", [3/k, 3/k]); scale_bar.set_m_per_px(2 * img_m_per_px / k); clip_rect .attr('x', transform.x) .attr('y', transform.y) .attr('width', transform.k * chart_size_px_aspect[0]) .attr('height', transform.k * chart_size_px_aspect[1]) } function zoomed_end({transform}) { // update list of definitions after a delay // (updating patterns is potentially slow) if (obj.transform_callback) { clearTimeout(transform_timeout); transform_timeout = setTimeout(function() { obj.transform_callback(transform, obj) transform_timeout = undefined; }, 1000); } hatchPattern.attr("patternTransform", `scale(${1 / transform.k})`); } obj.make_svg_copy = async function(current_view, updater) { const img_blob = await fetch(img_href).then(r => r.blob()); const img_data_url = await new Promise(resolve => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.readAsDataURL(img_blob); }); // almost identical to our displayed map, but with a fixed size and with a data background image URL var our_map = await ModeShareMap({ chart_size_px: current_view ? chart_size_px : [img_size_px[0] / 2, img_size_px[1] / 2], img_size_px: img_size_px, chart_extent: chart_extent, img_href: img_data_url, copyright_text: copyright_text }) updater(our_map); if (current_view) our_map.set_zoom_transform(obj.zoom_transform()) return our_map; } obj.set_transform_callback = function(f) { obj.transform_callback = f; zoomed_end({transform: obj.zoom_transform()}); } obj.trigger_transform_callback = function() { zoomed_end({transform: obj.zoom_transform()}); }; // zoom behaviour const zoom = d3.zoom() .extent([[0, 0], chart_size_px]) // ideally we would exclude the areas outside the clipping box but // that doesn’t work well. .translateExtent([[0, 0], chart_size_px]) .scaleExtent([1, max_px_zoom * img_size_px[0] / width]) .on("zoom", zoomed) .on("end", zoomed_end); svg_root.call(zoom); obj.zoom_transform = function() { return d3.zoomTransform(obj.svg_root.node()); } obj.set_zoom_transform = function(transform) { svg_root.call(zoom.transform, transform); } return obj; }32:T74a,async function download_map(settings, map, update_callback, name) { const serializer = new XMLSerializer(); const tmp_map = await map.make_svg_copy(settings.view == "current", update_callback); const tmp_svg = tmp_map.svg_root.node(); const source = serializer.serializeToString(tmp_svg); console.log(source) const svg_blob = new Blob([source], {type: "image/svg+xml;charset=utf-8"}); const svg_url = URL.createObjectURL(svg_blob); let downloadLink = document.createElement('a'); let url = ""; if (settings.format == "SVG") { url = svg_url; } else if (settings.format == "PNG" || settings.format == "PNG @ 2×") { // first convert to image const img = new Image(); await new Promise((resolve, reject) => { img.onload = () => resolve(img); img.onerror = (err) => reject(err); img.src = svg_url; }) // then paint on canvas const canvas = document.createElement('canvas') var w = tmp_map.chart_size[0]; var h = tmp_map.chart_size[1]; if (settings.format == "PNG @ 2×") { w *= 2; h *= 2; } canvas.setAttribute('width', w); canvas.setAttribute('height', h); // willReadFrequently is set to true to work around bugs in hardware rendering // that would otherwise occur. And we are in fact only reading the canvas and // not displaying it. const context = canvas.getContext('2d', { alpha: false, willReadFrequently: true }); context.fill = "white"; context.fillRect(0, 0, w, h); context.drawImage(img, 0, 0, w, h); url = canvas.toDataURL('image/png'); } else throw new Error('Unsupported format: ' + settings.format); downloadLink.setAttribute('download', name + "." + settings.format.slice(0, 3).toLowerCase()); downloadLink.setAttribute('href', url); downloadLink.click(); URL.revokeObjectURL(svg_url); return true; }33:T839,function d_to_info(d) { const s_ref = map_settings.reference.k; const s_who = map_settings.who.k; var reference = get_prop(d, "total-stated"); if (s_ref == "travelling") reference -= get_prop(d, "home"); const car = get_prop(d, "car") / reference; const carpass = get_prop(d, "car-passenger") / reference; const bicycle = get_prop(d, "bicycle") / reference; const walk = get_prop(d, "walk") / reference; const bus = get_prop(d, "bus") / reference; const schoolbus = (get_prop(d, "schoolbus") || 0) / reference; const train = get_prop(d, "train") / reference; const ferry = get_prop(d, "ferry") / reference; const home = get_prop(d, "home") / reference; const title = html`${d.properties.name}`; const table = html`

Population	${d.properties["pop-2023"]}
Total stated	${get_prop(d, 'total-stated')}
Drive car	${format_prop(car)}	${format_prop(car + carpass)}
Passenger in a car	${format_prop(carpass)}	${format_prop(car + carpass)}
Walk	${format_prop(walk)}	${format_prop(walk + bicycle)}
Bicycle	${format_prop(bicycle)}	${format_prop(walk + bicycle)}
Bus	${format_prop(bus)}	${format_prop(bus + schoolbus + train + ferry)}

` if (s_who != "work") { table.tBodies[0].append( html`School bus${format_prop(schoolbus)}`); } table.tBodies[0].append( html`Train${format_prop(train)}`, html`Ferry${format_prop(ferry)}`); if (s_ref != "travelling") { table.tBodies[0].append( html`From home${format_prop(home)}`); } return [title, table]; }34:[{"id":"9f18bd7ef5119a79f33c6db4207730a82ec87d0ae5e501fe9e48e0351abcd2ee2da42dad6230088cbb807bf77e3d3908c4ee2f444f4be84ce2b3cf6b35474fd7","href":"https://static.observableusercontent.com/files/9f18bd7ef5119a79f33c6db4207730a82ec87d0ae5e501fe9e48e0351abcd2ee2da42dad6230088cbb807bf77e3d3908c4ee2f444f4be84ce2b3cf6b35474fd7","name":"SA2-2023-transport.csv","type":"text/csv","lastModified":1776684492917.279,"size":59200},{"id":"6e0a148b04ce4ab00bce586e94cfc84309cf9cce21b302f32efc435cf8a0a0a63b747bac591f82d47b2508003e30b1f3d631aea10ed33e560307dbad59f14b28","href":"https://static.observableusercontent.com/files/6e0a148b04ce4ab00bce586e94cfc84309cf9cce21b302f32efc435cf8a0a0a63b747bac591f82d47b2508003e30b1f3d631aea10ed33e560307dbad59f14b28","name":"base-streets-city.png","type":"image/png","lastModified":1776679920330.166,"size":1852885},{"id":"8edde0c23c64c279e58424efe4bdc10248156c6bf299ee7dd4fc341ccce78efa9351b2ff3a7371ffd0b987988a6c2d0b3c6e43a9b6d195b9dfa0e2350a5c96fb","href":"https://static.observableusercontent.com/files/8edde0c23c64c279e58424efe4bdc10248156c6bf299ee7dd4fc341ccce78efa9351b2ff3a7371ffd0b987988a6c2d0b3c6e43a9b6d195b9dfa0e2350a5c96fb","name":"SA2.csv","type":"text/csv","lastModified":1776684493106.454,"size":28696},{"id":"c24c7e6b47aa70c6ce2b9214b761e109d78eb7ebff6288ebda4048dda3e675dcd4f8923f2052baeb18035ecd4afb7a4057f01e92da16b82d4c64ea54ebb74eb8","href":"https://static.observableusercontent.com/files/c24c7e6b47aa70c6ce2b9214b761e109d78eb7ebff6288ebda4048dda3e675dcd4f8923f2052baeb18035ecd4afb7a4057f01e92da16b82d4c64ea54ebb74eb8","name":"SA2@1.geojson","type":"application/geo+json","lastModified":1776687719538.439,"size":1652051},{"id":"8e9d6fe77d991a2124af11e4faf4c03bac255ea997154e3a2cf69c2f7eec1f264df83a7055055310b47425e55c523ae1a61b5fa45ed9511ece0d1e0ba0c17013","href":"https://static.observableusercontent.com/files/8e9d6fe77d991a2124af11e4faf4c03bac255ea997154e3a2cf69c2f7eec1f264df83a7055055310b47425e55c523ae1a61b5fa45ed9511ece0d1e0ba0c17013","name":"base-streets-city-noscale.png","type":"image/png","lastModified":1777376870378.192,"size":1850640}] 2f:{"title":"Census 2023 mode share map","cells":[{"id":0,"value":"# Census 2023 mode share map","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"map_display = html`${map.node}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof map_settings = Inputs.form({\n min_density: Inputs.range([0, 1000], {label: \"Density cutoff\", value: 300, step: 100}),\n mode: Inputs.select(mode_list, {label: \"Mode share:\", format: x => x.lbl, value: param_enum(\"mode\", mode_list, 4)}),\n who: Inputs.radio(group_list, {label: \"Group:\", format: x => x.lbl, value: param_enum(\"who\", group_list, 0)}),\n reference: Inputs.radio(reference_list, {label: \"Proportion of:\", format: x => x.lbl, value: param_enum(\"reference\", reference_list, 0)}),\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"Link to map: [${map_settings.who.lbl} — ${map_settings.mode.lbl}](?mode=${map_settings.mode.k}&who=${map_settings.who.k}&reference=${map_settings.reference.k})","pinned":false,"hidden":false,"mode":"md"},{"id":1187,"value":"viewof get_settings = Inputs.form({\n format: Inputs.radio([\"SVG\", \"PNG\", \"PNG @ 2×\"], {label: \"Format\", value: \"SVG\"}),\n view: Inputs.radio([\"current\", \"all\"], {label: \"View\", value: \"current\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"// we depend on a few other cells, so if you start editing the map the\n// button counter resets to 0 so you don't start downloading\n// stuff all of a sudden.\nviewof get_svg = map_updater, download_map, Inputs.button(`Get ${get_settings.format.slice(0, 3)}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"### Sources\n\nThe source data and statistical area boundaries were provided under the Creative Commons Attribution New Zealand license by Stats NZ. The mode shares are for travel to work and travel to education, measured by the 2023 census\n\nThe streets overlay is based on OpenStreetMap data.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## Recipe","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"map = ModeShareMap({\n chart_size_px: chart_size,\n img_size_px: img_size,\n chart_extent: chart_extent,\n img_href: await FileAttachment(\"base-streets-city-noscale.png\").url(),\n copyright_text: \"Data: Census 2023, Stats NZ. Creative Commons 4.0 International Licence. Road data: © OpenStreetMap contributors\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"function update_map(map, settings) {\n // update fill\n map.update_fill(census_collection, d_to_color, d_to_title, d_to_info);\n\n // update legend decoration\n var legend = settings.mode.k == \"ternary\" ?\n ternary_legend({background: map_bg_color,\n labels: settings.mode.corners,\n color_triplets : ternary_color_corners,\n corner_weights : t_weights,\n height: 110, padding: [30, 4]}) :\n histogram_legend_v(settings.mode.lbl + \" (%)\", histogram, map_color_list,\n { background: map_bg_color, width: 160});\n\n const l_scale = 3 * map.img_scale;\n const l_y = map.chart_size[1] - l_scale * (40 + legend.height)\n legend.node.setAttribute('transform', `translate(${12 * map.img_scale}, ${l_y}) scale(${l_scale})`);\n legend.node.classList.add(\"legend\");\n \n const g = map.decoration_layer;\n g.selectChild(\".legend\").remove();\n g.append(() => legend.node);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"map_updater = update_map(map, map_settings);","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"map_downloader = {\n if (!get_svg) return false;\n return await download_map(get_settings, map, our_map => update_map(our_map, map_settings),\n `census-2023-travel-${map_settings.who.k}-${map_settings.mode.k}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"scale_bar_settings = ({ lbl_size: 12, lbl_gap: 4, bar_height: 6, max_width: 250, overflow: \"show\", segment_count: 4 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"histogram = make_histogram(d_to_prop, d_to_ref, format_prop,\n census_collection.features,\n 0, scale_max, map_color_list.length);","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"function make_histogram(d_to_prop, d_to_weight, fmt_lbl, data, min_edge, max_edge, bins) {\n var histogram = new Array(bins).fill(0)\n var total = 0;\n for (var d of data) {\n const p = d_to_prop(d);\n const ref = d_to_weight(d);\n if (isNaN(ref)) continue;\n total += ref;\n if (!isNaN(p)) {\n const p_scaled = (p - min_edge) / (max_edge - min_edge);\n const t = Math.max(0, Math.min(.999999, p_scaled)) * (bins - 1);\n histogram[Math.floor(t)] += ref;\n }\n }\n histogram = histogram.map(x => x / total);\n // clip trailing zero bins\n // arbitrarily always keep at least 5 bins\n while (histogram.at(-1) < 1e-4 && histogram.length > 5) {\n histogram.pop();\n }\n return {\n h: histogram,\n max: Math.max(...histogram),\n first_bin: min_edge,\n fmt_lbl: fmt_lbl,\n bin_size: (max_edge - min_edge) / (bins - 1)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"img_size = [2030, 2460]","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"img_m_per_px = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"// extent of the attached streets image layer. These numers are found in a worldfile. (.pnw)\n// the notebook currently assumes these coordinates, and the coordinates in any geoJSON files\n// are projected, to the same projection.\nchart_extent = worldfile_to_bbox(img_m_per_px, 378000, 823500, img_size)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"chart_size = {\n const max_chart_h = 800;\n var h = Math.round(width * img_size[1] / img_size[0]);\n if (h < max_chart_h) return [width, h];\n return [width, max_chart_h];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"reference_list = [{k: \"all\", lbl: \"Total stated\"}, {k: \"travelling\", lbl: \"Travelling\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"mode_list = [\n {lbl: \"By car\", k: \"car\", col: [\"car\", \"car-passenger\"], max: 1.00},\n {lbl: \"Drive car\", k: \"car-driver\", col: [\"car\"], max: 1.00},\n {lbl: \"Passenger in a car\", k: \"car-passenger\", max: 0.40, max_edu: 1.00, max_work: 0.20},\n {lbl: \"Bicycle\", k: \"bicycle\", max: 0.10},\n {lbl: \"Walk\", k: \"walk\", max: 0.50},\n {lbl: \"All active\", k: \"active\", col: [\"walk\", \"bicycle\"], max: 0.50},\n {lbl: \"Bus\", k: \"bus\", max: 0.30},\n {lbl: \"School bus\", k: \"schoolbus\", max: 0.50},\n {lbl: \"Train\", k: \"train\", max: 0.20},\n {lbl: \"Ferry\", k: \"ferry\", max: 0.20},\n {lbl: \"All transit\", k: \"transit\", col: [\"bus\", \"schoolbus\", \"train\", \"ferry\"], max: 0.30},\n {lbl: \"From home\", k: \"home\", max: 0.50},\n {lbl: \"Response rate\", k: \"response\", max: 1.00, max_edu: 0.50},\n {lbl: \"Transit / active / car\", k: \"ternary\", corners: [\"car\", \"active\", \"transit\"]},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"group_list = [\n {lbl: \"Work\", k: \"work\"},\n {lbl: \"Study\", k: \"edu\"},\n {lbl: \"Combined\", k: \"combined\"},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"## Color map","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"map_color_list = [\n 'rgb(255, 255, 255)',\n 'rgb(255, 249, 185)',\n 'rgb(255, 219, 123)',\n 'rgb(255, 181, 76)',\n 'rgb(255, 140, 45)',\n 'rgb(237, 107, 76)',\n 'rgb(219, 71, 91)',\n 'rgb(200, 10, 100)',\n 'rgb(162, 42, 133)',\n 'rgb(125, 43, 162)',\n 'rgb( 90, 20, 190)', \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"map_bg_color = 'rgb(240, 240, 240)';","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"ternary_color_corners = [\n [0.55, 0.00, 0.00],\n [0.0, 1.0, 0.1],\n [0.0, 0.07, 1.0]]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"t_weights = map_settings.who.k == \"edu\" ? [1, 1, 1] : [0.4, 1, 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"function d_to_color(d) {\n const density = d.properties[\"pop-2023\"] / d.properties[\"land area\"];\n if (density < map_settings.min_density) return color_scheme(map_color_list, -999);\n\n if (map_settings.mode.k == \"ternary\") {\n return ternary_color(ternary_color_corners, d_to_ternary(d), t_weights);\n }\n \n const prop = d_to_prop(d);\n return color_scheme(map_color_list, prop / scale_max);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"function color_scheme(color_list, x)\n{\n // no data due to masking\n if (x == -999) { return map_bg_color; }\n\n // data omitted in source data\n if (isNaN(x)) { return null; }\n \n // for off-the-chart values, use dark purple or black\n if (x > 2) return \"black\";\n if (x > 1.5) return \"rgb(70, 0, 110 )\";\n\n x = Math.max(0, Math.min(1, x));\n\n x *= (color_list.length - 1);\n return color_list[Math.floor(x)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"function d_to_prop(d) {\n // forbidden combinations\n if (map_settings.mode.k == \"home\" && map_settings.reference.k == \"travelling\") {\n return NaN;\n }\n if (map_settings.mode.k == \"schoolbus\" && map_settings.who.k == \"work\") {\n return NaN;\n }\n\n if (map_settings.mode.k == \"response\") {\n return get_prop(d, \"total-stated\") / d.properties[\"pop-2023\"];\n }\n \n var count = 0;\n const col = map_settings.mode.col ?? [map_settings.mode.k];\n for (var x of col) count += get_prop(d, x);\n var reference = d_to_ref(d)\n return count / reference;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"function d_to_ternary(d) {\n var count = 0;\n var car = get_prop(d, \"car\") + get_prop(d, \"car-passenger\");\n var active = get_prop(d, \"walk\") + get_prop(d, \"bicycle\");\n var transit = get_prop(d, \"train\") + get_prop(d, \"bus\") +\n get_prop(d, \"ferry\") + get_prop(d, \"schoolbus\");\n const ref = d_to_ref(d);\n return [car / ref, active / ref, transit / ref];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"function d_to_ref(d) {\n if (map_settings.mode.k == \"response\") {\n return d.properties[\"pop-2023\"];\n }\n var reference = get_prop(d, \"total-stated\");\n if (map_settings.reference.k == \"travelling\") reference -= get_prop(d, \"home\");\n return reference;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"scale_max =\n (map_settings.who.k == \"edu\" && map_settings.mode.max_edu) || \n (map_settings.who.k == \"work\" && map_settings.mode.max_work) ||\n map_settings.mode.max;","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"function d_to_title(d) {\n if (map_settings.mode.k != \"ternary\") {\n return d.properties.name + \": \" + format_prop(d_to_prop(d))\n }\n return d.properties.name;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"### Extras","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"// these parameters are also known as A, C and F, and E == -A, B == D == 0\n// tx and ty denote the upper left (NW) corner\n// returns easting and northing of the SW and NE corner\nfunction worldfile_to_bbox(m_per_px, tx, ty, img_size_px)\n{\n const [img_w, img_h] = img_size_px;\n const s = -m_per_px * (img_h - 0.5) + ty\n const n = -m_per_px * -0.5 + ty\n const w = m_per_px * -0.5 + tx\n const e = m_per_px * (img_w - 0.5) + tx\n return [[w, s], [e, n]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"function format_prop(p, p_ref, with_pctsign = true) {\n p_ref ??= p;\n if (p != p) return \"N/A\";\n p *= 100;\n const isInt = (p - Math.floor(p)) < .001 * Math.abs(p);\n const txt = (p.toFixed(p_ref >= 0.01 && isInt ? undefined : 1));\n return with_pctsign ? txt + \"%\" : txt;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"// a value that can be overridden with an URL parameter\nparam_enum = {\n var params = new URLSearchParams(html``.search)\n return function(param_name, choices, default_index)\n {\n var v = params.get(param_name);\n if (v == null) return choices[default_index];\n var index = default_index;\n for (var i = 0; i < choices.length; ++i) {\n if (choices[i].k == v) {\n index = i;\n break;\n }\n }\n \n return choices[index];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"copyright_text = \"Data: Census 2023, Stats NZ. Creative Commons 4.0 International Licence. Road data: © OpenStreetMap contributors\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"census_collection = get_census_collection(\"transport\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1119,"value":"census_collection.features[0].properties","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"async function get_census_collection(...features) {\n const geometry = await d3.json(await FileAttachment(\"SA2@1.geojson\").url());\n var data = await d3.csv(await FileAttachment(\"SA2.csv\").url());\n make_numeric(data);\n data = as_map(data);\n for (var g of geometry.features) {\n g.properties = {...g.properties, ...data[g.properties.ID]};\n }\n \n if (features.includes(\"transport\")) {\n var data_transport = await d3.csv(await FileAttachment(\"SA2-2023-transport.csv\").url());\n make_numeric(data_transport);\n merge_car(data_transport, \"travel-2023-work\");\n data_transport = as_map(data_transport);\n for (var g of geometry.features) {\n g.properties = {...g.properties, ...data_transport[g.properties.ID]};\n }\n }\n \n return geometry;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"function get_prop(d, field) {\n var n1 = null;\n var n2 = null;\n const who = map_settings.who.k;\n if (who == \"edu\" || who == \"combined\") n1 = d.properties[\"travel-2023-edu-\" + field];\n if (who == \"work\" || who == \"combined\") n2 = d.properties[\"travel-2023-work-\" + field];\n if (n1 == null && n2 == null) return null;\n return (n1 ?? 0) + (n2 ?? 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"function as_map(list) {\n if (!list) return {};\n var m = {};\n for (var x of list) m[x.ID] = x;\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"// converts most fields to numeric values, in-place\n// negative values are converted to NaN\nfunction make_numeric(csv_table) {\n for (let row of csv_table) {\n for (let [k, v] of Object.entries(row)) {\n if (k != \"name\") {\n const n = +v;\n row[k] = n >= 0 ? n : NaN;\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"// converts most fields to numeric values, in-place\n// negative values are converted to NaN\nfunction merge_car(csv_table, prefix) {\n for (let row of csv_table) {\n row[prefix + \"-car\"] = row[prefix + \"-car1\"] + row[prefix + \"-car2\"];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"import {HatchTile45} from \"@roelandschoukens/svg-tiled-pattern-fills\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"import {SvgScaleBar} from \"@roelandschoukens/scale-bar\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1088,"value":"import {histogram_legend_v, ternary_legend, ternary_color} from \"@roelandschoukens/legend-widgets\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}