3f:null 40:["$","title",null,{"children":"Visualización tarea #3 | Juan C. Sanguino | Observable"}] 46:T2009,chart = { const target = html`

Antioquia ha tenido un aumento en la producción de cafe en los ultimos años sin importar el decrecimiento en las hectareas sembradas y cosechadas

Antioquia ha tenido una aumento en la producción de cafe sin verse afectado por la disminución del area sembrada y cosechada en el departamento

Año a visualizar: 2016 2017 2018

Dpto.: Nombre del departamento Periodo: 20##
Sembrado(ha): 0 Cosechado(ha): 0 Producción(t): 0 Rendimiento: 0

`; const width = 500, height = 500, info = d3.select(target).select(".info"), svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 5, right: 10, bottom: 30, left: 123}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gDrawing = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const y = d3.scalePoint() .domain(d3.set(listaDep.map(d=> d)).values()) .range([iheight, 0]) .padding(0.5); const x = d3.scaleLinear() .domain([0,d3.max(ml, d => d['PRODUCCION'])]) .range([0, iwidth]) .nice(); gDrawing.append("g") .call(d3.axisBottom(x).tickFormat(d3.format(".2s"))) .attr("transform", `translate(0, ${iheight})`) .append("text") .text("Producción (t)") .attr("transform", `translate(${(iwidth/2)}, 25)`) .style("stroke","black") .style("font-size", "11px"); gDrawing.append("g") .call(d3.axisLeft(y)) function color(d){ if(d['PERIODO']=="2016") { return 1 } else if(d['PERIODO']=="2017") { return 0.5; } else{ return 0.2; } } function seleOpacity(val){ if(val === "1") { d3.selectAll(".p2016").style("opacity", 1); d3.selectAll(".p2017").style("opacity", 0.5); d3.selectAll(".p2018").style("opacity", 0.2); } else if(val === "2") { d3.selectAll(".p2016").style("opacity", 1); d3.selectAll(".p2017").style("opacity", 0.3); d3.selectAll(".p2018").style("opacity", 0.1); } else if(val === "3") { d3.selectAll(".p2016").style("opacity", 0.3); d3.selectAll(".p2017").style("opacity", 1); d3.selectAll(".p2018").style("opacity", 0.1); } else if(val === "4") { d3.selectAll(".p2016").style("opacity", 0.3); d3.selectAll(".p2017").style("opacity", 0.1); d3.selectAll(".p2018").style("opacity", 1); } } function onMouseOver(d) { var nombre = "."+"p" + d["PERIODO"] +"d"+ d["COD"] d3.selectAll(nombre).style("fill","red") .style("opacity","0.8") info.select("#Dpto").text(d.DEPARTAMENTO) info.select("#per").text(d.PERIODO) info.select("#semb").text(d.SEMBRADA) info.select("#cose").text(d.COSECHADA) info.select("#produ").text(d.PRODUCCION) info.select("#ren").text((d.RENDIMIENTO).toFixed(3)); } function onMouseOut(d) { var nombre = "."+"p" + d["PERIODO"] +"d"+ d["COD"] d3.selectAll(nombre).style("fill","green") seleOpacity(d3.select("#selectButton").property("value")) info.select("#Dpto").text("Nombre del departamento") info.select("#per").text("20##") info.select("#semb").text("0") info.select("#cose").text("0") info.select("#produ").text("0") info.select("#ren").text("0"); } //Se dibujan puntos para la producción gDrawing.selectAll(".points") .data(ml) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", d => "p" + d["PERIODO"] +"d"+ d["COD"] + " " + "p" + d["PERIODO"] ) .attr("cy",(d)=>{ if(d['PERIODO']=="2016") { return y(d["DEPARTAMENTO"]) + 1.5; } else if(d['PERIODO']=="2017") { return y(d["DEPARTAMENTO"]); } else{ return y(d["DEPARTAMENTO"]) -1.5; } }) .attr("cx", d => x(d["PRODUCCION"]) ) .attr("r", 5 ) .style("fill", "green") .style("opacity",d =>color(d)); //=============================================================================================== //=======GRAFICA DERECHA========================================================================= //=============================================================================================== const width2 = 800, height2 = 500, margin2 = ({top: 5, right: 500, bottom: 50, left: 45}) const svg2 = d3.select(target).select("#chart2") .append("svg") .attr("width", width2) .attr("height", height2); const gDrawing2 = svg2.append("g") .attr("transform", `translate(${margin2.left}, ${margin2.top})`); const y2 = d3.scaleSqrt() .domain([0, d3.max(ml, d => d.SEMBRADA ) ]) .range([iheight, 0]) .nice(); const x2 = d3.scaleSqrt() .domain([0, d3.max(ml, d => d.SEMBRADA ) ]) .range([0, iwidth]) .nice(); gDrawing2.append("g") .call(d3.axisBottom(x2).tickFormat(d3.format(".2s"))) .attr("transform", `translate(0, ${iheight})`) .append("text") .text("Area sembrada (ha)") .style("stroke","black") .attr("transform", `translate(-26, -${(iheight/2)-10}) rotate(-90)`) .style("font-size", "11px"); gDrawing2.append("g") .call(d3.axisLeft(y2).tickFormat(d3.format(".2s"))) .append("text") .text("Area cosechada (ha)") .style("stroke","black") .attr("transform", `translate(${(iwidth/2)+40}, ${(iheight+28)})`) .style("font-size", "11px"); gDrawing2.selectAll(".points2") .data(ml) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", d => "p" + d["PERIODO"] + "d"+ d["COD"]+ " " + "p" + d["PERIODO"]) .attr("cy", d => y2(d["SEMBRADA"]) ) .attr("cx", d => x2(d["COSECHADA"]) ) .attr("r", 5 ) .style("fill", "green") .style("opacity", d=>color(d)); //Se dibujan puntos para la producción ////=========================================================== //funcion de filtro d3.select(target).select("#selectButton").on("change",function(){ var selectedOption = d3.select(this).property("value") seleOpacity(selectedOption); }); return target; }47:[] 44:{"id":"5bcaaff2f9dbd686","slug":"visualizacion-tarea-3","title":"Visualización tarea #3","thumbnail":"fa827bac16813c95e1465d8d824a55e44708d848063b5fad71370680fe21b4d2","access_level":"public","create_time":"$D2019-09-16T13:07:17.604Z","update_time":"$D2019-10-15T14:52:19.541Z","view_time":null,"first_public_time":"$D2019-09-17T16:11:24.553Z","has_unpublished_edits":null,"fork":{"id":"babab58e0169603a","slug":"visualizacion-tarea-2","title":"Visualización tarea #2","owner":{"id":"561cbfd91d4c293b","login":"jcsanguino10","name":"Juan C. Sanguino"}},"stars":0,"starred":false,"owner":{"type":"team","id":"561cbfd91d4c293b","login":"jcsanguino10","name":"Juan C. Sanguino","avatar_url":"https://avatars-next.observableusercontent.com/dacd41d39352452a13633fd532154eb8a7d45de6120eb8ef7f3ab0d8a61f7c10","tier":"starter_2024","bio":"","following":false},"version":640,"publish_version":640,"role":null,"authored":false,"authors":[{"type":"individual","id":"000c0bbe77eaa5ff","login":"jcsanguino10","name":"Juan C. Sanguino","avatar_url":"https://avatars-next.observableusercontent.com/dacd41d39352452a13633fd532154eb8a7d45de6120eb8ef7f3ab0d8a61f7c10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"000c0bbe77eaa5ff","login":"jcsanguino10","name":"Juan C. Sanguino","avatar_url":"https://avatars-next.observableusercontent.com/dacd41d39352452a13633fd532154eb8a7d45de6120eb8ef7f3ab0d8a61f7c10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualización tarea #3","cells":[{"id":172,"value":"md `# Visualización tarea #3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md `## Usuarios
\n Para la comunidad en general y todos aquellos interesados por la producción de cafe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md `## What?

\n#### Fuente de los datos:
\nEl dataset usado es un dataset temporal,debido a que se hace uso del periodo como una de las variables en la visualización.
\nCuenta con 1800 Datos.\n#### Atributos del dataset:\nel dataset cuenta con 1 atributos categoricos (Departamento) y con 5 atributos son ordenados > cuantitativos > secuenciales (Área cosechada, Área sembrada, Producción, Rendimiento, periodo) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md `## Why?

