3e:null 3f:["$","title",null,{"children":"2023 Aotearoa New Zealand Electorate Hexmap | Peter Scriven | Observable"}] 45:Tbea,chart = { // Dimensions const w = width; const h = width < 600 ? 500 : 880; // Map settings const map_type = "zoomed" const data_type = "area_type" // Transforms const scale = width < 600 ? 0.4 : 0.7; const me_translate = map_type === "geo" ? { x: 40, y: 150 } : map_type === "hex" ? { x: 40, y: 280 } : { x:0, y:0 } // Create SVG const svg = d3.create('svg').attr("width", w).attr("height", h) const node = svg.append('g') // Create tooltip const tooltip = getTooltip(data_type); // Add Data - General & Māori Electorate const extras_bg_node = node.append('g').attr("id", "extras-bg"); drawExtras(extras_bg_node, ui_extras_data, map_type, true, scale); const general_node = node.append('g').attr("id", "general-seats"); drawElectorates(general_node, general_elec_data, map_type, data_type, tooltip, scale); const māori_node = node.append('g').attr("id", "maori-seats"); drawElectorates(māori_node, māori_elec_data, map_type, data_type, tooltip, scale, me_translate); const extras_node = node.append('g').attr("id", "extras") drawExtras(extras_node, ui_extras_data, map_type, false, scale) // Change function const speed = 3000; const transition_detail = 70; // (lower => more detail + slower) function change(value, oldValue) { const getStart = d => oldValue === "geo" ? d.geo_path : oldValue === "hex" ? d.hex_path : d.zoom_path; const getEnd = d => value === "geo" ? d.geo_path : value === "hex" ? d.hex_path : d.zoom_path; const me_translate = value === "geo" ? { x: 40, y: 150 } : value === "hex" ? { x: 40, y: 280 } : {x:0,y:0}; const stroke_width = value === "hex" ? 6 : 4; const options = { maxSegmentLength: transition_detail }; const extra_opacity = value === "zoomed" ? 1 : 0; const extra_delay = value === "zoomed" ? 1000 : 0; general_node.selectAll('path') .style('pointer-events', 'none') .transition().duration(speed) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.select(`#${d.id}`).style('pointer-events', 'unset')); māori_node.selectAll('path') .style('pointer-events', 'none') .transition().duration(speed) .style("transform", `scale(${scale}) translate(${me_translate.x}px, ${me_translate.y}px)`) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.select(`#${d.id}`).style('pointer-events', 'unset')); extras_bg_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('path') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); } // Return node return Object.assign(svg.node(), {change, start_value: map_type}); }46:Tc05,candidate_hexmap = { // Dimensions const w = width; const h = width < 600 ? 500 : 880; // Map settings const map_type = "zoomed" const data_type = "candidate" // Transforms const scale = width < 600 ? 0.4 : 0.7; const me_translate = map_type === "geo" ? { x: 40, y: 150 } : map_type === "hex" ? { x: 40, y: 280 } : { x:0, y:0 } // Create SVG const svg = d3.create('svg').attr("width", w).attr("height", h) const node = svg.append('g') // Create tooltip const tooltip = getTooltip(); // Add Data - General & Māori Electorate const extras_bg_node = node.append('g').attr("id", "extras-bg"); drawExtras(extras_bg_node, ui_extras_data, map_type, true, scale); const general_node = node.append('g').attr("id", "general-seats"); drawElectorates(general_node, general_elec_data, map_type, data_type, tooltip, scale); const māori_node = node.append('g').attr("id", "maori-seats"); drawElectorates(māori_node, māori_elec_data, map_type, data_type, tooltip, scale, me_translate); const extras_node = node.append('g').attr("id", "extras") drawExtras(extras_node, ui_extras_data, map_type, false, scale) // Change function const speed = 3000; const transition_detail = 70; // (lower => more detail + slower) function change(value, oldValue) { const getStart = d => oldValue === "geo" ? d.geo_path : oldValue === "hex" ? d.hex_path : d.zoom_path; const getEnd = d => value === "geo" ? d.geo_path : value === "hex" ? d.hex_path : d.zoom_path; const me_translate = value === "geo" ? { x: 40, y: 150 } : value === "hex" ? { x: 40, y: 280 } : {x:0,y:0}; const stroke_width = value === "hex" ? 6 : 4; const options = { maxSegmentLength: transition_detail }; const extra_opacity = value === "zoomed" ? 1 : 0; const extra_delay = value === "zoomed" ? 1000 : 0; general_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); māori_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .style("transform", `scale(${scale}) translate(${me_translate.x}px, ${me_translate.y}px)`) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); extras_bg_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('path') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); } // Return node return Object.assign(svg.node(), { change, start_value: map_type }); }47:T857,candidate_hexmap_2 = { // Dimensions const w = width; const h = width < 600 ? 500 : 880; // Map settings const map_type = "hex" const data_type = "candidate" const elec_highlight = "all" // Transforms const scale = width < 600 ? 0.4 : 0.7; const me_translate = map_type === "geo" ? { x: 40, y: 150 } : map_type === "hex" ? { x: 40, y: 280 } : { x:0, y:0 } // Create SVG const svg = d3.create('svg').attr("width", w).attr("height", h) const node = svg.append('g') // Create tooltip const tooltip = getTooltip(); // Add Data - General & Māori Electorate const extras_bg_node = node.append('g').attr("id", "extras-bg"); drawExtras(extras_bg_node, ui_extras_data, map_type, true, scale); const general_node = node.append('g').attr("id", "general-seats"); drawElectorates(general_node, general_elec_data, map_type, data_type, tooltip, scale); const māori_node = node.append('g').attr("id", "maori-seats"); drawElectorates(māori_node, māori_elec_data, map_type, data_type, tooltip, scale, me_translate); const extras_node = node.append('g').attr("id", "extras") drawExtras(extras_node, ui_extras_data, map_type, false, scale) // Change function const speed = 750; const lag = 150; function change(v) { const showGen = (d) => (v === "all" || v === d.electorate_type); general_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .delay(d => showGen(d) ? lag : 0) .attr("fill-opacity", d => showGen(d) ? 1 : 0.05) .on("end", d => showGen(d) ? d3.selectAll(`#${d.id}`).style('pointer-events', 'unset') : null); const showMāo = d => (v === "all" || v === "māori"); māori_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .delay(d => showMāo(d) ? lag : 0) .attr("fill-opacity", d => showMāo(d) ? 1 : 0.05) .on("end", d => showMāo(d) ? d3.selectAll(`#${d.id}`).style('pointer-events', 'unset') : null); } // Return node return Object.assign(svg.node(), { change, start_value: elec_highlight }); }48:Tbed,party_chart = { // Dimensions const w = width; const h = width < 600 ? 500 : 880; // Map settings const map_type = "zoomed" const data_type = "party" // Transforms const scale = width < 600 ? 0.4 : 0.7; const me_translate = map_type === "geo" ? { x: 40, y: 150 } : map_type === "hex" ? { x: 40, y: 280 } : { x:0, y:0 } // Create SVG const svg = d3.create('svg').attr("width", w).attr("height", h) const node = svg.append('g') // Create tooltip const tooltip = getTooltip(); // Add Data - General & Māori Electorate const extras_bg_node = node.append('g').attr("id", "extras-bg"); drawExtras(extras_bg_node, ui_extras_data, map_type, true, scale); const general_node = node.append('g').attr("id", "general-seats"); drawElectorates(general_node, general_elec_data, map_type, data_type, tooltip, scale); const māori_node = node.append('g').attr("id", "maori-seats"); drawElectorates(māori_node, māori_elec_data, map_type, data_type, tooltip, scale, me_translate); const extras_node = node.append('g').attr("id", "extras") drawExtras(extras_node, ui_extras_data, map_type, false, scale) // Change function const speed = 3000; const transition_detail = 70; // (lower => more detail + slower) function change(value, oldValue) { const getStart = d => oldValue === "geo" ? d.geo_path : oldValue === "hex" ? d.hex_path : d.zoom_path; const getEnd = d => value === "geo" ? d.geo_path : value === "hex" ? d.hex_path : d.zoom_path; const me_translate = value === "geo" ? { x: 40, y: 150 } : value === "hex" ? { x: 40, y: 280 } : {x:0,y:0}; const stroke_width = value === "hex" ? 6 : 4; const options = { maxSegmentLength: transition_detail }; const extra_opacity = value === "zoomed" ? 1 : 0; const extra_delay = value === "zoomed" ? 1000 : 0; general_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); māori_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .style("transform", `scale(${scale}) translate(${me_translate.x}px, ${me_translate.y}px)`) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); extras_bg_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('path') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); } return Object.assign(svg.node(), { change, start_value: map_type }); }49:Tbef,rel_party_chart = { // Dimensions const w = width; const h = width < 600 ? 500 : 880; // Map settings const map_type = "hex" const data_type = "rel_party" // Transforms const scale = width < 600 ? 0.4 : 0.7; const me_translate = map_type === "geo" ? { x: 40, y: 150 } : map_type === "hex" ? { x: 40, y: 280 } : { x:0, y:0 } // Create SVG const svg = d3.create('svg').attr("width", w).attr("height", h) const node = svg.append('g') // Create tooltip const tooltip = getTooltip(); // Add Data - General & Māori Electorate const extras_bg_node = node.append('g').attr("id", "extras-bg"); drawExtras(extras_bg_node, ui_extras_data, map_type, true, scale); const general_node = node.append('g').attr("id", "general-seats"); drawElectorates(general_node, general_elec_data, map_type, data_type, tooltip, scale); const māori_node = node.append('g').attr("id", "maori-seats"); drawElectorates(māori_node, māori_elec_data, map_type, data_type, tooltip, scale, me_translate); const extras_node = node.append('g').attr("id", "extras") drawExtras(extras_node, ui_extras_data, map_type, false, scale) // Change function const speed = 3000; const transition_detail = 70; // (lower => more detail + slower) function change(value, oldValue) { const getStart = d => oldValue === "geo" ? d.geo_path : oldValue === "hex" ? d.hex_path : d.zoom_path; const getEnd = d => value === "geo" ? d.geo_path : value === "hex" ? d.hex_path : d.zoom_path; const me_translate = value === "geo" ? { x: 40, y: 150 } : value === "hex" ? { x: 40, y: 280 } : {x:0,y:0}; const stroke_width = value === "hex" ? 6 : 4; const options = { maxSegmentLength: transition_detail }; const extra_opacity = value === "zoomed" ? 1 : 0; const extra_delay = value === "zoomed" ? 1000 : 0; general_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); māori_node.selectAll('path') .style('pointer-events', 'none') .transition() .duration(speed) .style("transform", `scale(${scale}) translate(${me_translate.x}px, ${me_translate.y}px)`) .attr("stroke-width", stroke_width) .attrTween("d", d => flubber.interpolate(getStart(d), getEnd(d), options)) .on("end", d => d3.selectAll(`#${d.id}`).style('pointer-events', 'unset')); extras_bg_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('circle') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); extras_node.selectAll('path') .transition().delay(extra_delay).duration(speed) .style("opacity", extra_opacity); } return Object.assign(svg.node(), { change, start_value: map_type }); }4a:T496,function drawElectorates(node, data, map_type, data_type, tooltip, scale, translate = {x:0, y:0}) { const stroke_width = map_type === "hex" ? 6 : 4; const stroke = 'white'; const getPath = d => map_type === "geo" ? d.geo_path : map_type === "hex" ? d.hex_path : d.zoom_path; node.selectAll('path') .data(data) .enter() .append('path') .attrs(d => ({ 'id': d.id, 'd': getPath(d) })) .attrs(d => ({ 'fill': getFill(d, data_type), 'stroke': stroke, 'stroke-opacity': "1", 'stroke-width': stroke_width, 'fill-opacity': 1 })) .styles({ "transform": `scale(${scale}) translate(${translate.x}px, ${translate.y}px)`, "paint-order": "stroke" }) .on("mouseover", (e, d) => { d3.select(e.target) .attr("fill", getFill(d, data_type, true)) .attr("stroke", "black") .raise() tooltipFns.show(tooltip) }) .on("mousemove", (e, d) => { tooltipFns.update(tooltip, data_type, e, d); }) .on("mouseleave", (e, d) => { d3.select(e.target) .attr("fill", getFill(d, data_type)) .attr("stroke", stroke) tooltipFns.hide(tooltip) }) }4b:T598,function getFill(d, data_type, highlight = false) { // Electorate "Types" if (data_type === "area_type") { const elect_type = d.seat_type === "general" ? d.electorate_type : d.seat_type if (highlight) { return { "māori": "#edd4d4", // brown "rural": "#cce6cc", // green "major-urban": "#e6cce6", // purple "medium-size-city": "#ffedcc" // orange }[elect_type] } return { "māori": "brown", "rural": "green", "major-urban": "purple", "medium-size-city": "orange" }[elect_type] } // Candidate votes if (data_type === "candidate") { const candidate_list = vote_data[d.name].candidate_votes try { const winner = candidate_list[0] const margin = (winner.percentage - candidate_list[1].percentage) / 100 const colorFn = party_colors.scales[winner.party] return colorFn(margin) } catch { return "#999" } } // Party votes if (data_type === "party") { const lean = vote_data[d.name].party_vote_lean.normalised_lean const colorScheme = d3.scaleSequential().domain([.2, .8]).interpolator(d3.interpolateRdBu) return colorScheme(lean) } // Party Lean if (data_type === "rel_party") { const lean = vote_data[d.name].party_vote_lean.relative_lean const scheme = d3.scaleSequential().domain([-.2, .2]).interpolator(d3.interpolateRdBu); return scheme(lean) } }4c:T8fa,party_colors = ({ scales: { "National Party": d3.scaleThreshold().domain([.05, .1, .15, .2]) .range(["#CCEBFE", "#7DC0FE", "#3F87E5", "#004DCC", "#000099"]), "Labour Party": d3.scaleThreshold().domain([.05, .1, .15, .2]) .range(["#FFCBCD", "#FE7D80", "#E53F41", "#CB0002", "#800000"]), "Green Party": d3.scaleThreshold().domain([.05, .1, .15, .2]) .range(["#65FC9F", "#34D371", "#03AA43", "#02772F", "#015321"]), "ACT New Zealand": d3.scaleThreshold().domain([.05, .1, .15, .2]) .range([d3.color("#FFFF59").brighter(1), "#FFFF59", "#FDEC3E", "#FDC63C", "#FF9E00"]), "The Opportunities Party (TOP)": createColorScale("#09B598"), "New Zealand First Party": createColorScale("#444"), "Te Pāti Māori": createColorScale("#C57E1D"), }, singles: { // Main / Minor Parties "National Party": "#00529F", "Labour Party": "#D82A20", "Green Party": "#098137", "ACT New Zealand": "#FDE401", "The Opportunities Party (TOP)": "#09B598", "New Zealand First Party": "#000000", "Te Pāti Māori": "#B2001A", // Bucket Colors "Independent": "#888", "Informal Votes": "#fff", "Others": "#999", // Cookers "Aotearoa Legalise Cannabis Party": "darkgreen", "Animal Justice Party ": "#5E559E", "Rock the Vote NZ": "#012064", "New Nation Party": "#4646B2", "NewZeal": "#28CEDC", "DemocracyNZ": "#31A5A5", "Leighton Baker Party": "#21a901", "Leighton Baker": "#21a901", "New Zealand Loyal": "#fcc74b", "NZ Loyal": "#fcc74b", "New Conservatives": "#00AEEF", "NZ Outdoors & Freedom Party": "#008000", "Vision New Zealand": "#095B7E", "Republic of New Zealand Party": "#94D8C9", "Money Free Party NZ": "#F8CA4D", "Protect and Prosper New Zealand": "#C2CFD7", "Progressive Aotearoa New Zealand": "#822472", "Northland Party": "#426F12", "Workers Now": "#A62A26", "Future Youth Party": "#FC1693", "New Zealand Sovereignty Party": "#F2AF17", "Freedoms NZ": "#95278A", "Women’s Rights Party": "#9C27B0", "New World Order McCann Party ": "#888", "Economic Euthenics ": "#888", "NAP": "#888", "Human Rights Party": "#888" } })4d:T99e,function drawExtras(node, data, map_type, background=false, scale) { const opacity = map_type === "zoomed" ? 1 : 0 // Draw bigs if (background) { node.selectAll('circle') .data(data['zoom-bigs']) .enter() .each(function(d) { const g = d3.select(this); g.append('circle') .attrs({"cx": d.x, "cy": d.y, "r": d.r, "stroke": "white", "stroke-width": 5, "fill-opacity": 0 }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); g.append('circle') .attrs({"cx": d.x, "cy": d.y, "r": d.r, "stroke": "black", "stroke-width": 1, "fill-opacity": 0 }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); }); return; } // Draw smalls node.selectAll('circle') .data(data['zoom-smalls']) .enter() .each(function(d) { const g = d3.select(this); g.append('circle') .attrs({"cx": d.x, "cy": d.y, "r": d.r, "stroke": "white", "stroke-width": 5, "fill-opacity": 0 }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); g.append('circle') .attrs({"cx": d.x, "cy": d.y, "r": d.r, "stroke": "black", "stroke-width": 1, "fill-opacity": 0 }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); }); // Draw lines node.selectAll('.line') .data(data['zoom-lines']) .enter() .each(function(d) { const g = d3.select(this); g.append('path') .attrs({ 'class': 'line', 'd': d.path, "stroke": "white", "stroke-width": 5 }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); g.append('path') .attrs({ 'class': 'line', 'd': d.path, "stroke": "black" }) .style('opacity', opacity) .style('pointer-events', 'none') .style("transform", `scale(${scale})`); }); // Draw outlines node.selectAll('.outline') .data(data['outlines']) .enter() .append('path') .attrs(d => ({ 'class': 'outline', 'd': d.path, "stroke": "black", "fill-opacity": 0, "stroke-dasharray": "2 2" })) .style('pointer-events', 'none') .style('opacity', opacity) .style("transform", `scale(${scale})`); }4e:T1738,function getTooltipHtml(d, data_type) { const bgColor = getFill(d, data_type) const dot_styles = { 'width':'16px', 'height':'16px', 'border-radius':'24px', 'background':bgColor, 'display':'inline-block', 'margin-right':'6px' } const title_styles = { 'font-size': '20px', 'font-weight': 700 } const subtitle_styles = { 'opacity':0.6, 'font-size':'16px' } const table_styles = { 'margin-bottom': '4px', 'margin-top': '4px', 'border-collapse': 'collapse', 'width': '100%', 'text-align':'left' } // Set up body const root = d3.create("div") const t1 = root.append("div") const t2 = root.append("div") // Add main title t1.append('span').styles(dot_styles) t1.append('span').text(d.name).styles(title_styles) // 1. "Area type" tooltip if (data_type === "area_type") { t2.text(label_maps.areas[d.electorate_type ?? d.seat_type]).styles(subtitle_styles) return root.html() } // 2. Candidate vote tooltip if (data_type === "candidate") { try { // Get data const candidate_list = vote_data[d.name].candidate_votes const data = candidate_list.reduce((acc, p) => { if (!acc.print_party) { acc.list[acc.list.length - 1].votes += p.votes acc.list[acc.list.length - 1].percentage += p.percentage return acc } acc.list.push(p) if (p.party === "Informal Votes") { acc.list.push({ name: 'Others', party: '-', votes: 0, percentage: 0 }) acc.print_party = false } return acc }, { list: [], print_party: true }) data.list = data.list.filter(d => d.votes > 0) // Add subtitle const margin = candidate_list[0].percentage - candidate_list[1].percentage t2.append("div") .html(`${candidate_list[0].party} victory. Margin ${d3.format(".2f")(margin)}%.`) .styles(subtitle_styles) // Add table const tbl = t2.append('table').styles(table_styles) tbl.append('thead').append('tr').selectAll('th') .data(['Candidate', 'Party', 'Votes', '%']) .enter().append('th').text(d => d) tbl.append('tbody').selectAll('tr') .data(data.list).enter() .append('tr') .styles((d, i) => { const color = party_colors.singles[d.party] if (i === 0) { return { 'background': color, 'border-left': `solid 4px ${color}` } } return { 'border-left': `solid 4px ${color}` } }) .html((d, i) => { const c = i === 0 ? colorIsDark(party_colors.singles[d.party]) ? 'white' : 'dark' : '' return ` ${d.name} ${d.party !== 'Informal Votes' ? label_maps.parties(d.party) : '-'} ${d3.format(',')(d.votes)} ${d.party !== 'Informal Votes' ? d3.format('.1%')(d.percentage/100) : ''} `}) } catch { t2.text("No data") } return root.html() } // 3. Party vote tooltip if (data_type === "party") { // Get data const party_list = vote_data[d.name].party_votes const data = party_list.reduce((acc, p) => { if (!acc.print_party) { acc.list[acc.list.length - 1].votes += p.votes return acc } acc.list.push(p) if (p.party === "Informal Votes") { acc.list.push({ party: "Other", votes: 0 }) acc.print_party = false } return acc }, { list: [], print_party: true }) // Add subtitle const lean_data = vote_data[d.name].party_vote_lean const lean = lean_data.lean; const lean_text = (lean > 0 ? "Right" : "Left") const vote_majority = lean > 0 ? lean_data.right_votes / lean_data.total : lean_data.left_votes / lean_data.total; t1.append("div").html(`Combined % ${lean_text.toLowerCase()} parties: ${d3.format(".2f")(vote_majority * 100)}%`).styles(subtitle_styles) // Add table const tbl = t2.append('table').styles(table_styles) tbl.append('thead').append('tr').selectAll('th') .data(['Party', 'Votes']) .enter().append('th').text(d => d) tbl.append('tbody').selectAll('tr') .data(data.list).enter() .append('tr') .styles(d => ({'border-left': `solid 4px ${party_colors.singles[d.party]}` })) .html(d => ` ${d.party} ${d3.format(',')(d.votes)} `) return root.html() } // 4. Party vote relative lean tooltip if (data_type === "rel_party") { // Get data const lean_data = vote_data[d.name].party_vote_lean const data = [ { name: '"Left"', votes: lean_data.left_votes, color: '#D77B64' }, { name: '"Right"', votes: lean_data.right_votes, color: '#65A7CE' }, // { name: '"Other"', votes: lean_data.other_votes, color: '#EEEEEE' }, ] data.sort((a, b) => b.votes - a.votes) // Add subtitle const lean = lean_data.relative_lean; const amount = Math.abs(lean) < 0.001 ? "<0.1%" : d3.format(".1%")(Math.abs(lean)) t2.append("span").html(`${amount} ${lean > 0 ? "right" : "left"} of the national average.`).styles(subtitle_styles) // Add table const tbl = t2.append('table').styles(table_styles) tbl.append('thead').append('tr').selectAll('th') .data(['Alignment', 'Votes', '%']) .enter().append('th').text(d => d) tbl.append('tbody').selectAll('tr') .data(data).enter() .append('tr') .styles(d => ({'border-left': `solid 4px ${d.color}` })) .html(d => ` ${d.name} ${d3.format(',')(d.votes)} ${d3.format('.1%')(d.votes / lean_data.total)} `) return root.html() } return root.html() }4f:T5d0,label_maps = ({ areas: { "māori": "Māori electorate", "major-urban": "Major urban electorate", "rural": "Rural electorate", "medium-size-city": "Medium-sized city electorate" }, parties: n => { const map = { "National Party": "National", "Labour Party": "Labour", "Green Party": "Green", "ACT New Zealand": "ACT", "New Zealand First Party": "NZ First", "Vision New Zealand": "Vision NZ", "New Zealand Loyal": "NZ Loyal", "The Opportunities Party (TOP)": "TOP", "Aotearoa Legalise Cannabis Party": "Cannabis", "NZ Outdoors & Freedom Party": "Outdrs/Frdm", "Money Free Party NZ": "Money Free", "Animal Justice Party": "Animal Just.", "Progressive Aotearoa New Zealand": "Prog. NZ", "New Nation Party": "New Nation", "New Zealand Sovereignty Party": "NZ Sove.", "New World Order McCann Party": "NWO McCann", "Republic of New Zealand Party": "Republic of NZ", "Future Youth Party": "Future Youth", "New Conservatives": "New Cons.", "Rock the Vote NZ": "Rock. Vote", "Protect and Prosper New Zealand": "Prot. & Pros.", "DemocracyNZ": "Dem. NZ", "Northland Party": "Northland", "Human Rights Party": "Hum. Rights", "Independent": "Indep.", "Leighton Baker Party": "Leigh. Baker", "Economic Euthenics": "Eco. Euth." } try { return map[n.trim()] ?? n } catch { return n } } })50:[{"id":"e2eca1914210391563a77e4d489055fb9ea309fc239827f1d4d67e1d15588118ca9f8514dca34b19de3b648ef217d5bff9b93e8405e00350aae78c897a6faca5","href":"https://static.observableusercontent.com/files/e2eca1914210391563a77e4d489055fb9ea309fc239827f1d4d67e1d15588118ca9f8514dca34b19de3b648ef217d5bff9b93e8405e00350aae78c897a6faca5","name":"map-and-zoomed-cities.png","type":"image/png","lastModified":1741887225547.05,"size":276756},{"id":"a18aec33019872d0920e6ecc20a98813336e7e70f8bc93a7c742f64d57645cafa12bb4aafb482906a3c0bfb6d7f24ee37da742ec66959e818e72c9a840a25716","href":"https://static.observableusercontent.com/files/a18aec33019872d0920e6ecc20a98813336e7e70f8bc93a7c742f64d57645cafa12bb4aafb482906a3c0bfb6d7f24ee37da742ec66959e818e72c9a840a25716","name":"māori_electorates@3.json","type":"application/json","lastModified":1745558125214.067,"size":229375},{"id":"2e1e9f258f70bccdf67e056f34e69de572c681d6da2935246d13d9f82250e19441073f67a609af4ed3e801ba7f1389c46ddb94578b322ab454c9ebbbd651ad7e","href":"https://static.observableusercontent.com/files/2e1e9f258f70bccdf67e056f34e69de572c681d6da2935246d13d9f82250e19441073f67a609af4ed3e801ba7f1389c46ddb94578b322ab454c9ebbbd651ad7e","name":"general_electorates@6.json","type":"application/json","lastModified":1745558140258.456,"size":877574},{"id":"12a3b19666b58a857bccede6553a218fe520ce84d888ed466d8823f097f64617a7ceeefe2e6e9e608a3993e54565dd33370574acc48bf11ba5b8efbdca35e616","href":"https://static.observableusercontent.com/files/12a3b19666b58a857bccede6553a218fe520ce84d888ed466d8823f097f64617a7ceeefe2e6e9e608a3993e54565dd33370574acc48bf11ba5b8efbdca35e616","name":"zoom_extras.json","type":"application/json","lastModified":1745558145715.467,"size":18811},{"id":"df53c65258a7ce4394f75d77cb1e40edd5a769aaf947c70ab1bf55b82778369ccf51433cba72cc196cc6fcab1de8aadc2f255b712d1268cf64f8e0f626e62f4f","href":"https://static.observableusercontent.com/files/df53c65258a7ce4394f75d77cb1e40edd5a769aaf947c70ab1bf55b82778369ccf51433cba72cc196cc6fcab1de8aadc2f255b712d1268cf64f8e0f626e62f4f","name":"general_electorates@2.new2.json","type":"application/json","lastModified":1746376367885.721,"size":221436},{"id":"b3fbc99392654b851ae283946b98e9d9abdff035873433c51ec58ef85e1c319cccce957c88c044f2b4470bf11e429ff5945344c217c311ea8ce3321d76bdbbe1","href":"https://static.observableusercontent.com/files/b3fbc99392654b851ae283946b98e9d9abdff035873433c51ec58ef85e1c319cccce957c88c044f2b4470bf11e429ff5945344c217c311ea8ce3321d76bdbbe1","name":"māori_electorates.new2.json","type":"application/json","lastModified":1746376436804.284,"size":31430},{"id":"f70a550352ad7080598f1cf3ece33bd5e1bb221417fa4aad64a57793843d068623418518de704addb88df64591a97970cabd14bd9032772573e5a31fcff19562","href":"https://static.observableusercontent.com/files/f70a550352ad7080598f1cf3ece33bd5e1bb221417fa4aad64a57793843d068623418518de704addb88df64591a97970cabd14bd9032772573e5a31fcff19562","name":"general_elects_simplified.json","type":"application/json","lastModified":1746376919857.894,"size":221631},{"id":"2ce054e0c1bcd56b3358164122266f78ae4b779c1908be7d7e5733781678ddb33ae75822cffe2864c0656dc7261e2c5c77e37d5c2c5219d072333b5f03925331","href":"https://static.observableusercontent.com/files/2ce054e0c1bcd56b3358164122266f78ae4b779c1908be7d7e5733781678ddb33ae75822cffe2864c0656dc7261e2c5c77e37d5c2c5219d072333b5f03925331","name":"māori_elects_simplified.json","type":"application/json","lastModified":1746376926677.569,"size":31451},{"id":"7a5e2ae0bc3ed573a9e5465bae46cba29c86ac1e36e88a64391c2e3de2a2f16cbc7a75ffacddf32b245cc2a9708355a18ead11d5c1d8c09e225b7f4cb9c41bba","href":"https://static.observableusercontent.com/files/7a5e2ae0bc3ed573a9e5465bae46cba29c86ac1e36e88a64391c2e3de2a2f16cbc7a75ffacddf32b245cc2a9708355a18ead11d5c1d8c09e225b7f4cb9c41bba","name":"general_elects_chch_hex_fix.json","type":"application/json","lastModified":1765286918742.082,"size":221631},{"id":"786b9f5dad6da9156f79e615b567c26224290492f8dbdaee34bef9c4d5151471090a874e410271c41f96c116b8d590a536dfeb1336455952a8461f09f5392ee3","href":"https://static.observableusercontent.com/files/786b9f5dad6da9156f79e615b567c26224290492f8dbdaee34bef9c4d5151471090a874e410271c41f96c116b8d590a536dfeb1336455952a8461f09f5392ee3","name":"general_elects_chch_hex_fix_2.json","type":"application/json","lastModified":1765287045574.487,"size":221635}] 43:{"id":"25270471425ecc0f","slug":"nz-electorate-hexmap","title":"2023 Aotearoa New Zealand Electorate Hexmap","thumbnail":"d7248ef76b18a5a592cde41901dbc6a8fae5a44ef978dca249581460a97cf0a1","access_level":"public","create_time":"$D2024-11-07T07:58:37.904Z","update_time":"$D2026-09-16T16:31:26.025Z","view_time":null,"first_public_time":"$D2025-03-31T05:42:23.922Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7d3b969c7f48c9b9","login":"pjpscriv","name":"Peter Scriven","avatar_url":"https://avatars-next.observableusercontent.com/fcdc3ee8f3194982ddb39cb3951762cc03fb7ba8cc8ff01a1c2a0dd1f8981d0c","tier":"starter_2024","bio":""},"version":2164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c12a8b72d5b9e5d5","login":"pjpscriv","name":"Peter Scriven","avatar_url":"https://avatars-next.observableusercontent.com/fcdc3ee8f3194982ddb39cb3951762cc03fb7ba8cc8ff01a1c2a0dd1f8981d0c","tier":null,"bio":"Software Engineer from Aotearoa New Zealand. Data viz dabbler."}],"members":[{"type":"team","id":"7d3b969c7f48c9b9","login":"pjpscriv","name":"Peter Scriven","avatar_url":"https://avatars-next.observableusercontent.com/fcdc3ee8f3194982ddb39cb3951762cc03fb7ba8cc8ff01a1c2a0dd1f8981d0c","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c12a8b72d5b9e5d5","login":"pjpscriv","name":"Peter Scriven","avatar_url":"https://avatars-next.observableusercontent.com/fcdc3ee8f3194982ddb39cb3951762cc03fb7ba8cc8ff01a1c2a0dd1f8981d0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2023 Aotearoa New Zealand Electorate Hexmap","cells":[{"id":0,"value":"# 2023 Aotearoa New Zealand Electorate Hexmap\n\nInspired by [Stephan Beban](https://www.linkedin.com/in/stephenbeban/)'s better visual breakdowns of New Zealand elections, e.g. [this one for 2023](https://thespinoff.co.nz/politics/04-11-2023/a-better-visual-breakdown-of-the-2023-election-results).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":775,"value":"toc({ selector: \"h2, h3\", heading: \"\" });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md_1 = md`## Geographic Map vs Hexmap\n\nThis data contains **${Object.keys(general_elec_data).length + Object.keys(māori_elec_data).length}** total electorates: **${Object.keys(general_elec_data).length}** general electorates and **${Object.keys(māori_elec_data).length}** Māori electorates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof chart_style = {\n const radio = Inputs.radio(new Map([\n [\"Zoomed Cities Map\", \"zoomed\"],\n [\"Geographic Map\", \"geo\"],\n [\"Hexmap\", \"hex\"]\n ]), {label: \"Chart style\", value: chart.start_value});\n radio.oldValue = chart.start_value\n\n radio.addEventListener(\"input\", () => { chart.change(radio.value, radio.oldValue); radio.oldValue = radio.value; });\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"area_types_swatches = {\n const ids = [ \"rural\", \"medium-size-city\", \"major-urban\", \"māori\" ]\n const titles = [\n \"Rural electorate\",\n \"Medium-sized city electorate\",\n \"Major urban electorate\",\n \"Māori electorate\"\n ];\n const colors = ids.map(t => getFill({ seat_type: t.toLowerCase().replaceAll(\" \", \"-\") }, \"area_type\"))\n return Swatches(d3.scaleOrdinal(titles, colors), { })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md_2 = md`## Candidate Votes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"viewof candidate_chart_style = {\n const radio = Inputs.radio(new Map([\n [\"Zoomed Cities Map\", \"zoomed\"],\n [\"Geographic Map\", \"geo\"],\n [\"Hexmap\", \"hex\"]\n ]), { label: \"Chart style\", value: candidate_hexmap.start_value } );\n\n radio.oldValue = candidate_hexmap.start_value\n radio.addEventListener(\"input\", () => { candidate_hexmap.change(radio.value, radio.oldValue); radio.oldValue = radio.value});\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"candidate_votes_legend = {\n const parties = [ \"National Party\", \"Labour Party\", \"Green Party\", \"ACT New Zealand\", \"New Zealand First Party\", \"Te Pāti Māori\" ]\n const scales = parties.map(p => party_colors.scales[p]);\n const titles = parties.map(p => p.replace(\" Party\", \"\"))\n .map(p => p === \"ACT New Zealand\" ? \"ACT\" : p)\n .map(p => p === \"New Zealand First\" ? \"NZ First\" : p)\n return GroupLegend(scales, { titles: titles, tickFormat: \".0%\", height: 16, width: 32, gapX: 0, gapY: 2, labelGap: 4 })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"## Candidate Votes by electorate type","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2090,"value":"viewof candidate_chart_style_2 = {\n const radio = Inputs.radio(new Map([\n [\"All\", \"all\"], \n [\"Major Urban Areas\", \"major-urban\"],\n [\"Medium-Sized Cities\", \"medium-size-city\"],\n [\"Rural\", \"rural\"], \n [\"Māori Electorates\", \"māori\"],\n ]), { label: \"Electorate Type\", value: candidate_hexmap_2.start_value } );\n \n radio.addEventListener(\"input\", () => { candidate_hexmap_2.change(radio.value) });\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2087,"value":"candidate_votes_legend_2 = {\n const parties = [ \"National Party\", \"Labour Party\", \"Green Party\", \"ACT New Zealand\", \"New Zealand First Party\", \"Te Pāti Māori\" ]\n const scales = parties.map(p => party_colors.scales[p]);\n const titles = parties.map(p => p.replace(\" Party\", \"\"))\n .map(p => p === \"ACT New Zealand\" ? \"ACT\" : p)\n .map(p => p === \"New Zealand First\" ? \"NZ First\" : p)\n return GroupLegend(scales, { titles: titles, tickFormat: \".0%\", height: 16, width: 32, gapX: 0, gapY: 0, labelGap: 4 })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md_3 = md`## Party Vote (Total Votes)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"md_4 = md`The lean of the nation was **${d3.format(\".1%\")(national_lean.normalised_lean)} to the right**, with:\n- **${d3.format(\",\")(national_lean.right_votes)}** _(${d3.format('.2%')(national_lean.right_votes / national_lean.total)})_ votes to National, ACT & NZ First\n- **${d3.format(\",\")(national_lean.left_votes)}** _(${d3.format('.2%')(national_lean.left_votes / national_lean.total)})_ votes to Labour, Greens & Te Pāti Māori\n\n_**Note**: this excludes the ${d3.format(\",\")(national_lean.other_votes)} votes given to third parties outside parliament_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"viewof party_chart_style = {\n const radio = Inputs.radio(new Map([\n [\"Zoomed Cities Map\", \"zoomed\"],\n [\"Geographic Map\", \"geo\"],\n [\"Hexmap\", \"hex\"]\n ]), {label: \"Chart style\", value: party_chart.start_value});\n radio.oldValue = party_chart.start_value\n\n radio.addEventListener(\"input\", () => { party_chart.change(radio.value, radio.oldValue); radio.oldValue = radio.value; });\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"party_vote_legend = {\n const fmtr = d3.format(\".0%\")\n return Legend(d3.scaleSequential([.2, .8], d3.interpolateRdBu), {\n title: \"Combined Left / Right party vote totals\",\n tickFormat: (d) => d === 0.5 ? \"50/50 split\" : d < 0.5 ? `${fmtr(Math.abs(1 - d))} left` : `${fmtr(d)} right`,\n // ticks: 8,\n // width: Math.min(width, 750),\n marginLeft: 9,\n height: 55\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"md_5 = md`## Party Vote (Relative Lean)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"md_6 = md`This compares the total party votes in each electorate versus the country as a whole\n* Right-leaning electorates gave **more** than 55.9% of their vote to right parties\n* Left-leaning electorates gave **less** than 55.9% of their vote to right parties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"viewof rel_party_chart_style = {\n const radio = Inputs.radio(new Map([\n [\"Zoomed Cities Map\", \"zoomed\"],\n [\"Geographic Map\", \"geo\"],\n [\"Hexmap\", \"hex\"]\n ]), {label: \"Chart style\", value: rel_party_chart.start_value});\n radio.oldValue = rel_party_chart.start_value\n\n radio.addEventListener(\"input\", () => { rel_party_chart.change(radio.value, radio.oldValue); radio.oldValue = radio.value; });\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"rel_party_vote_legend = {\n const fmtr = d3.format(\".0%\")\n return Legend(d3.scaleSequential([-0.2, 0.2], d3.interpolateRdBu), {\n title: \"Left / Right party vote lean compared to national average\",\n tickFormat: (d) => {\n if (d === 0) return \"Same as nation\"\n const text = d < 0 ? \"left\" : \"right\"\n const extra = Math.abs(d) >= 0.2 ? \">\" : \"\"\n return `${extra}${fmtr(Math.abs(d))} more ${text}`\n },\n // ticks: 8,\n // width: Math.min(width, 750),\n marginLeft: 20,\n height: 55\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1024,"value":"## TODOs\n- ~~Party map: Change percentages to be the total of the winning side~~ ✅\n- ~~Party map: better key~~ ✅\n- ~~Simplify Geo SVG paths for better animation~~ ✅\n- ~~Add total national lean~~ ✅\n- ~~Add toggle for combined left/right party vote vs. lean relative to nation~~ ✅ - _added extra chart for relative to nation lean_\n- ~~Data pipeline~~ ✅\n- ~~Improve party view tooltip~~ ✅\n - ~~Shorter party names map~~ ✅\n- All electorates table view?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"## Appendix\n### References\n- https://thespinoff.co.nz/politics/04-11-2023/a-better-visual-breakdown-of-the-2023-election-results\n- https://observablehq.com/@jwolondon/uk-election-2024-boundary-data\n- https://en.wikipedia.org/wiki/New_Zealand_electorates\n- https://en.wikipedia.org/wiki/Electoral_system_of_New_Zealand\n- https://www.parliament.nz/en/mps-and-electorates/historical-electorate-profiles/\n- https://www.electionresults.govt.nz/electionresults_2023/statistics/\n- https://doodles.mountainmath.ca/posts/2025-04-28-elections-fun---2025-edition/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"### Data\n| _Source notebook: https://observablehq.com/@pjpscriv/2023-nz-election-data_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"general_elec_data = FileAttachment(\"general_elects_chch_hex_fix_2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"māori_elec_data = FileAttachment(\"māori_elects_simplified.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"ui_extras_data = FileAttachment(\"zoom_extras.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"### Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"#### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"##### Drawing helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"function colorIsDark(bgColor) {\n let color = d3.color(bgColor).hex().substring(1, 7);\n let r = parseInt(color.substring(0, 2), 16); // hexToR\n let g = parseInt(color.substring(2, 4), 16); // hexToG\n let b = parseInt(color.substring(4, 6), 16); // hexToB\n let L = (r * 0.299) + (g * 0.587) + (b * 0.114);\n return L <= 186;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"function createColorScale(color) {\n const c = d3.hsl(d3.color(color))\n const brightest = c.brighter(2).hex() === \"#ffffff\" ? c.brighter(1.5) : c.brighter(2)\n return d3.scaleThreshold()\n .domain([.05, .1, .15, .2])\n .range([ brightest, c.brighter(1), c, c.darker(1), c.darker(2) ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"##### Data check helpers - To Remove","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"all_candidate_parties = Object.keys(vote_data).map(key => (vote_data[key].candidate_votes ?? []).map(v => v.party) ).reduce((acc, d) => {\n d.forEach(i => acc.add(i)) \n return acc \n}, new Set())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"all_parties = Object.keys(vote_data).map(key => (vote_data[key].party_votes ?? []).map(v => v.party) ).reduce((acc, d) => {\n d.forEach(i => acc.add(i)) \n return acc \n}, new Set())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"##### Tooltip helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"function getTooltip(data_type) {\n const id = `tooltip-${data_type}`\n let tooltip = d3.selectAll(`#${id}`)\n tooltip = !tooltip.empty() ? tooltip : d3.select(\"body\").append(\"div\").attr(\"id\", id);\n tooltip.styles({\n \"position\": \"absolute\",\n \"font-family\": \"sans-serif\",\n \"border-radius\": \"4px\",\n \"box-shadow\": \"2px 2px 10px #0006\",\n \"color\": \"black\",\n \"font-size\": \"15px\", \n \"background\": \"white\",\n \"display\": \"flex\",\n \"flex-direction\": \"column\",\n \"align-items\": \"left\",\n \"padding\": \"8px 16px\",\n \"display\": \"none\",\n \"width\": data_type === \"area_type\" ? \"170px\" : \"310px\"\n });\n return tooltip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"tooltipFns = {\n return {\n show: (tooltip) => tooltip.style(\"display\", \"flex\"),\n hide: (tooltip) => tooltip.style(\"display\", \"none\"),\n update: (tooltip, data_type, e, d) => {\n const [x, y] = [ e.pageX, e.pageY ]\n tooltip.html(getTooltipHtml(d, data_type))\n const tooltip_w = tooltip.node().getBoundingClientRect().width;\n const min_left = 4\n const max_left = width - tooltip_w\n const left = x - (tooltip_w / 2)\n tooltip.styles({\n \"left\": Math.min(max_left, Math.max(min_left, left))+\"px\",\n \"top\": y + 20 + \"px\"\n })\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"##### Text helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1738,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"d3 = require.alias({ 'd3-selection': 'd3', 'd3-transition': 'd3' })('d3', 'd3-selection-multi')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"flubber = require(\"flubber\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"import {vote_data, national_lean} from \"@pjpscriv/2023-nz-election-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"import { GroupLegend } from \"@pjpscriv/color-legend-group\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:"$43:body"