2c:null 2d:["$","title",null,{"children":"Cartogram - Colombian Presidential Elections 2022 | jupaneira | Observable"}] 32:T854,map2 = { var width = 1000, height = 950; var petro_gradient = d3.scaleLinear().domain([40,90]) .range(["white", "purple"]) var rodolfo_gradient = d3.scaleLinear().domain([40,90]) .range(["white", "orange"]) var projection = d3.geoMercator() .center([-74, 4.5]) .scale(3000) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var svg = d3.create("svg") .attr("width", width ) .attr("height", height); const g = svg.append("g") g.attr("class", "dptos") .selectAll('path') .data(normal_dptos.features) .enter() .append('path') .attr('d', path) .style("fill", d => { var candidate = dptos.features.filter(e => e["properties"]["NOMBRE_DPT"] == d["properties"]["NOMBRE_DPT"])[0]["properties"]["gano"]; if (candidate["quien"] == "GP"){ return petro_gradient(candidate["cuanto"]) } else { return rodolfo_gradient(candidate["cuanto"]) } }) .on("mouseover",function(){ const target = d3.select(this) target.style("opacity","0.8") }) .on("mouseout",function(){ const target = d3.select(this) target.style("opacity","1") }) .append("title") .text(function (d) { var candidate = dptos.features.filter(e => e["properties"]["NOMBRE_DPT"] == d["properties"]["NOMBRE_DPT"])[0]["properties"]["gano"]; return d["properties"]["NOMBRE_DPT"].concat(" - ", candidate["cuanto"].concat("", "%"))} ); svg.append("g") .attr("transform", `translate(${600 + 120},20)`) .append(() => Legend(d3.scaleSequential([40, 90], ["white", "purple"]), { title: "Voto de Petro (%)" })); svg.append("g") .attr("transform", `translate(${600 + 120},120)`) .append(() => Legend(d3.scaleSequential([40, 90], ["white", "orange"]), { title: "Voto de Hernández (%)" })); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom() .scaleExtent([0,10]) .on("zoom", zoomed); svg.call(zoom); return svg.node(); } 33:T761,map = { var width = 1000, height = 950; var petro_gradient = d3.scaleLinear().domain([40,90]) .range(["white", "purple"]) var rodolfo_gradient = d3.scaleLinear().domain([40,90]) .range(["white", "orange"]) var projection = d3.geoMercator() .center([-74, 4.5]) .scale(3000) .translate([width / 2, height / 2]); var path = d3.geoPath(projection); var svg = d3.create("svg") .attr("width", width ) .attr("height", height); const g = svg.append("g") g.attr("class", "dptos") .selectAll('path') .data(dptos.features) .enter() .append('path') .attr('d', path) .style("fill", d => { if (d["properties"]["gano"]["quien"] == "GP"){ return petro_gradient(d["properties"]["gano"]["cuanto"]) } else { return rodolfo_gradient(d["properties"]["gano"]["cuanto"]) } }) .on("mouseover",function(){ const target = d3.select(this) target.style("opacity","0.8") }) .on("mouseout",function(){ const target = d3.select(this) target.style("opacity","1") }) .append("title") .text(function (d) { return d["properties"]["NOMBRE_DPT"].concat(" - ", d["properties"]["gano"]["cuanto"].concat("", "%"))} ); svg.append("g") .attr("transform", `translate(${600 + 120},20)`) .append(() => Legend(d3.scaleSequential([40, 90], ["white", "purple"]), { title: "Voto de Petro (%)" })); svg.append("g") .attr("transform", `translate(${600 + 120},120)`) .append(() => Legend(d3.scaleSequential([40, 90], ["white", "orange"]), { title: "Voto de Hernández (%)" })); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } const zoom = d3.zoom() .scaleExtent([0,10]) .on("zoom", zoomed); svg.call(zoom); return svg.node(); } 34:[{"id":"94e2a0b9a552784ea052d0273046451ddd7a517c9ddf2566ffb1e2723d8bdfa841e1d97eea8a4dac404ce1c0b0b3d94ffb19a181fa82a52d0516112e8a5a58a5","href":"https://static.observableusercontent.com/files/94e2a0b9a552784ea052d0273046451ddd7a517c9ddf2566ffb1e2723d8bdfa841e1d97eea8a4dac404ce1c0b0b3d94ffb19a181fa82a52d0516112e8a5a58a5","name":"population@5.geojson","type":"application/geo+json","lastModified":1656100876244.472,"size":5637728},{"id":"dd29b21d0184ff6bbb5c5d0131f4fd0cc4d7b7a29e4e19bb0cca44c283a38d8c906f5b1d3a1261ec8a413f62e35f4ba369cf04a5403846e8f1f4e37379ec85e0","href":"https://static.observableusercontent.com/files/dd29b21d0184ff6bbb5c5d0131f4fd0cc4d7b7a29e4e19bb0cca44c283a38d8c906f5b1d3a1261ec8a413f62e35f4ba369cf04a5403846e8f1f4e37379ec85e0","name":"normal_dptos@1.geojson","type":"application/geo+json","lastModified":1656105430729.012,"size":1519302}] 30:{"id":"611cf5a391468080","slug":"segunda_cartogram","title":"Cartogram - Colombian Presidential Elections 2022","thumbnail":"523aa02f1762082b3ee66e3a0b80b3fed62a504831d2f3e48bd434a547d8fa5d","access_level":"public","create_time":"$D2022-06-23T14:05:15.807Z","update_time":"$D2022-06-29T15:02:34.450Z","view_time":null,"first_public_time":"$D2022-06-25T21:17:15.325Z","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":175,"publish_version":175,"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,"subscribed":null,"forks":0,"collection":{"id":"7ef97761aa5f6a2e","slug":"elections","title":"Elections","owner":{"id":"ffdf0158c40bad91","login":"jupaneira","name":""}},"type":"notebook","body":{"title":"Cartogram - Colombian Presidential Elections 2022","cells":[{"id":153,"value":"# Cartogram - Colombian Presidential Elections 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":159,"value":"### Intensity of the vote for each candidate in each department ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"### Intensity of the vote for each candidate in each department \n### Each department is resized proportional to its population size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"CSS styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":102,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":168,"value":"Loading files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"dptos = FileAttachment(\"population@5.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"normal_dptos = FileAttachment(\"normal_dptos@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"Loading d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"Importing dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"