32:T415,vegalite({ "width": 600, "height": 120, data: {values: dataVar}, "mark": "area", "encoding": { "x": { "field": "Year", "type": "nominal", "axis": { "title": "Year", "grid": false } }, "y": { "field": "Value", "type": "quantitative", "axis": { "title": "% Variation", "grid": false, "format": ".2%" } }, "color": { "field": "Name", "type": "nominal", "scale": {"scheme": "viridis"}, "legend": null }, "row": { "field": "Name", "type": "nominal", "header": {"title": "Variation by variable"} }, "tooltip": [{"field": "Value", "type": "quantitative", "format": ".2%"}, {"field": "Year", "type": "nominal"}, {"field": "Name", "type": "nominal"} ] } })33:T517,md`### Conclusiones... - El indicador permite ver que el crecimineto del salario mínimo no logra equiparar al del precio de la papa, mostrando como cada año es un producto menos asequible. - Aun que el arroz es un producto más caro, la tendencia decreciente en su precio genera beneficios dado que se vuelve más asequible, además sí en promedio un kilo de arroz se consume en un hogar de 4 personas en 5 días, genera más ahorro cosumir más arroz que papa. - Una posible explicación al aumento del precio de la papa podría estar en la [disminución del consumo](https://sioc.minagricultura.gov.co/Papa/Documentos/002%20-%20Cifras%20Sectoriales/002%20-%20Cifras%20Sectoriales%20-%202018%20Febrero%20Papa.pdf) de la misma, ya que el sector podría estar buscando como compensar las perdidas que pueden enfrentar por la baja demanda. El bajo o alto incremento de salario solo se puede percibir si el precio de los productos que consumimos varía muy por encima del mismo, sí solo revisaramos esto en términos del arroz hoy podríamos decir que el salario ha incremetado significativamente, pero el escenario cambia completamente en el escenario de la papa. Es necesario que la políticas macroeconomicas busquen un buen punto de equilibrio, más en lo productos básicos para los colombianos.`34:T63e,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }35:T402,showTooltip = ( d, elementId ) => { console.log( d ) const chartCoords = document.getElementById( elementId ).getBoundingClientRect() let xPosition = d3.event.pageX + 20 let yPosition = d3.event.pageY + 20 xPosition = ( xPosition > ( chartCoords.right - 200 ) ) ? xPosition - 200 : xPosition yPosition = ( yPosition > ( chartCoords.bottom - 150 ) ) ? yPosition - 200 : yPosition const keys = keysByTotals.map( ( e, c ) => `

${ e }: ${ d3.format( ',.0f' )( d[ e ] ) }

` ) const tooltip = d3.select(".tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") .style("display", "inline-block") .html(`

${ d.date }

${ keys.join('') }

`) }36:T456,drawAxis = ( node, xScale ) => { node.append( 'g' ) .attr( 'class', 'axis' ) .attr( 'transform', `translate(0,${ height })` ) .call( d3.axisBottom( xScale ) .tickValues( uniqueDates.map( d => ( ( xScale == xLine ) ? new Date( d ) : d ) ) ) .tickFormat( d => d3.timeFormat( '%Y' )( ( d instanceof Date ) ? d : new Date( d ) ) ) ); const yGrids = []; for ( let i = 0; i < 4; i++ ) { const stepY = ( i / 3 * yMax ); yGrids.push( stepY ) } node.append("g") .attr("class", "grid") .attr( 'transform', `translate(-${ margin.left },0)` ) .call(d3.axisLeft( y ) .tickValues(yGrids) .tickSize( - width - margin.left ) .tickFormat('') ) .call(g => g.select(".domain").remove()) node.append( 'g' ) .attr( 'class', 'axis' ) .call( d3.axisLeft( yTicks ).tickValues( yGrids ).tickFormat( d=> ( ( d != 0 ) ? d3.format( '.3s' )( d ) : 0 ))) node.selectAll( '.domain' ).remove() node.selectAll( '.axis' ).selectAll( '.tick' ).select( 'line' ).remove() }37:T50a,drawBars = ( node ) => { const barGroup = node.append( 'g' ) .attr( 'class', 'bars' ) .selectAll( 'g' ) .data( data ) .enter().append( 'g' ) .attr( 'transform', d => `translate(${ x0( d.date ) },0)` ) .attr( 'class', 'bargroup' ) barGroup.append( 'rect' ) .attr( 'class', 'barfocus' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', x1.range()[1] ) .attr( 'height', height ) .attr( 'opacity', '0' ) barGroup.selectAll( '.bar' ) .data( d => keysByTotals.map( ( key, i ) => ( { key: key, value: d[ key ] } ) ) ) .enter().append( 'rect' ) .attr( 'class', 'bar' ) .attr( 'x', d => x1( d.key ) ) .attr( 'y', d => y( d.value ) ) .attr( 'width', x1.bandwidth() ) .attr( 'height', d => ( height - y( d.value ) ) ) .attr( 'fill', ( d, i ) => d3.interpolateViridis( z( i ) ) ) barGroup.append( 'rect' ) .attr( 'class', 'barmouse' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', x1.range()[ 1 ] ) .attr( 'height', height ) .attr( 'opacity', '0' ) .on( 'mouseover', handleMouseOverBarChart ) .on( 'mouseout', handleMouseOutBarChart ) const tooltip = d3 .select( 'body' ) .append( 'div' ) .attr( 'class', 'tooltip' ); }38:T95f,drawLines = ( node ) => { const dateSpaces = uniqueDates.map( ( d, i ) => { const xNow = xLine( new Date( d ) ) const xPrev = ( i >= 1) ? xLine( new Date( uniqueDates[ i - 1 ] ) ) : xLine( new Date( uniqueDates[ 0 ] ) ); const xNext = ( i < ( uniqueDates.length - 1 ) ) ? xLine( new Date( uniqueDates[ i + 1 ] ) ) : xLine( new Date( uniqueDates[ uniqueDates.length - 1 ] ) ); let xWidth = ( i === 0 ) ? ( xNext - xNow ) : ( xNow - xPrev ); let xStart = ( i === 0 ) ? 0 : xNow - ( xWidth / 2 ); xWidth = ( i === 0 || i === ( uniqueDates.length - 1 ) ) ? ( xWidth / 2 ) : xWidth; return { date: d, start: ( uniqueDates.length > 1 ) ? xStart : 0, width: ( uniqueDates.length > 1 ) ? xWidth : width, }; } ); const g = node.append("g") const focus = g.selectAll( '.focus-space' ) .data( dateSpaces ) .enter().append("g") .attr( 'class', 'focus-space' ) focus.append( 'line' ) .attr( 'class', 'focus-grid' ) .style( 'stroke', 'lightgray' ) .style( 'stroke-width', 1 ) .attr( 'x1', d => xLine( new Date( d.date ) ) ) .attr( 'y1', 0 ) .attr( 'x2', d => xLine( new Date( d.date ) ) ) .attr( 'y2', height ) .attr( 'opacity', '0' ) focus.append( 'rect' ) .attr( 'class', 'focus-g' ) .attr( 'x', d => d.start ) .attr( 'y', 0 ) .attr( 'width', d => d.width ) .attr( 'height', height ) .attr( 'opacity', 0 ) .on( 'mouseover', handleMouseOverLineChart ) .on( 'mouseout', handleMouseOutLineChart ) const series = g.selectAll(".line-g") .data( lineData ) .enter().append("g") .attr( 'class', 'line-g' ) series.append("path") .attr("fill", "none") .attr("stroke-width",pathRange( pathThickness ) ) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke", ( d, i ) => d3.interpolateViridis( z( i ) ) ) .attr("d", d => line( d.values ) ); series.selectAll("circle") .data( ( d, i ) => ( d.values.map( row => ( { ...row, i } ) ) ) ) .enter().append("circle") .attr("r", 3.5) .attr("fill", d => d3.interpolateViridis( z( d.i ) ) ) .attr("stroke", "#fff" ) .attr("cx", d => xLine( new Date( d.date ) ) ) .attr("cy", d => y( d.value ) ); }39:[] 30:{"title":"Con un salario minimo: Hoy puede comprar menos papa y más arroz que hace 6 años

","cells":[{"id":0,"value":"md`# Con un salario minimo: Hoy puede comprar menos papa y más arroz que hace 6 años

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`El arroz y la papa son productos altamente demandados en Colombia, se podría decir que en general todo colombiano consume alguno de estos productos a diario, ya que hacen parte de la cocina y la tradición del país así como de la dieta normal en el país... No es gratis que sean dos de los ingredientes del popular ACPM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`### So...\nEntender la evolución de los precios de estos dos productos y su relación con el salario mínimo nos ayuda a darnos una percepción más cercana de la econonomía del país, así que sí no entiende el IPC ( como muchos

) tranquilo, aun asi esto le ayudará a hablar de economía y entender algo de la misma

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Hablemos el mismo idioma...\n Vamos a comparar el precio promerio mensual del arroz y de la papa en terminos de Kilos

, porque en general es la presentación en la que se suelen vender y comprar estos productos.\n\n### Así que, primero entendamos la tendecia de los dos, cómo se han comportado en el tiempo\n

*Aclaración: Solo hay datos de los precios de la papa desde el 2011

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`####

Seleccione Kg o Lb

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof Kg_Lb = select([\"Kg\", \"Lb\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof drawLineChart = {\n const svg = d3.select(DOM.svg((width + margin.left + margin.right), (height + margin.top + margin.bottom)));\n const g = svg\n .attr( 'id', 'linechart' )\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n drawAxis( g, xLine );\n drawLines( g ); \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`#####

Solo un detalle.. Puede cambiar el ancho de las líneas

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof pathThickness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md` #### Ok ¿Que muestra esto?... \nAlgo importante, cómo es natural a lo largo del tiempo los precios tienen una tendencia creciente, pero lo que resalta acá es que sí se mira toda la tendencia del precio del arroz esta es creciente PERO desde el 2011 ha sido levemente decreciente

mientras que el precio de la papa en estos 6 años ha tenido una tendica al alza

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`####

Nerd moment..\nPara evaluar la tendecia de las variables, se calculó la pendiente de cada una:\n- Precio del arroz 1996 - 2018: 0.22\n- Precio del arroz 2012 - 2018: -0.02\n- Precio de la papa 2012 - 2018: 0.15\n\nLa pendiente muestra que tan aceledaro es el crecimiento de cada variable por cada periodo adicional, basados en esto se dieron las anteriores conclusiones.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`### Ahora, compararemos mejor los precios entre variables y por años\n

*Aclaración: Solo hay datos de los precios de la papa desde el 2011

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"viewof drawBarChart = {\n // only required for Observable to prevent multiple tooltips\n d3.selectAll(\".tooltip\").remove()\n //\n \n const svg = d3.select(DOM.svg((width + margin.left + margin.right), (height + margin.top + margin.bottom)));\n const g = svg\n .attr( 'id', 'barchart' )\n .append( 'g' )\n .attr( 'transform', `translate(${ margin.left },${ margin.top })`);\n drawAxis( g, x0 );\n drawBars( g );\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md` #### Tranquil@.. El objetivo de esta visualización no es decir que el arroz es más caro la papa\n

\n#### Así que lo que si es importante es...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`En el 2012 la relación entre el arroz y la papa era de 7.18, es decir con lo que se podía comprar un kilo de arroz se podían comprar 7 kilos de papa, pero lo que se ve es que esta brecha en promedio durante los 6 años se ha reducido en 11%, y si comparamos el 2018 con el 2012 se redujo en 62%, cayendo a 2.70, es decir en el 2018 con lo que se podrían comprar 1 kilo de papa aproximadamente se podrían comprar 3 kilos de arroz

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`### Bueno y ¿Cómo se comporta esto vs. el salario mínimo?\n

*Aclaración: Se utiliza el salario mínimo mensual por año

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`#### Primero, familiaricemonos con la tendencia del Salario mínimo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"vegalite({\n \"width\": 600,\n \"height\": 150,\n data: {values: dataSMM},\n \"mark\": {\"type\": \"line\", \"color\": \"#5F698D\", \"point\": {\"color\": \"#6791A7\"}},\n \"encoding\": {\n \"x\": {\n \"field\": \"date\", \"type\": \"temporal\",\n \"axis\": {\n \"title\": \"Year\",\n \"format\": \"%Y\"\n }\n },\n \"y\": {\n \"field\": \"SMM\", \"type\": \"quantitative\",\n \"axis\": {\n \"title\": \"Salario minimo mensual\",\n \"format\": \"$,.0f\"\n }\n \n },\n \"tooltip\": \n [{\"field\": \"date\", \n \"type\": \"temporal\",\n \"format\": \"%Y\"},\n {\"field\": \"SMM\", \n \"type\": \"quantitative\",\n \"format\": \"$,.0f\"},\n ]\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md` #### Ok, entendamos un poco...\nEl salario minimo naturalmente tiene una tendencia creciente año a año, presentando un crecmiento promedio del 8%, sin embargo, entre 1997 y el 2001, el crecimiento promedio por año fue del 15%

pero entre el 2012 y el 2018 el crecimiento promedio por año ha sido de 6%

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`#### Y ¿El salario mínimo varía igual que los precios de la papa y arroz?\n\n

*Aclaración: Comparación entre la variación anual de los precios y salario mínimo entre 2012 y 2018

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md` #### En resumén...\nEn promedio la varición anual de cada variable fué:\n- Precio papa: +18.96%

\n- Salario mínimo: +5.5%

\n- Precio arroz: -1.06%

\n\nPero, necesitamos un mejor indicador para entender la relación entre el salario mínimo y estos dos productos

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`### Así que finalmente...\nPresentamos un indicador que relaciona cuantas papas o paquetes de arroz se podrían comprar con el salario mínimo de cada año, para entender los cálculos es necesario tener en cuenta que:\n- Un kilo de papa contiene aproximadamen 10 papas de 100 gramos c/u\n- Un paquete de arroz entandar contiene 1 KG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`### Comparemos el número de papas vs. el número de paquetes de arroz que se podían comprar en promedio en un mes con el salario mínimo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`####

Author: Monica Marcela Carvajal\n

***[@MoniMCarva](https://twitter.com/monimcarva?lang=es) | [@MonicaCarvajal](http://linkedin.com/in/monica-marcela-carvajal-05802997) | [Information about the project](https://github.com/monicamarcelac/RicePapaSMM) |[Evaluation of the project in Tamara's framework](https://docs.google.com/presentation/d/1ay6CY-wQPsmj8Jx132GdpyvaZ86SmF2z9zVkqvLpRHM/edit?usp=sharing) ***

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`\n

***------------------------ Functions and other variables used ------------------------ ***

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"dataSMM = d3.csv(\"https://raw.githubusercontent.com/monicamarcelac/RicePapaSMM/master/Data/SMM_Year.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"dataVar = d3.csv(\"https://raw.githubusercontent.com/monicamarcelac/RicePapaSMM/master/Data/VarYear_RicePapaDate_Year.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"function select(config = {}) {\n let {\n value: formValue,\n title,\n description,\n submit,\n multiple,\n size,\n options\n } = config;\n if (Array.isArray(config)) options = config;\n options = options.map(\n o => (typeof o === \"object\" ? o : { value: o, label: o })\n );\n const form = input({\n type: \"select\",\n title,\n description,\n submit,\n getValue: input => {\n const selected = Array.prototype.filter\n .call(input.options, i => i.selected)\n .map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"handleMouseOverBarChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.barfocus' ).attr( \"opacity\", \"0.1\" )\n showTooltip( d, 'barchart' )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"handleMouseOutBarChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.barfocus' ).attr( 'opacity', '0' )\n \n const tooltip = d3.select(\".tooltip\").style(\"display\", \"none\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"handleMouseOverLineChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.focus-grid' ).attr( \"opacity\", \"1\" )\n const pivotData = data.find( e => e.date == d.date );\n showTooltip( pivotData, 'linechart' )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"handleMouseOutLineChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.focus-grid' ).attr( \"opacity\", \"0\" )\n const tooltip = d3.select(\".tooltip\").style(\"display\", \"none\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"pathRange = d3.scaleLinear().domain([0,100]).range([1,10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"x0 = d3.scaleBand()\n .domain( uniqueDates )\n .rangeRound([ 0, width ])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"x1 = d3.scaleBand()\n .domain(keysByTotals)\n .rangeRound([0, x0.bandwidth()])\n .padding(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"xLine = d3.scaleTime()\n .domain( [ new Date( uniqueDates[ 0 ] ), new Date( uniqueDates[ uniqueDates.length - 1 ] ) ] )\n .rangeRound([ 0, width ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"yMax = Math.round( 1.1 * d3.max(lineData, d => d3.max(d.values.map(date => date.value))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"y = d3.scaleLinear()\n .domain([0, yMax])\n .rangeRound([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"yTicks = d3.scaleLinear()\n .domain([0, yMax])\n .rangeRound([height + 12, 12])","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"z = d3.scaleOrdinal()\n .range(d3.range(0, 1.1, ( 100 / ( keysByTotals.length - 1 ) ) / 100))","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"line = d3.line()\n .x( d => xLine( new Date( d.date ) ) )\n .y( d => y( d.value ) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"uniqueDates = [ ...( new Set( lineData.reduce( ( accum, { values } ) => {\n values.forEach( ( { date } ) => accum.push( date ) );\n return accum;\n}, [] ) ) ) ]\n .sort( (a, b) => {\n return parseDate( a ) - parseDate( b );\n } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"keysByTotals = {\n const keys = data.columns.slice(1)\n return keys.map( key => {\n return {\n key,\n total: data.reduce( ( a, c ) => {\n a += c[key];\n return a;\n }, 0 )\n };\n } ).sort( (a, b) => {\n return b.total - a.total;\n } ).map( d => d.key )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"margin = ({top: 0, right: 0, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"lineData = keysByTotals.map( key => (\n {\n key,\n values: data.map( d => (\n {\n date: d.date,\n value: d[key],\n }\n ) )\n }\n) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"data = d3.csv( 'https://raw.githubusercontent.com/monicamarcelac/RicePapaSMM/master/Data/'+Kg_Lb+'.csv', (d, i, columns) => {\n for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];\n return d;\n } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"stylesheet = html`