31:T471,step2 = md` ## The Stack *"The stack" is a specific technical term in computing theory, but it has also developed a colloquial definition: "the tools in your toolbox."* * **[Observable](https://observablehq.com/):** The software that houses this entire notebook. It's essentially a way to make little "cells" on a webpage where you can run pieces of code in isolation. It's coded in something called Javascript, which is what underpins the entire internet. This makes it especailly suited for digital publishing, which I will explain in the final module. * **[Vega Lite](https://vega.github.io/vega-lite/) / [D3](https://d3js.org/):** The so-called "grammar" (i.e. the rules) that determine how the raw data turns into the visual. These rules can be nitpicky and is often where the most time and labor goes. * **[geoJSON](https://en.wikipedia.org/wiki/GeoJSON) / [topoJSON](https://github.com/topojson/topojson):** A specification for mapping things! All the lines, curves, and points on these maps are determined by this fancy format called GeoJSON. TopoJSON is just like GeoJSON, except the files are *way* smaller, so much better. `32:T51f,step3 = md`## The Approach I believe that this approach strikes the best balance between extensibility and ease-of-use. *D3* and *Vega* (the visualization "grammars") are the industry standards for web-native data visualization. They were developed by Mike Bostock, who pioneered the New York Times data initatives. With these tools, you can truly visualize anything, given a talented enough programmer (which I am not) and enough time (which I might not have). *Observable* (this notebook thing) is Bostock's newest initiative, and it's what makes the code so much more accessible. Now, any programmer can come to this webpage, edit the code as you direct them, and then you just click *embed* and it appears on your website. If you want to tweak something, the programmer can edit this notebook, and the embed updates automatically. It's like a Google Doc for data visualizations that automatically keeps itself synchronized over the entire internet! If your web developer knows *Vega Lite* and *D3* then I actually think it would be relatively easy to maintain this approach for your elections coverage. Again, those are the tools with the steepest learning curve (I only know the basics at the moment). Without some knowledge of these two tools, however, this approach might not be the most sustainable.`33:T8ed,step4 = md`## Background & Prep Work Before ever sitting down to write code or tinker with datasets, its important to understand the background of the topics being explored. The 2015 election was an incredibly complex exercise, but it was *not* chaotic. In fact, it was highly systematized. This systemaization makes it perfect for data visual analysis. ### Pyidaungsu Hluttaw (Assembly of the Union) Myanmar is a unitary presidential constitutional republic with a union system. The legislative power of the union is shared among the Pyidaungsu Hluttaw (the Assembly of the Union), consisting of the two equal houses (Hluttaws): Amyotha Hluttaw (the Upper House) and Pyithu Hluttaw (the Lower House), Region and State Hluttaws. According to the constitution the current electoral system used is First-Past-the-Post to elect the following representatives: ### Amyotha Hluttaw (Upper House) The Amyotha Hluttaw consists of representatitives from the 7 states and 7 regions, each with 12 seats. That means 168 of 224 seats (14 * 12 = 168) are up for election during an election cycle. According to the consistution, the remaining 56 seats (25%) are Army representatives selected by the Commander-in-Chief. ### Pyithu Hluttaw (Lower House) The Pyithu Hluttaw consists of one representative from each of the 330 national townships. That means 330 of 440 seats are up for election during an election cycle. According to the consistution, the remaining 110 seats (25%) are Army representatives selected by the Commander-in-Chief. ### Regional and State Hluttaws Two representatives are elected from each townships of the seven regions and seven states, making for a total of 644 seats. According to the constitution, ethnic races whose population constitutes more than 0.1% of the country’s population also get elected in 29 seats. One third of the seats of each Regions and States Hluttaw are Army Representatives selected by the Commander-in-Chief. ### [Pcodes (Place Codes)](https://www.themimu.info/place-codes) Pcodes are numerical signs given to each geographic designcation within Myanmar. They can represent states, districts, townships, and so on all the way down to village locations. They are crucial to making sure we can match election data with geographic areas.`34:T517,pyithuHluttaw = [ { id: "National League for Democracy", seats: 255, color: '#EC1B23' }, { id: "The Tatmadaw", seats: 110, color: '#BA0C0D' }, { id: "Kokang Democracy and Unity Party", seats: 30, color: '#FE6058' }, { id: "Wa Democratic Party", seats: 30, color: '#13A0E7' }, { id: "Union Solidarity and Development Party", seats: 30, color: '#006B31' }, { id: "Arakan National Party", seats: 12, color: '#EB1D27' }, { id: "Shan Nationalities League for Democracy", seats: 12, color: '#FFE63B' }, { id: "Vacant", seats: 7, color: '#e8e8e8' }, { id: "Ta'ang National Party", seats: 3, color: '#0CB8FF' }, { id: "Pa-O National Organisation", seats: 3, color: '#28166F' }, { id: "Zomi Congress for Democracy", seats: 2, color: '#CC232A' }, { id: "Lisu National Development Party", seats: 2, color: '#DC0723' }, { id: "Kachin State Democracy Party", seats: 2, color: '#1D7706' }, { id: "National Unity Party", seats: 1, color: '#CC0000' }, { id: "Mon National Party", seats: 1, color: '#CC232A' }, { id: "Independent", seats: 1, color: '#e8e8e8' } ]35:[{"id":"78a9da8d9308a7ca00359bfbd84095dc7625352bbb1ad23410ef2fdf81f0c2f3aeddd870c5741f305590f4a82ac9b2059dddde577826c568186b1c301e6b024f","href":"https://static.observableusercontent.com/files/78a9da8d9308a7ca00359bfbd84095dc7625352bbb1ad23410ef2fdf81f0c2f3aeddd870c5741f305590f4a82ac9b2059dddde577826c568186b1c301e6b024f","name":"sketch.png","type":"image/png","lastModified":1582604962560.206,"size":155278}] 2f:{"title":"Introduction","cells":[{"id":0,"value":"toc1 = md`# Introduction\n

Data journalism modules for Frontier's 2020 elections converage
\n\n 1. Welcome\n 2. The Stack\n 3. The Approach\n 4. Background & Prep Work\n 5. Asking the Right Question\n 6. Other Intro Tutorials\n

\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"step1 = md`## Welcome\nData visualization is very intimidating. Data is typically considered the realm of mathematicians and hackers, but it doesn't have to be. This five-part module will walk through the basics of the practice, using the 2015 Myanmar General Election for exmaples.\n\nThis tutorial explores only one of *many* ways to go about data visualization. Every method has advantages and drawbacks, and I will try to present that clearly as well. Follow along in this notebook, and make your own account as well. That will allow you to test examples for yourself and leave comments and questions!\n\nA little secret, this all works best using Google Chrome. I don't why, but it just does!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"md`## This vs. That`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"mermaid`\ngraph TD;\n Union-->State;\n State-->District;\n District-->Township;\n Township-->Town;\n Town-->Ward;\n Ward-->Village_Tract;\n Village_Tract-->Village;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"step5 = md`## Asking The Right Question\n\nThis is the most important part of any data analysis, period.*\n\n**Arguable, yes, but I'll stand by it.*\n\nThe reason I say so is because data analysis can become *very* unweildy *very* fast. Datasets can overwhelm and the visualization grammar often works is funny, unintuitive ways. Without a clear sense of *exactly* what insight one is hoping to produce, it's easy to get lost in the semantics.\n\nBefore ever even opening your computer, I'd recommend sketching out an image of the visualization and and answer to the following three questions.\n\n1. Why use a visual rather than text?\n2. What information does your visual display?\n2. What question does that visual answer?\n\n*It's usually best to show some one else the sketch and see if they can answer those three questions without your guidance. Then you know your visual is truly value added to your story.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2033,"value":"FileAttachment(\"sketch.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2025,"value":"md`\n\n1. One can quickly glance at how differnet townships, in different regions, were allocating their votes to different parties.\n2. Vote tallies, deliniated by party, for every township. Probably most suitable to use Lower House results.\n3. Which party was most dominant in which region?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"step6 = md`## Other Intro Tutorials\n\nThis [link](https://observablehq.com/@observablehq/user-manual?collection=@observablehq/introduction) takes you to the Holy Grail of *Observable* tutorials. Going through this list one-by-one is truly the best way to get up to speed with this software. Whenever the going gets tough, this is the place to come back to. Before we meet, just the first two lessons, [Five-minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction) and [Tutorial](https://observablehq.com/@observablehq/tutorial#step4) should do.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md` ---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"amyothaHluttaw = [\n {\n id: \"NLD\",\n seats: 135\n },\n {\n id: \"Military\",\n seats: 56\n },\n {\n id: \"USDP\",\n seats: 11\n },\n {\n id: \"ANP\",\n seats: 10\n },\n {\n id: \"SNLD\",\n seats: 3\n },\n {\n id: \"TNP\",\n seats: 2\n },\n {\n id: \"ZCD\",\n seats: 2\n },\n {\n id: \"Independent\",\n seats: 2\n },\n {\n id: \"MNP\",\n seats: 1\n },\n {\n id: \"NUP\",\n seats: 1\n },\n {\n id: \"PNO\",\n seats: 1\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"function mermaid(...args) {\n let div = document.createElement('div');\n div.innerHTML = mermaidPackage.mermaidAPI.render(\n `mermaid-render-element-${guid()}`,\n String.raw(...args)\n );\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"function guid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n var r = (Math.random() * 16) | 0,\n v = c == 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"mermaidPackage = require('https://bundle.run/mermaid')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5.15.0/dist/d3.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"import { radio, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"import { signinNote } from \"@tmcw/tutorial-utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}