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

Aproximadamente el 45% de los departamento han tenido en decrecimiento en la producción de cafe en los ultimos años

Aunque varios departamentos han tenido una mejora en su producción de cafe, entre ellos Antioquia siendo el departamento con mejor producción actualmente, cerca del 45% de los departamentos han visto disminuida su produccion de cafe con el paso del tiempo desde el 2016

Año a visualizar: 2016 2017 2018

`; const width = 750, height = 630, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 5, right: 30, bottom: 30, left: 125}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gDrawing = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing.append("text") .attr("class", "tooltip") .attr("x", -200) .style("fill", "black") .style("stroke", "black") .text("TOOLTIP"); 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)) .attr("transform", `translate(0, ${iheight})`); gDrawing.append("g") .call(d3.axisLeft(y)) function onMouseOver(d) { gDrawing.select(".tooltip") .attr("x", d3.mouse(this)[0] +10) .attr("y", d3.mouse(this)[1] + 2) .text(d['PRODUCCION']); } function onMouseOut(d) { gDrawing.select(".tooltip") .attr("x", -100) .text(""); } gDrawing.selectAll(".points") .data(ml) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", d => "p" + d["PERIODO"]) .attr("cx", d => x(d["PRODUCCION"]) ) .attr("cy", d => y(d["DEPARTAMENTO"])) .attr("r", 5 ) .style("fill", "green") .style("opacity", (d) =>{ if(d['PERIODO']=="2016") { return 0.9 } else if(d['PERIODO']=="2017") { return 0.6; } else{ return 0.3; }}); d3.select(target).select("#selectButton").on("change",function(){ var selectedOption = d3.select(this).property("value") if(selectedOption === "1") { gDrawing.selectAll(".p2016").style("opacity", 0.9); gDrawing.selectAll(".p2017").style("opacity", 0.6); gDrawing.selectAll(".p2018").style("opacity", 0.3); } else if(selectedOption === "2") { gDrawing.selectAll(".p2016").style("opacity", 1); gDrawing.selectAll(".p2017").style("opacity", 0.3); gDrawing.selectAll(".p2018").style("opacity", 0.1); } else if(selectedOption === "3") { gDrawing.selectAll(".p2016").style("opacity", 0.3); gDrawing.selectAll(".p2017").style("opacity", 1); gDrawing.selectAll(".p2018").style("opacity", 0.1); } if(selectedOption === "4") { gDrawing.selectAll(".p2016").style("opacity", 0.3); gDrawing.selectAll(".p2017").style("opacity", 0.1); gDrawing.selectAll(".p2018").style("opacity", 1); }}); return target; }47:[] 44:{"id":"babab58e0169603a","slug":"visualizacion-tarea-2","title":"Visualización tarea #2","thumbnail":"dac42869594d56216fbea78a07912ea679154dc6540a84797eaa9009f33bde62","access_level":"public","create_time":"$D2019-08-28T01:38:11.696Z","update_time":"$D2019-09-04T04:37:58.947Z","view_time":null,"first_public_time":"$D2019-09-10T23:05:48.708Z","has_unpublished_edits":null,"fork":{"id":"6b0ab5ef1cde2452","slug":"presupuesto-colombia","title":"Presupuesto Colombia","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"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":334,"publish_version":334,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualización tarea #2","cells":[{"id":172,"value":"md `# Visualización tarea #2`","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\n#### Atributos del dataset:\nel dataset cuenta con 11 atributos categoricos (Departamento, CÓD. DEP., CÓD. MUN., Municipo, Grupo de cultivo,Subgrupo de cultivo, Cultivo, Desagregación regional y/o Sistema productivo, Código cultivo, Nombre cientifico y Estado fisico producción ) y con 5 atributos son ordenados > cuantitativos > secuenciales (Área cosechada, Área sembrada, Producción, Rendimiento, periodo)\n#### Atributos usados:\nPara los atributos usados se utiliza una sumarización de la producción por el departamento y el periodo. Quedando los atributos Departamento (categorico), periodo (ordenado > cuantitativo > secuencial) y producción (ordenado > cuantitativo > secuencial) `","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##### Tarea Principal:\n* Tarea 1: Resumir la tendencia en producción de cafe por departamento en los ultimos 3 años (summarize, trends)\n##### Tareas Secundarias: \n* Tarea 2: Comparar la producción de cafe de los departamento en los ultimos 3 años (Compare, distribution)\n* Tarea 3: Comparar la produccion de cafe entre los departamentos en un año en especifico (Compare, one-attribute)`\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* Sobre el eje horizontal se ubica el atributo ordenado,cuantitativo,secuencial de producción\n* Se utiliza la marca del circulo y el canal de posicion (tanto en x como en y) para definir la correspondencia del departamento (atributo categorico) y la produccion por area (atributo cuantitativo, ordenado, secuencial)\n* Para distinguir entre los 3 años (2016, 2017, 2018) se usa una escala de color por saturación, debido a que es un atributo ordenado\n* El atributo categórico (Departamento) se ubica sobre la orientación vertical del plano.`","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
\nLa grafica me permite cumplir las tareas propuestas. Realiza un resumen de los datos, gracias a sus filtros permite hacer una comparación entre departamentos por año y permite visualizar la tendencia de la producción de cafe de cada departamento en los ultimos años. Aunque, debido a la naturaleza de los datos (el dataset) no se puede confirmar la unidad de medida utilizada en el eje X (Producción).\nPor otro lado, aunque es una violación a los principios color para atributos ordenados, usar colores como azul, verde y rojo podria ayudar a mejorar la visualización para diferenciar las marcas cuando estas se juntan. Ya que, por la naturaleza de estos colores se ve un mejor contraste entre las marcas.\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 Sembrada']);\n e['PRODUCCION'] += parseInt(d['Producción']);\n temp = true;\n }\n })\n if (!temp) {\n var departamento = {\n DEPARTAMENTO: d['DEPARTAMENTO'],\n PERIODO: parseInt(d['PERIODO']),\n SEMBRADA: parseInt(d['Área Sembrada']),\n COSECHADA: parseInt(d['Área Sembrada']),\n PRODUCCION: parseInt(d['Producción'])\n }\n resp.push(departamento)\n }\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"