2d:null 2e:["$","title",null,{"children":"Colombian Presidential Primaries - 2022 | jupaneira | Observable"}] 33:Tda6,map = { var width = 1000, height = 950; var projection = d3.geoMercator() .center([-74, 4.5]) .scale(2700) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var svg = d3.create("svg") .attr("width", width ) .attr("height", height); return Promise.all([municipalities, election_results]).then( ([data, geo]) => {return ready(data, geo);} ); function ready(col_mpio, election_results) { const g = svg.append("g") g.attr("class", "municipalities") .selectAll("path") .data(topojson.feature(col_mpio, col_mpio.objects.col_mpio).features) .enter() .append("path") .attr("d", path) .style("fill", d => { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "")); if (municipio[0] === undefined) return "white" else if (municipio[0].Primero == "Petro") return "purple" else if (municipio[0].Primero == "Hernández") return "orange" else return "red" }) .on("mouseover",function(){ const target = d3.select(this) target.style("opacity","0.5") }) .on("mouseout",function(){ const target = d3.select(this) target.style("opacity","1") }) .append("title") .text(function (d) { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "")); return municipio[0].Municipio; }); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT != b.properties.NOMBRE_DPT; })) .attr("class", "state-boundary") .attr("d", path); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT == b.properties.NOMBRE_DPT && a !== b; })) .attr("class", "municipality-boundary") .attr("d", path); // ZOOM EFECTS function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); // ADDING LEGENDS svg.append("circle").attr("cx",100).attr("cy",500).attr("r", 6).style("fill", "purple") svg.append("circle").attr("cx",100).attr("cy",530).attr("r", 6).style("fill", "orange") svg.append("circle").attr("cx",100).attr("cy",560).attr("r", 6).style("fill", "red") svg.append("text").attr("x", 110).attr("y", 500).text("Gustavo Petro").style("font-size", "12px").attr("alignment-baseline","middle") svg.append("text").attr("x", 110).attr("y", 530).text("Rodolfo Hernández").style("font-size", "12px").attr("alignment-baseline","middle") svg.append("text").attr("x", 110).attr("y", 560).text("Federico Gutiérrez").style("font-size", "12px").attr("alignment-baseline","middle") //svg.append("text").attr("x", 350).attr("y", 30).attr('font-weight', 'bold').text("Colombian Presidential Elections - 2022").style("font-size", "20px") return svg.node(); } } 34:Td0f,map2 = { var width = 1000, height = 950; var projection = d3.geoMercator() .center([-74, 4.5]) .scale(2700) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var svg = d3.create("svg") .attr("width", width ) .attr("height", height); var gradient = d3.scaleLinear().domain([0,80]) .range(["white", "purple"]) return Promise.all([municipalities, election_results]).then( ([data, geo]) => {return ready(data, geo);} ); function ready(col_mpio, election_results) { const g = svg.append("g") g.attr("class", "municipalities") .selectAll("path") .data(topojson.feature(col_mpio, col_mpio.objects.col_mpio).features) .enter() .append("path") .attr("d", path) .style("fill", d => { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ""))[0]; var votos_petro = municipio["Primero"] == "Petro" ? municipio["Votos-Primero"] : municipio["Segundo"] == "Petro" ? municipio["Votos-Segundo"] : municipio["Tercero"] == "Petro" ? municipio["Votos-Tercero"] : municipio["Cuarto"] == "Petro" ? municipio["Votos-Cuarto"] : municipio["Quinto"] == "Petro" ? municipio["Votos-Quinto"] : municipio["Votos-Sexto"] var porcentaje = (votos_petro * 100 ) / municipio["Votos-Total"] return gradient(porcentaje) }) .on("mouseover",function(){ const target = d3.select(this) target.style("opacity","0.5") }) .on("mouseout",function(){ const target = d3.select(this) target.style("opacity","1") }) .append("title") .text(function (d) { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "")); return municipio[0].Municipio; }); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT != b.properties.NOMBRE_DPT; })) .attr("class", "state-boundary") .attr("d", path); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT == b.properties.NOMBRE_DPT && a !== b; })) .attr("class", "municipality-boundary") .attr("d", path); // ZOOM EFECTS function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); // ADDING LEGENDS svg.append("circle").attr("cx",100).attr("cy",500).attr("r", 6).style("fill", "purple") svg.append("text").attr("x", 110).attr("y", 500).text("Gustavo Petro").style("font-size", "12px").attr("alignment-baseline","middle") svg.append("g") .attr("transform", `translate(${610 + 120},20)`) .append(() => Legend(d3.scaleSequential([0, 100], ["white", "purple"]), { title: "Voto de Petro (%)" })); return svg.node(); } } 35:Td2c,map3 = { var width = 1000, height = 950; var projection = d3.geoMercator() .center([-74, 4.5]) .scale(2700) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var svg = d3.create("svg") .attr("width", width ) .attr("height", height); var gradient = d3.scaleLinear().domain([0,80]) .range(["white", "orange"]) return Promise.all([municipalities, election_results]).then( ([data, geo]) => {return ready(data, geo);} ); function ready(col_mpio, election_results) { const g = svg.append("g") g.attr("class", "municipalities") .selectAll("path") .data(topojson.feature(col_mpio, col_mpio.objects.col_mpio).features) .enter() .append("path") .attr("d", path) .style("fill", d => { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ""))[0]; var votos_rh = municipio["Primero"] == "Hernández" ? municipio["Votos-Primero"] : municipio["Segundo"] == "Hernández" ? municipio["Votos-Segundo"] : municipio["Tercero"] == "Hernández" ? municipio["Votos-Tercero"] : municipio["Cuarto"] == "Hernández" ? municipio["Votos-Cuarto"] : municipio["Quinto"] == "Hernández" ? municipio["Votos-Quinto"] : municipio["Votos-Sexto"] var porcentaje = (votos_rh * 100 ) / municipio["Votos-Total"] return gradient(porcentaje) }) .on("mouseover",function(){ const target = d3.select(this) target.style("opacity","0.5") }) .on("mouseout",function(){ const target = d3.select(this) target.style("opacity","1") }) .append("title") .text(function (d) { var municipio = election_results.filter(element => element.Municipio.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "") == d.properties.NOMBRE_MPI.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "")); return municipio[0].Municipio; }); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT != b.properties.NOMBRE_DPT; })) .attr("class", "state-boundary") .attr("d", path); g.append("path") .datum(topojson.mesh(col_mpio, col_mpio.objects.col_mpio, function(a, b) { return a.properties.NOMBRE_DPT == b.properties.NOMBRE_DPT && a !== b; })) .attr("class", "municipality-boundary") .attr("d", path); // ZOOM EFECTS function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); // ADDING LEGENDS svg.append("circle").attr("cx",100).attr("cy",500).attr("r", 6).style("fill", "orange") svg.append("text").attr("x", 110).attr("y", 500).text("Rodolfo Hernández").style("font-size", "12px").attr("alignment-baseline","middle") svg.append("g") .attr("transform", `translate(${610 + 120},20)`) .append(() => Legend(d3.scaleSequential([0, 100], ["white", "orange"]), { title: "Voto de Hernández (%)" })); return svg.node(); } } 36:[{"id":"627a486ce280eef8d0381ec3a7d2b7e97aefc8c6e961f5f68d1df2e27f1f49ae4882c2eda836faf3d9d22c63168aa52f848beed183279aa24477c11a81c1ef76","href":"https://static.observableusercontent.com/files/627a486ce280eef8d0381ec3a7d2b7e97aefc8c6e961f5f68d1df2e27f1f49ae4882c2eda836faf3d9d22c63168aa52f848beed183279aa24477c11a81c1ef76","name":"municipios_col@11.json","type":"application/json","lastModified":1655008390655.249,"size":5532499},{"id":"2cef290699a452b374c8f84313caaeafc6afd2894acfdd987ef3730b15400aa17abf8cdb505c0814cd8235b7b53a70d4fa37a1e5884cdc47176ece8ed7ed504d","href":"https://static.observableusercontent.com/files/2cef290699a452b374c8f84313caaeafc6afd2894acfdd987ef3730b15400aa17abf8cdb505c0814cd8235b7b53a70d4fa37a1e5884cdc47176ece8ed7ed504d","name":"elecciones@2.csv","type":"text/csv","lastModified":1655005064001.769,"size":200872}] 31:{"id":"4677b1da1f58c9a8","slug":"elections_2022","title":"Colombian Presidential Primaries - 2022","thumbnail":"a5412ec5540be0b02b19c8c18b487f0b6f11fcdb90ec55cd17422affa5efcc99","access_level":"public","create_time":"$D2022-06-10T04:33:59.154Z","update_time":"$D2022-06-21T19:23:11.150Z","view_time":null,"first_public_time":"$D2022-06-10T14:01:50.990Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ffdf0158c40bad91","login":"jupaneira","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18a10093b23d6b1b0f3ea8ec696e8dbc724b4a6524d4733bd33c0b5d18a7b351","tier":"starter_2024"},"version":296,"publish_version":296,"role":null,"authored":false,"authors":[{"type":"individual","id":"314832fa313c304c","login":"jupaneira","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18a10093b23d6b1b0f3ea8ec696e8dbc724b4a6524d4733bd33c0b5d18a7b351","tier":null}],"members":[{"type":"individual","id":"314832fa313c304c","login":"jupaneira","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18a10093b23d6b1b0f3ea8ec696e8dbc724b4a6524d4733bd33c0b5d18a7b351","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7ef97761aa5f6a2e","slug":"elections","title":"Elections","owner":{"id":"ffdf0158c40bad91","login":"jupaneira","name":""}},"type":"notebook","body":{"title":"Colombian Presidential Primaries - 2022","cells":[{"id":229,"value":"# Colombian Presidential Primaries - 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"## Intensity of the vote","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"CSS styles","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"Loading files","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"municipalities = FileAttachment(\"municipios_col@11.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"election_results = FileAttachment(\"elecciones@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"Loading d3","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"Importing dependencies","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"