25:["$","title",null,{"children":"HW10 North Taiwan map | 吳泳霈's Workspace | Observable"}] 49:T774,taiwanMap = (width, height, offsetX, offsetY, scale, highlightCounty) => { offsetX = offsetX + 0.80; const bboxCenter = bbox => [((bbox[0] + bbox[2]) / 2) + offsetX, ((bbox[1] + bbox[3]) / 2) + offsetY]; const projection = d3.geoMercator() .center(bboxCenter(topojson.bbox(tw))) .translate([width / 2, height / 2]) .scale(scale); const path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const details = svg.append("g") .selectAll("path") .data(topojson.feature(tw, tw.objects.towns).features) //detailsFn(highlightCounty, details, path, svg); const maxValue = 13; const thresholds = d3.range(0, maxValue + 1); const colorRange = thresholds.map(value => d3.interpolateReds(value / maxValue)); const thresholdScale = d3.scaleThreshold().domain(thresholds).range(colorRange); details .enter() .append("path") .attr("fill", (d) => { const foundData = minidata.find( (t) => t.value === d.properties.TOWNNAME || t.value.replace("臺", "台") === d.properties.TOWNNAME ); return foundData ? thresholdScale(foundData.count) : thresholdScale(0); }) .attr("stroke", "gray") .attr("d", path) .append("title") .text((d) => { const foundData = minidata.find( (t) => t.value === d.properties.TOWNNAME || t.value.replace("臺", "台") === d.properties.TOWNNAME ); return `${d.properties.TOWNNAME} ${foundData ? foundData.count : 0}人`; }); svg.append("path") .datum(topojson.mesh(tw, tw.objects.towns, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.25) .attr("d", path); svg.append("g").html(stripes); return svg.node(); }4a:T541,function buildHierarchy(csv) { // Helper function that transforms the given CSV into a hierarchical format. const root = { name: "root", children: [] }; for (let i = 0; i < csv.length; i++) { const sequence = csv[i][0]; const size = +csv[i][1]; if (isNaN(size)) { // e.g. if this is a header row continue; } const parts = sequence.split("-"); let currentNode = root; for (let j = 0; j < parts.length; j++) { const children = currentNode["children"]; const nodeName = parts[j]; let childNode = null; if (j + 1 < parts.length) { // Not yet at the end of the sequence; move down the tree. let foundChild = false; for (let k = 0; k < children.length; k++) { if (children[k]["name"] == nodeName) { childNode = children[k]; foundChild = true; break; } } // If we don't already have a child node for this branch, create it. if (!foundChild) { childNode = { name: nodeName, children: [] }; children.push(childNode); } currentNode = childNode; } else { // Reached the end of the sequence; create a leaf node. childNode = { name: nodeName, value: size }; children.push(childNode); } } } return root; }4b:T596,function down(svg, data) { // Ref : https://observablehq.com/@d3/hierarchical-bar-chart // Ref : https://d3-graph-gallery.com/graph/barplot_horizontal.html const transition1 = svg.transition().duration(250); const transition2 = transition1.transition(); data.sort((a, b) => b.value - a.value); svg.selectAll(".bar,.barText") .attr("fill-opacity", 1) .transition(transition1) .attr("fill-opacity", 0) .remove(); let sum = data.reduce((curr, d) => d.value + curr, 0); let x = d3.scaleLinear() .domain([0, sum]) .range([ 0, 550 ]); let y = d3.scaleBand() .domain(data.map((d) => d.name)) .range([ 0, Math.min(31.875 * data.length, 510) ]) .padding(0.1); svg.selectAll(".background") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", 550) .attr("y", d => y(d.name) + 125) .attr("width", d => x(d.value)) .attr("height", y.bandwidth() ) .attr("fill", "#69b3a2") .attr("fill-opacity", 0) .transition(transition2) .attr("fill-opacity", 1) svg.selectAll(".background") .data(data) .enter() .append("text") .attr("class", "barText") .attr("x", 575 ) .attr("y", d => y(d.name) + 125 + parseInt(y.bandwidth() / 2) + 5) .text(d => (d.value / sum * 100).toFixed(1) + "% - " + d.name) .attr("fill-opacity", 0) .transition(transition2) .attr("fill-opacity", 1) }4c:T6fa,stripes = ` `4d:[{"id":"37a09ac7213b196f8dfc9f01c6e2cdf63bf5bf446fedded78b4ce6a9a636a2745ecacb45a6d689d3d21c8e215c76b37380cd8dbf847d839f753f6b8e4e0d4bed","href":"https://static.observableusercontent.com/files/37a09ac7213b196f8dfc9f01c6e2cdf63bf5bf446fedded78b4ce6a9a636a2745ecacb45a6d689d3d21c8e215c76b37380cd8dbf847d839f753f6b8e4e0d4bed","name":"UserData-1.json","type":"application/json","lastModified":1703475913549.387,"size":17005}] 29:{"id":"606c58c534d762a6","slug":null,"title":"HW10 North Taiwan map","thumbnail":"bcedbfc1e67e72b4cc0b80a08cc7dbbbecdc1e04835cb758c1137e5a23bfa57a","access_level":"public","create_time":"$D2023-12-22T06:51:04.212Z","update_time":"$D2023-12-27T01:11:35.775Z","view_time":null,"first_public_time":"$D2023-12-22T06:51:04.212Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","tier":"starter_2024","bio":"Hi","followed_by_you":false,"follows_you":false},"version":124,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"role":"editor"},{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HW10 North Taiwan map","cells":[{"id":0,"value":"# HW10 North Taiwan map\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"taipei = taiwanMap(400, 200, 0.6, 0.9, 18000, '台北市')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"LivePlace = Object.keys(data[0])[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"LivePlace_column = data.map(row => row[LivePlace]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"LivePlace_uniqueValues = [...new Set(LivePlace_column)].sort();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"LivePlace_counts = LivePlace_uniqueValues.map(val => ({\n value: val,\n count: LivePlace_column.filter(v => v === val).length\n}));\n//每個級距各有幾個人選，列出","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"minidata = LivePlace_counts.flatMap((item, index) => ([\n {\n value: item.value,\n count: item.count,\n series: 'LivePlaceLast'\n }\n]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"data = FileAttachment(\"UserData-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"tw = d3.json(\"https://cdn.jsdelivr.net/npm/taiwan-atlas/towns-10t.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null