31:T663,md` # Taiwan Elections 2018 Visualized On November 24th, Taiwan elections saw a resurgence of KMT (Kuomingtang, 國民黨) backed candidates, after a few years of nearly total control by the DPP (Democratic Progressive Party, 民進黨). The results came as a suprise to many people, even those who already expected this election to be a rebuke to president Tsai Ing-Wen's (蔡英文) two years in power. On the ballot were the mayors for all cities in Taiwan, thousands of councillors, local representatives, and ten referendum questions. The shift in power back toward the KMT was not the only thing that indicated a mobilization of more conservative voters. Every single referendum question that progressives rallied behind was voted down, including questions supporting marriage equality and a participation in the Olympics as Taiwan instead of Chinese Taipei. Now that the election has happened, let's dive into the data to get a better picture of what actually happened and what this means for Taiwan and the world. # Mayoral Elections To begin, let's start by taking a look at the mayoral elections across the country. Taiwan's mayoral elections are closely watched as they are considered to be similar in importance to a gubernatorial election in the US. _(Hover over a district to explore. Blue districts indicate a KMT mayoral victory, green districts indicate a DPP mayoral victory, and grey districts indicate a third party mayoral victory. Striped districts indicate a change in party from the 2014 election.)_ `32:T5a0,md` The first thing that is made apparent in this map is how much blue there is. But as is with any election map, geographical space is an inaccurate representation of population. That is to say that much of the central and eastern areas of Taiwan are sparsely populated. However, closer inspection of the map reveals a few interesting points. First, there are far more blue striped districts than green striped districts, indicating that while many districts in Taichung (台中) and Kaohsiung (高雄) flipped blue, some districts in Taoyuan (桃園) actually flipped green. Hualien (花蓮) county is striped because it went from an indepedent county mayor to a KMT one. That Taichung flipped back to blue is no surprised, as Taichung is historically more blue than green. ## Kaohsiung (高雄) Perhaps the most closely watched mayoral election of the night was that of the city of Kaohsiung, Taiwan's second largest city. In all of Taiwan's history as a two party democracy, Kaohsiung has consistently and reliably been under control of the DPP, making this year's KMT victory for Han Guo-Yu (韓國瑜) a major surprise. By all counts, Han Guo-Yu was a candidate that came out of relative obscurity into the public spotlight as he campaigned to become Kaohsiung's mayor. He is a second-generation "mainlander" (a group that arrived in Taiwan during China's civil war) from New Taipei City (新北市) on the north end of Taiwan. `33:T4a2,md` In this year's election, Ko was reelected by less than 3,000 votes, leaving the election much closer than most people expected. A likely explanation for this is that in 2014 Ko received endorsement from the DPP, who did not put a candidate into the race. But in 2018, unhappy with Ko in his first term, the DPP ran Pasuya Yao (姚文智) as a protest against Ko, likely cannibalizing his votes. # Referendum Questions On the ballot this year were also ten referendum questions. The current manifestation of referendum system was created legislatively in December of 2017 by the DPP, making the barrier of entry to citizens directly running referendums much easier by lowering the threshold for submitting. Interestingly, the decreased barrier of entry to running a referendum likely backfired politically on the DPP, with all of the positions supported by conserveratives passing, while none of the positions supported by progressives passed. _(Hover over each map to see the question and the voting results. Yellow districts indicate a majority "yes" vote and red districts indicate a majority "no" vote)_ `34:Tc6b,referendum = { const svg = d3.select(DOM.svg(500, 250)) .style("width", "100%") .style("height", "auto"); const referendumCache = {}; for (let x = 7; x <= 16; x++) { referendumCache[`referendum${x}`] = taiwanMap(100, 100, -0.8, -0.5, 1500, referendumFn(x), false) referendumCache[`referendumgrey`] = taiwanMap(100, 100, -0.8, -0.5, 1500, referendumFn(x), true) svg.append('g') .attr("class", `referendum`) .attr("id", `referendum${x}`) .attr("transform", `translate(${((x-7) % 5) * 100}, ${Math.floor((x-7) / 5) * 150})`) .append(() => referendumCache[`referendum${x}`]) .on("mouseover", function(data) { d3.selectAll("g.referendum").attr('fill-opacity', 0.1); d3.select(`g#referendum${x}`).attr('fill-opacity', 1); // Append the Referendum question svg.append("g") .attr("id", "question") .append("foreignObject") .attr("x", "30") .attr("y", (1 - Math.floor((x-7) / 5)) * 140 + 10) .attr("width", "470") .attr("height", "100") .attr("font-size", "14") .text(referendumQuestions[`referendum${x}`]); // Count the total votes const totalVotes = (votes2018.公投[`第${x}案`].summary.yes + votes2018.公投[`第${x}案`].summary.no) // Append the yes bar svg.append("g") .attr("id", "resultYes") .attr("transform", `translate(30, 125)`) .append("rect") .attr("width", 470 * (votes2018.公投[`第${x}案`].summary.yes / totalVotes)) .attr("height", "5") .attr("fill", "#f1c40f"); // Append the no bar svg.append("g") .attr("id", "resultNo") .attr("transform", `translate(${30 + 470 * (votes2018.公投[`第${x}案`].summary.yes / totalVotes)}, 125)`) .append("rect") .attr("width", 470 * (votes2018.公投[`第${x}案`].summary.no / totalVotes)) .attr("height", "5") .attr("fill", "#FF7F6F"); // Append the yes number svg.append("g") .attr("id", "countYes") .attr("transform", `translate(30, 120)`) .append("text") .text(`${numberWithCommas(votes2018.公投[`第${x}案`].summary.yes)} votes`) .attr("font-size", "8") .attr("fill", "#f1c40f"); // Append the no number svg.append("g") .attr("id", "countNo") .attr("transform", `translate(${30 + 470 * (votes2018.公投[`第${x}案`].summary.yes / totalVotes)}, 120)`) .append("text") .text(`${numberWithCommas(votes2018.公投[`第${x}案`].summary.no)} votes`) .attr("font-size", "8") .attr("fill", "#FF7F6F"); }) .on("mouseout", function(data) { d3.selectAll("g.referendum").attr('fill-opacity', 1); svg.selectAll("g#question").remove(); svg.selectAll("g#resultYes").remove(); svg.selectAll("g#resultNo").remove(); svg.selectAll("g#countYes").remove(); svg.selectAll("g#countNo").remove(); }); } return svg.node(); }35:T1075,turnoutGraph = { const height = 400; const width = 800; const margin = ({top: 20, right: 0, bottom: 30, left: 60}); const turnoutGraphData = ({ y: "number of votes", series: Object.keys(votes2018.市長).reduce( (acc, county) => acc.concat({ name: county, values: [ Object.keys(votes2014.市長[county]).filter(key => key !== "summary").reduce( (a, b) => votes2014.市長[county][b].reduce((a, b) => b.votes + a, 0) + a, 0 ), Object.keys(votes2018.市長[county].summary).reduce( (a, b) => votes2018.市長[county].summary[b].votes + a, 0 ) ] }), [] ), dates: ["2014-11-29", "2018-11-24"].map(d3.timeParse("%Y-%m-%d")) }); const x = d3.scaleTime() .domain(d3.extent(turnoutGraphData.dates)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(turnoutGraphData.series, d => d3.max(d.values))]).nice() .range([height - margin.bottom, margin.top]); const line = d3.line() .defined(d => !isNaN(d)) .x((d, i) => x(turnoutGraphData.dates[i])) .y(d => y(d)); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(turnoutGraphData.y)) const hover = (svg, path) => { svg.style("position", "relative"); if ("ontouchstart" in document) svg.style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg.on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("text") .style("font-size", "20px") .attr("text-anchor", "middle") .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("y", -10); function moved() { d3.event.preventDefault(); const ym = y.invert(d3.event.layerY); const xm = x.invert(d3.event.layerX); const i1 = d3.bisectLeft(turnoutGraphData.dates, xm, 1); const i0 = i1 - 1; const i = xm - turnoutGraphData.dates[i0] > turnoutGraphData.dates[i1] - xm ? i1 : i0; const s = turnoutGraphData.series.reduce( (a, b) => Math.abs(a.values[i] - ym) < Math.abs(b.values[i] - ym) ? a : b ); path.attr( "stroke", d => d === s ? ((d.values[0] < d.values[1]) ? "#CE8CE9" : "#FF7F6F") : "#ddd") .filter(d => d === s).raise(); dot.attr("transform", `translate(${(x(turnoutGraphData.dates[0]) + x(turnoutGraphData.dates[1])) / 2},${y((s.values[0] + s.values[1]) / 2)})`); dot.select("text").text(s.name); } function entered() { path.style("mix-blend-mode", "multiply") .attr("stroke", d => (d.values[0] < d.values[1]) ? "#CE8CE9" : "#FF7F6F"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply") .attr("stroke", d => (d.values[0] < d.values[1]) ? "#CE8CE9" : "#FF7F6F"); dot.attr("display", "none"); } } const svg = d3.select(DOM.svg(width, height)) .attr('width', null) .attr('height', null); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(turnoutGraphData.series) .enter() .append("path") .style("mix-blend-mode", "multiply") .attr("stroke", d => (d.values[0] < d.values[1]) ? "#CE8CE9" : "#FF7F6F") .attr("d", d => line(d.values)); svg.call(hover, path); return svg.node(); }36:T5e4,md` Despite voter turnout being higher in aggregate, we notice that voter turnout decreased in the capital city of Taipei. One explanation of lower turnout in Taipei was that this year's ballot took longer to fill out and Taipei precincts were flooded with voters, the majority of whom waited hours in order to vote. The increased waiting time was likely a deterrent for individuals who were unable to wait that long. Returning to the referendum results, it's also plausible that the way districts turned out caused the referendum questions to lean more conservative. The fact that many of the urban cores (except for Kaohsiung) saw a decrease in turnout likely contributes to this result. # Conclusion There's no doubt that Taiwan is a vibrant, dynamic, and messy democracy. Under the looming threat of Chinese annexation, Taiwan remains fervently committed to it's democracy in stark contrast to it's authoritarian neighbor across the strait. Just like democracies anywhere in the world, electorates are never a monolith. There are nuances within nuances of individual politics, and explorations like these only begin to scratch the surface. ## Notes Voting results data fetched from the [Central Election Committee](http://vote.2018.nat.gov.tw/pc/zh_TW/index.html). The data was fetched on 18:00 local time on November 24. Any changes to the official vote count after this date may not be reflected in these results. Map information from [twgeojson](https://github.com/g0v/twgeojson). ## Appendix `37:Ta57,mayorFn = (highlightCounty, node, path, svg) => { const color = ({COUNTYNAME, TOWNNAME}) => { const {county, town} = patch(COUNTYNAME, TOWNNAME); if (votes2018.市長[county] && (!highlightCounty || highlightCounty === county) && votes2018.市長[county][town] ) { const winner2018 = votes2018.市長[county][town].sort((a, b) => b.votes - a.votes)[0] const winner2014 = votes2014.市長[county][town].sort((a, b) => b.votes - a.votes)[0] switch (winner2018.party) { case '中國國民黨': if (winner2014.party !== winner2018.party) return 'url(#diagonal-stripe-blue)'; return '#1e90ff'; case '民主進步黨': if (winner2014.party !== winner2018.party) return 'url(#diagonal-stripe-green)'; return '#2ed573'; } if (winner2014.party !== winner2018.party) return 'url(#diagonal-stripe-grey)'; return "#747d8c"; } return '#88888820'; } node.enter().append("path") .attr("fill", feature => color(feature.properties)) .attr("d", path) .on("mouseover", function(data) { d3.select(this).attr('fill-opacity', 0.5); const mouse = d3.mouse(d3.select(this).node()); const {county, town} = patch(data.properties.COUNTYNAME, data.properties.TOWNNAME); const voteResults = votes2018.市長[county][town].sort((a, b) => b.votes - a.votes); let tooltip = svg.append("g") .attr("id", "tooltip") .attr("style", "pointer-events: none;") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`) .append("text") .append('svg:tspan') .attr("font-size", "8") .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .text(`${county}, ${town}`); voteResults.forEach( result => { tooltip = tooltip.append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "5") .attr('x', 0) .attr('dy', 7) .text(`${result.name}: ${numberWithCommas(result.votes)}`) } ); }) .on("mousemove", function(data) { const mouse = d3.mouse(d3.select(this).node()); svg.select("g#tooltip") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`); }) .on("mouseout", function(data) { d3.select(this).attr('fill-opacity', 1); svg.selectAll("g#tooltip").remove(); }); }38:T999,turnoutFn = (highlightCounty, node, path, svg) => { const color = ({COUNTYNAME, TOWNNAME}) => { const {county, town} = patch(COUNTYNAME, TOWNNAME); if (votes2018.市長[county] && (!highlightCounty || highlightCounty === county) && votes2018.市長[county][town] ) { const voteCount2018 = votes2018.市長[county][town].reduce((a, b) => b.votes + a, 0); const voteCount2014 = votes2014.市長[county][town].reduce((a, b) => b.votes + a, 0); return (voteCount2018 > voteCount2014) ? '#CE8CE9' : '#FF7F6F'; } } node.enter().append("path") .attr("fill", feature => color(feature.properties)) .attr("d", path) .on("mouseover", function(data) { d3.select(this).attr('fill-opacity', 0.5); const mouse = d3.mouse(d3.select(this).node()); const {county, town} = patch(data.properties.COUNTYNAME, data.properties.TOWNNAME); const voteCount2018 = votes2018.市長[county][town].reduce((a, b) => b.votes + a, 0); const voteCount2014 = votes2014.市長[county][town].reduce((a, b) => b.votes + a, 0); let tooltip = svg.append("g") .attr("id", "tooltip") .attr("style", "pointer-events: none;") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`) .append("text") .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "8") .text(`${county}, ${town}`) .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "5") .attr('x', 0) .attr('dy', 7) .text(`2018: ${numberWithCommas(voteCount2018)}`) .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "5") .attr('x', 0) .attr('dy', 7) .text(`2014: ${numberWithCommas(voteCount2014)}`) }) .on("mousemove", function(data) { const mouse = d3.mouse(d3.select(this).node()); svg.select("g#tooltip") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`); }) .on("mouseout", function(data) { d3.select(this).attr('fill-opacity', 1); svg.selectAll("g#tooltip").remove(); }); }39:T995,referendumFn = (number, showTooltip) => (highlightCounty, node, path, svg) => { const color = ({COUNTYNAME, TOWNNAME}) => { const {county, town} = patch(COUNTYNAME, TOWNNAME); if (votes2018.公投[`第${number}案`][county] && (!highlightCounty || highlightCounty === county) && votes2018.公投[`第${number}案`][county][town] ) { return (votes2018.公投[`第${number}案`][county][town].yes > votes2018.公投[`第${number}案`][county][town].no) ? '#f1c40f' : '#FF7F6F'; } return '#EEE'; } const map = node.enter().append("path") .attr("fill", feature => color(feature.properties)) .attr("d", path); if (showTooltip) { map.on("mouseover", function(data) { d3.select(this).attr('fill-opacity', 0.5); const mouse = d3.mouse(d3.select(this).node()); const {county, town} = patch(data.properties.COUNTYNAME, data.properties.TOWNNAME); const voteCountYes = votes2018.公投[`第${number}案`][county][town].yes; const voteCountNo = votes2018.公投[`第${number}案`][county][town].no; let tooltip = svg.append("g") .attr("id", "tooltip") .attr("style", "pointer-events: none;") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`) .append("text") .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "8") .text(`${county}, ${town}`) .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "5") .attr('x', 0) .attr('dy', 7) .text(`Yes: ${numberWithCommas(voteCountYes)}`) .append('svg:tspan') .attr("font-family", "'Roboto', 'Noto Sans TC', sans-serif") .attr("style", "fill: var(--color, black);") .attr("font-size", "5") .attr('x', 0) .attr('dy', 7) .text(`No: ${numberWithCommas(voteCountNo)}`) }) .on("mousemove", function(data) { const mouse = d3.mouse(d3.select(this).node()); svg.select("g#tooltip") .attr("transform", `translate(${mouse[0]}, ${mouse[1] + 10})`); }) .on("mouseout", function(data) { d3.select(this).attr('fill-opacity', 1); svg.selectAll("g#tooltip").remove(); }); } }3a:T1273,patch = (county, town) => { const wordReplace = { '台': '臺', }; const nameReplace = { // Cities '桃園縣': '桃園市', '高雄縣': '高雄市', '臺北縣': '新北市', '臺南縣': '臺南市', '臺中縣': '臺中市', // Taoyuan '大園鄉': '大園區', '蘆竹鄉': '蘆竹區', '觀音鄉': '觀音區', '龜山鄉': '龜山區', '中壢市': '中壢區', '大溪鎮': '大溪區', '楊梅鎮': '楊梅區', '八德市': '八德區', '龍潭鄉': '龍潭區', '平鎮市': '平鎮區', '新屋鄉': '新屋區', '觀音鄉': '觀音區', '復興鄉': '復興區', // New Taipei City '板橋市': '板橋區', '三重市': '三重區', '中和市': '中和區', '永和市': '永和區', '新莊市': '新莊區', '新店市': '新店區', '樹林市': '樹林區', '鶯歌鎮': '鶯歌區', '三峽鎮': '三峽區', '淡水鎮': '淡水區', '汐止市': '汐止區', '瑞芳鎮': '瑞芳區', '土城市': '土城區', '蘆洲市': '蘆洲區', '五股鄉': '五股區', '泰山鄉': '泰山區', '林口鄉': '林口區', '深坑鄉': '深坑區', '石碇鄉': '石碇區', '坪林鄉': '坪林區', '三芝鄉': '三芝區', '石門鄉': '石門區', '八里鄉': '八里區', '平溪鄉': '平溪區', '雙溪鄉': '雙溪區', '貢寮鄉': '貢寮區', '金山鄉': '金山區', '萬里鄉': '萬里區', '烏來鄉': '烏來區', // Kaohsiung '三民鄉': '三民區', '桃源鄉': '桃源區', '甲仙鄉': '甲仙區', '六龜鄉': '六龜區', '杉林鄉': '杉林區', '內門鄉': '內門區', '茂林鄉': '茂林區', '美濃鎮': '美濃區', '湖內鄉': '湖內區', '茄萣鄉': '茄萣區', '旗山鎮': '旗山區', '阿蓮鄉': '阿蓮區', '田寮鄉': '田寮區', '路竹鄉': '路竹區', '永安鄉': '永安區', '岡山鎮': '岡山區', '燕巢鄉': '燕巢區', '彌陀鄉': '彌陀區', '橋頭鄉': '橋頭區', '梓官鄉': '梓官區', '大社鄉': '大社區', '大樹鄉': '大樹區', '仁武鄉': '仁武區', '鳥松鄉': '鳥松區', '鳳山市': '鳳山區', '大寮鄉': '大寮區', '林園鄉': '林園區', '鼓山區(海)': '鼓山區', '前鎮區(海)': '前金區', '旗津區(海)': '旗津區', '小港區(海)': '小港區', // Tainan '後壁鄉': '後壁區', '白河鎮': '白河區', '鹽水鎮': '鹽水區', '新營市': '新營區', '北門鄉': '北門區', '東山鄉': '東山區', '柳營鄉': '柳營區', '學甲鎮': '學甲區', '下營鄉': '下營區', '六甲鄉': '六甲區', '將軍鄉': '將軍區', '官田鄉': '官田區', '麻豆鎮': '麻豆區', '楠西鄉': '楠西區', '佳里鎮': '佳里區', '大內鄉': '大內區', '善化鎮': '善化區', '玉井鄉': '玉井區', '西港鄉': '西港區', '七股鄉': '七股區', '南化鄉': '南化區', '山上鄉': '山上區', '安定鄉': '安定區', '新市鄉': '新市區', '新化鎮': '新化區', '永康市': '永康區', '左鎮鄉': '左鎮區', '龍崎鄉': '龍崎區', '歸仁鄉': '歸仁區', '關廟鄉': '關廟區', '仁德鄉': '仁德區', '安平區(海)': '安平區', '南區(海)': '東區', // Taichung '大甲鎮': '大甲區', '大安鄉': '大安區', '外埔鄉': '外埔區', '后里鄉': '后里區', '清水鎮': '清水區', '清水鎮(海)': '清水區', '和平鄉': '和平區', '神岡鄉': '神岡區', '石岡鄉': '石岡區', '豐原市': '豐原區', '梧棲鎮': '梧棲區', '梧棲鎮(海)': '梧棲區', '東勢鎮': '東勢區', '沙鹿鎮': '沙鹿區', '大雅鄉': '大雅區', '潭子鄉': '潭子區', '龍井鄉': '龍井區', '新社鄉': '新社區', '大肚鄉': '大肚區', '太平市': '太平區', '大里市': '大里區', '烏日鄉': '烏日區', '霧峰鄉': '霧峰區', // misc '員林鎮': '員林市', '中正區(海)': '中正區', '中山區(海)': '中山區', '仁愛區(海)': '仁愛區', '頭份鎮': '頭份市', }; const replaceName = name => { const wordReplaced = name.split('').map(word => wordReplace[word] || word).join(''); return nameReplace[wordReplaced] || wordReplaced; } return { county: replaceName(county), town: replaceName(town) }; }3b:T6fa,stripes = ` `3c:T77d,votes2018 = { const procReferendumResults = results => { const procRes = { 'summary': { 'yes': parseInt(results[0].同意票數.replace(/,/g, '')), 'no': parseInt(results[0].不同意票數.replace(/,/g, '')), 'invalid': parseInt(results[0].無效票數.replace(/,/g, '')), 'elligibleVoters': parseInt(results[0].投票權人數.replace(/,/g, '')), }, }; results.shift(); results.forEach(result => { if (!result.鄉鎮市區) { result.鄉鎮市區 = 'summary' } if (!procRes[result.縣市]) { procRes[result.縣市] = {}; } procRes[result.縣市][result.鄉鎮市區] = { 'yes': parseInt(result.同意票數.replace(/,/g, '')), 'no': parseInt(result.不同意票數.replace(/,/g, '')), 'invalid': parseInt(result.無效票數.replace(/,/g, '')), 'elligibleVoters': parseInt(result.投票權人數.replace(/,/g, '')), }; }); return procRes; }; const votes = await FileAttachment("votes2018.json").json(); votes['公投'] = { '第7案': procReferendumResults(await FileAttachment("q7.csv").csv()), '第8案': procReferendumResults(await FileAttachment("q8.csv").csv()), '第9案': procReferendumResults(await FileAttachment("q9.csv").csv()), '第10案': procReferendumResults(await FileAttachment("q10.csv").csv()), '第11案': procReferendumResults(await FileAttachment("q11.csv").csv()), '第12案': procReferendumResults(await FileAttachment("q12.csv").csv()), '第13案': procReferendumResults(await FileAttachment("q13.csv").csv()), '第14案': procReferendumResults(await FileAttachment("q14.csv").csv()), '第15案': procReferendumResults(await FileAttachment("q15.csv").csv()), '第16案': procReferendumResults(await FileAttachment("q16.csv").csv()), } return votes; }3d:T777,referendumQuestions = ({ 'referendum7': 'Do you agree “To reduce by 1% year by year” the production of Coal-Firing Thermal Power Plants?', 'referendum8': 'Do you agree to the establishment of an energy policy to “Stop construction and expansion of any Coal-Firing Thermal Power Plants or generator units (including the Shen Ao Power Plant currently under construction)”?', 'referendum9': 'Do you agree that the government should maintain the prohibition of agricultural imports and food from areas affected by the Fukushima March 11th Disaster? Specifically, those from Fukushima proper and the 4 surrounding districts and cities of Ibaraki, Tochigi, Gunma, and Chiba?', 'referendum10': 'Do you agree that marriage defined in The Civil Code should be restricted to the union between one man and one woman?', 'referendum11': 'Do you agree that the Ministry of Education should not implement the Enforcement Rules for Gender Equity Education Act in elementary and middle schools?', 'referendum12': 'Do you agree to the protection of the rights of same-sex couples in co-habitation on a permanent basis in ways other than changing of the Civil Code?', 'referendum13': 'Do you agree to the use of “Taiwan” when participating in all international sport competitions, including the upcoming 2020 Tokyo Olympics?', 'referendum14': 'Do you agree to the protection of same-sex marital rights with marriage as defined in the Civil Code?', 'referendum15': 'Do you agree in accordance with “Gender Equality Education Act” that national education of all levels should educate students on the importance of gender equality, emotional education, sex education, same-sex education?', 'referendum16': 'Do you agree to repeal Article 95 paragraph 1 of The Electricity Act: “The nuclear-energy-based power-generating facilities shall wholly stop running by 2025”?', })3e:[{"id":"7390a8986b2cb96a5156c2bc2cebc6d5a7fdd99a6b518b1a99a0baaf4d6878d39b53df287a8616b7f48ec639b511f3e974aa84301157f49dd6a892d9ed6f9ee5","href":"https://static.observableusercontent.com/files/7390a8986b2cb96a5156c2bc2cebc6d5a7fdd99a6b518b1a99a0baaf4d6878d39b53df287a8616b7f48ec639b511f3e974aa84301157f49dd6a892d9ed6f9ee5","name":"q15.csv","type":"text/csv","lastModified":1612145648104.066,"size":41368},{"id":"4303799d7d8029f3ba61ecb2c77ebb4ed59cdc990a90faebd25fdaf7dafa6d107e5375306e59c22cead5a0f7da7b67b153023853a26ea2bcead9268511605b16","href":"https://static.observableusercontent.com/files/4303799d7d8029f3ba61ecb2c77ebb4ed59cdc990a90faebd25fdaf7dafa6d107e5375306e59c22cead5a0f7da7b67b153023853a26ea2bcead9268511605b16","name":"q11.csv","type":"text/csv","lastModified":1612145648628.627,"size":40900},{"id":"0994f88e21df91de693773d1cd8cfab93d8c7f36c641b03f4b3ceb1513276074821bc8fc08d53138c0f502c86dab1f8b78ab4e2e299b615a03742a1e440c02df","href":"https://static.observableusercontent.com/files/0994f88e21df91de693773d1cd8cfab93d8c7f36c641b03f4b3ceb1513276074821bc8fc08d53138c0f502c86dab1f8b78ab4e2e299b615a03742a1e440c02df","name":"q16.csv","type":"text/csv","lastModified":1612145647901.206,"size":40904},{"id":"9e02e0248894c6bff32b97e40bbe0061cecada3d6db9a4dfe365ce21030e357e6fe0c536e803028b5275c38d866185ae7808f6cfb9fa8c8689310e1aee00779f","href":"https://static.observableusercontent.com/files/9e02e0248894c6bff32b97e40bbe0061cecada3d6db9a4dfe365ce21030e357e6fe0c536e803028b5275c38d866185ae7808f6cfb9fa8c8689310e1aee00779f","name":"q9.csv","type":"text/csv","lastModified":1612145648165.623,"size":40515},{"id":"74a646bc928fadeedfbf7b4b23dfcfcb8bd58687065df3b1a79f54af74799fa5553aab67d81a672ec73b9ca5123eaa6298b26b23ceb1efea9c6a0ab3a529dc27","href":"https://static.observableusercontent.com/files/74a646bc928fadeedfbf7b4b23dfcfcb8bd58687065df3b1a79f54af74799fa5553aab67d81a672ec73b9ca5123eaa6298b26b23ceb1efea9c6a0ab3a529dc27","name":"q13.csv","type":"text/csv","lastModified":1612145648028.808,"size":40869},{"id":"d241550af28721dcd25438bf8065bc519a2e39fe4fa1e0f12aad39feef8c789384bc5d23f31f2d012f0be6898bf41668cba48974d4e7c573cff570558bd607dd","href":"https://static.observableusercontent.com/files/d241550af28721dcd25438bf8065bc519a2e39fe4fa1e0f12aad39feef8c789384bc5d23f31f2d012f0be6898bf41668cba48974d4e7c573cff570558bd607dd","name":"q8.csv","type":"text/csv","lastModified":1612145648369.519,"size":40548},{"id":"4418c21ec2482d354fed818444d386326b8bb1f3755a33bada946cac855b9c378da8855a438e1836c5c65f81cb71d8d82695f1e6697381263df9461dd99abf92","href":"https://static.observableusercontent.com/files/4418c21ec2482d354fed818444d386326b8bb1f3755a33bada946cac855b9c378da8855a438e1836c5c65f81cb71d8d82695f1e6697381263df9461dd99abf92","name":"q10.csv","type":"text/csv","lastModified":1612145648626.604,"size":40634},{"id":"3306008cddca0b4099d184d61726faceb25d9d80b2df2b5f156a2bd9cfa422de1deb64da6f3b34b3875737b83091c33bf66f579b72ce56540013d79d91557238","href":"https://static.observableusercontent.com/files/3306008cddca0b4099d184d61726faceb25d9d80b2df2b5f156a2bd9cfa422de1deb64da6f3b34b3875737b83091c33bf66f579b72ce56540013d79d91557238","name":"q7.csv","type":"text/csv","lastModified":1612145648640.938,"size":40334},{"id":"5bfbec0ff104d44d11c8138ebdbe9f54d662873005ca7ce1c86504c4bfca162ab9c3e14a2a86c1ce08fd89986a20ebc3d4e469ca86f08e421818116002ee9a05","href":"https://static.observableusercontent.com/files/5bfbec0ff104d44d11c8138ebdbe9f54d662873005ca7ce1c86504c4bfca162ab9c3e14a2a86c1ce08fd89986a20ebc3d4e469ca86f08e421818116002ee9a05","name":"votes2018.json","type":"application/json","lastModified":1612145827210.203,"size":299504},{"id":"9e0e2a9366483653c95e8996565d09f0e5ed5403cbbcbc02217db280fe36e056295bde4f444666c053fee3f1d5f8b17e1efe5c12bfdddb2e36419f4adba54a9a","href":"https://static.observableusercontent.com/files/9e0e2a9366483653c95e8996565d09f0e5ed5403cbbcbc02217db280fe36e056295bde4f444666c053fee3f1d5f8b17e1efe5c12bfdddb2e36419f4adba54a9a","name":"votes2014.json","type":"application/json","lastModified":1612145877804.2,"size":141628},{"id":"dee40df9dd6866b1ad1ef1ced54969aa9761653da44c89db9af3187be1e0e8380057f68344b18a19276378143b8593a4e67aa241c428a495d493b4171243801b","href":"https://static.observableusercontent.com/files/dee40df9dd6866b1ad1ef1ced54969aa9761653da44c89db9af3187be1e0e8380057f68344b18a19276378143b8593a4e67aa241c428a495d493b4171243801b","name":"q14.csv","type":"text/csv","lastModified":1612145648422.894,"size":41335},{"id":"b02e549708a8c0ee84e0ddc37dad35befa4d6145cc1c59d71212ddd9e30e819932532c87c5c4a32e4c43f0d5b34b47ba021c8cf7a3787a7e5e9b6734cf4a6e67","href":"https://static.observableusercontent.com/files/b02e549708a8c0ee84e0ddc37dad35befa4d6145cc1c59d71212ddd9e30e819932532c87c5c4a32e4c43f0d5b34b47ba021c8cf7a3787a7e5e9b6734cf4a6e67","name":"q12.csv","type":"text/csv","lastModified":1612145648372.12,"size":40875}] 2f:{"title":"Taiwan Elections 2018 Visualized","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"taiwan = taiwanMap(300, 260, -0.6, -0.7, 3500, mayorFn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"kaohsiung = taiwanMap(300, 200, -0.3, -1.2, 8000, mayorFn, '高雄市')","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`\nAs we can see in this map, Han Guo-Yu succesfully flipped a large majority of the districts in Kaohsiung, giving him the nickname \"han wave\" (寒流, or maybe 韓流).\n\n## Taipei (台北)\n\nTaipei was another closely watched election for a separate reason. Similar to Han Guo-Yu's victory in Kaohsiung, Ko Wen-Jie (柯文哲) shocked the nation when he won the mayor's election in Taipei in 2014. Despite the apparent similarities between Ko Wen-Jie and Han Guo-Yu, Ko is notable additionally for being the first to win an election as Taipei's mayor as an independent.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"taipei = taiwanMap(300, 200, 0.6, 1, 25000, mayorFn, '臺北市')","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"md`\nLooking at the data, it's apparent that most referendum questions went nearly unanimously yes or no, with question number 13 regarding the olympics causing the closest vote.\n\n***Do you agree to the use of “Taiwan” when participating in all international sport competitions, including the upcoming 2020 Tokyo Olympics?***\n\nIf we take a closer look at the way that people voted on this question, you'll notice that the \"yes\" votes seem to cluster around Tainan, Kaohsiung, and Yilan. Despite the fact that large amounts of the electorate in Kaohsiung turned out in support of the KMT candidate Han Guo-Yu, it appears that many of them still voted for referendum question 13. One way to interpret this may not be that perspectives in Kaohsiung are becoming more favorable of KMT causes, but that Han Guo-Yu's populist approach successfully motivated the city.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"referendum13 = taiwanMap(300, 260, -0.6, -0.7, 3500, referendumFn(13, true))","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`\n# Turnout\n\nAnother very interesting factor to consider is how people turned out. There are many similarities between the 2014 local election and the recent 2018 local election. Just as the results of the 2018 election are seen as a backlash to Tsai Ing-Wen, the results of 2014 election can similarly be considered a backlash to the previous president Ma Ying-Jeou (馬英九). Although the overall voter turnout in this election was higher than 2014, it is apparent that different districts turned out differently.\n\n_(Purple districts indicate an increase in voter turnout compared to 2014, and red districts indicate a decrease in voter turnout. Voter turnout in this section is calculated by votes for mayor in 2014 and 2018)_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"turnout = taiwanMap(300, 260, -0.6, -0.7, 3500, turnoutFn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"md`\nWe can look at this graph as an indication of who turned out in each election. Accross the board, turnout was lower in Taipei, Tainan, and Taichung, while higher in Kaohsiung. As discussed above, we saw an increase in turnout in Kaohsiung likely because of Han Guo-Yu.\n\nOverall, 12,507,779 people voted in 2018 compared to 12,261,784 people in 2014. The increased turnout was most apparent in Kaohisung and New Taipei City. Here's another way to look at this data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"taiwanMap = (width, height, offsetX, offsetY, scale, detailsFn, highlightCounty) => {\n offsetX = offsetX + 0.85;\n \n const bboxCenter = bbox => [((bbox[0] + bbox[2]) / 2) + offsetX, ((bbox[1] + bbox[3]) / 2) + offsetY]; \n const projection = d3.geoMercator()\n .center(bboxCenter(topojson.bbox(tw)))\n .translate([width / 2, height / 2])\n .scale(scale);\n \n const path = d3.geoPath().projection(projection);\n\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n const details = svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(tw, tw.objects.towns).features)\n \n detailsFn(highlightCounty, details, path, svg);\n\n svg.append(\"path\")\n .datum(topojson.mesh(tw, tw.objects.towns, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 0.25)\n .attr(\"d\", path);\n \n svg.append(\"g\").html(stripes);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"numberWithCommas = (x) => {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"votes2014 = await FileAttachment(\"votes2014.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"totalVotes = Object.keys(votes2018.市長).reduce(\n (acc, county) => ({\n '2014': Object.keys(votes2014.市長[county]).filter(key => key !== \"summary\").reduce(\n (a, b) => votes2014.市長[county][b].reduce((a, b) => b.votes + a, 0) + a,\n 0\n ) + acc['2014'],\n '2018': Object.keys(votes2018.市長[county].summary).reduce(\n (a, b) => votes2018.市長[county].summary[b].votes + a,\n 0\n ) + acc['2018']\n }),\n {'2014': 0, '2018': 0}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"tw = d3.json(\"https://cdn.jsdelivr.net/npm/taiwan-atlas/towns-10t.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}