\n### Tareas:
\n\n##### Tareas Principales:\n* Tarea 1: Resumir la tendencia en areas cosechadas, areas sembradas y la producción de cafe por departamento en los ultimos 3 años (present, trends)\n* Tarea 2: Hallar el rendimiento (entendido como produccion / area cosechada) area cosechada, area sembrada y la produccion por departamento de un año en concreto (derive many-atributte)\n\n##### Tareas Secundarias: \n* Tarea 3: Comparar la tendencia de produccion de cafe contra la tendencia en area cosechada y area sembrada de un departamento en especifico (Compare-trends)\n* Tarea 4: Comparar el area cosechada y el area sembrada de los departamentos en un año en especifico (Compare, one-attribute)\n* Tarea 5: Comparar la producción de cafe de los departamento en los ultimos 3 años (Compare, distribution)\n\n `\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md `## How? \n\n#### Marcas:\n\n* Puntos.\n\n#### Canales:\n\n##### En modismo izquierdo:\n* Posición horizontal -> Departamento (Categorico) ->separate\n* Posición vertical -> Producción (ordenado>cuantitativo>secuencial) -> Express.
\nNote que las marcas son desplazadas levemente hacia arriba o hacia abajo del punto origen. Aunque esto va en contra del principio de expresividad, ayuda a lidiar con la oclusion de las marcas, las cuales pueden verse afectadas debido que se usa la opacidad para representar el atributo ordenado del periodo, generando que la oclusion de dos marcas produzca un malentendido del rango al que pertence el valor\n\n##### En modismo derecho:\n* Posición vertical -> Area Sembrada (ordenado>cuantitativo>secuencial) -> Express\n* Posición horizontal -> Area Cosechada (ordenado>cuantitativo>secuencial) -> Express\n\n##### En general\n* Para el ambos modismos se uso la opacidad para identificar el atributo temporal del periodo\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md `\n\n## Conclusiones
\n\nComo se puede observar en la visualización, factores como la cantidad de area sembrada o cosechada de un departamento no se encuentran fuertemente ligadas a la producción de este, como en el caso de Antioquia. Lo cual, nos hace reflexionar que existen otras maneras de aumentar la producción de los cultivos de cafe en los diferentes departamentos y a su vez reducir las hectareas empleadas para la siembra y cosecha de este. Se deberia realizar estudios para evaluar dichos factores y ver la viabilidad de replicarlos en los diferentes departamentos\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csv(\"https://raw.githubusercontent.com/jcsanguino10/VisualAnalytics/master/DatosLimpios.csv\")\n .then(data => {\n return data;\n }); \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"ml = {\n var resp = [];\n data.forEach(d => {\n var temp = false;\n resp.forEach(e => {\n if (d['DEPARTAMENTO'] == e['DEPARTAMENTO'] && parseInt(d['PERIODO']) == e['PERIODO']) {\n e['SEMBRADA'] += parseInt(d['Área Sembrada']);\n e['COSECHADA'] += parseInt(d['Área Cosechada']);\n e['PRODUCCION'] += parseInt(d['Producción']);\n temp = true;\n }\n })\n if (!temp) {\n var departamento = {\n COD: parseInt(d[\"CÓD. DEP.\"]),\n DEPARTAMENTO: d['DEPARTAMENTO'],\n PERIODO: parseInt(d['PERIODO']),\n SEMBRADA: parseInt(d['Área Sembrada']),\n COSECHADA: parseInt(d['Área Cosechada']),\n PRODUCCION: parseInt(d['Producción']),\n RENDIMIENTO : 0\n }\n resp.push(departamento)\n }\n })\n resp.forEach(e=>{\n e.RENDIMIENTO = e.PRODUCCION/ e.COSECHADA;\n })\n return resp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"listaDep ={\n var temp = []\n data.forEach(d =>{\n var bol = false\n temp.forEach(e=>{\n if(d['DEPARTAMENTO'] == e){\n bol = true\n }\n })\n if(!bol)\n {\n temp.push(d['DEPARTAMENTO'])\n }\n })\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"