30:T1208,chart = { //DEFINING THE SVG const height =450; const svg = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom)); //const svg= d3.create("svg").attr("viewBox", [0,0,width,height]); const gSvg = svg.append("g") //.attr("transform", "translate("+margin.left+","+margin.top+")"); ////////////////////////////////////////////////////////DEFINING BAR CHART const xScale = d3.scaleBand() .domain(data.map(d=> d.time)) .range([margin.left, width]); const yScale = d3.scaleLinear() .domain([0,d3.max(series, d => d3.max(d, d=> d[1]))]) .range([height-50,(height/2)+20]); const rects = gSvg.selectAll("g").data(series).enter() .append("g") .attr("fill", d => "#"+(d.key)); //Color is assigned here rects.selectAll("rect") .data(d => d) .join("rect") .attr("x", d => xScale(d.data.time)) .attr("y", d=> yScale(d[1])) .attr("height", d=> yScale(d[0]) - yScale(d[1])) .attr("width", xScale.bandwidth()) .attr("stroke", "black") .attr('stroke-width', 0.05); ///////////////////////////////////////////////////////ADDIGN THE AREA CHART const xline = d3.scaleLinear() .domain(d3.extent(emissionacc, d => d.day)) .range([margin.left, width]); const yline = d3.scaleLinear() .domain([0, d3.max(emissionacc, d => d.amount)]) .range([height/2 , margin.top]) const area = d3.area() // .curve(d3.curveNatural) .x(d => xline(d.day)) .y0(d => yline(0)) .y1(d => yline(d.amount)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yline)) .call(g => g.select(".domain")) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 20) .attr("text-anchor", "start") //.attr("font-weight", "bold") .attr("font-size", 12) .style("fill", "#bb0000") .text("Accumulated CO2 (kg)")); const xAxis = g => g .attr("transform", `translate(0,${(height/2)})`) .call(d3.axisBottom(xline) .ticks(width / 80) .tickSizeOuter(0)) svg.append("path") .datum(emissionacc) .attr("stroke-linejoin", "round") .attr("fill", "#bb0000") .attr("d", area) .attr("opacity", 0.5) svg.append("g") .call(xAxis) .style('font-size', '12') svg.append("g") .call(yAxis) .style('font-size', '12') .style('color', "#bb0000"); ///////////////////////////////////////////////////////ADDIGN THE SNOW const xt = d3.scaleLinear() .domain(d3.extent(weather, d => d.day)) .range([margin.left, width]); const yt = d3.scaleLinear() .domain([d3.min(weather, d => d.snow), d3.max(weather, d => d.snow)]) .range([height , height-50]) const area2 = d3.area() .curve(d3.curveNatural) .x(d => xt(d.day)) .y0(d => yt(0)) .y1(d => yt(d.snow)) svg.append("path") .datum(weather) .attr("stroke-linejoin", "round") .attr("fill", "lightblue") .attr("d", area2) .attr("opacity", 0.5) ///////////////////////////////////////////////////// ///ADDING TEXT svg.append('text') .text("My car ") .attr('x', 20) .attr('y', 100) .style('font-family', 'sans-serif') .style('font-size', 30) .style("fill", "#bb0000") .attr("opacity", 0.5) svg.append('text') .text("My view ") .attr('x', 20) .attr('y', 300) .style('font-family', 'sans-serif') .style('font-size', 30) .attr("opacity", 0.5) svg.append('text') .text("My snow ") .attr('x', 20) .attr('y', 450) .style('font-family', 'sans-serif') .style('font-size', 20) .attr("opacity", 0.5) ///////////////////////////////////////////////////////////////ADDING THE AIR tEMP const xa = d3.scaleLinear() .domain(d3.extent(weather, d => d.day)) .range([margin.left, width]); const ya = d3.scaleLinear() .domain([d3.min(weather, d => d.air), d3.max(weather, d => d.air)]) .range([height , height-50]) var linetemp = d3.line() .defined(d => !isNaN(d.day) && !isNaN(d.air)) .x(d => xa(d.day)) .y(d => ya(d.air)) svg.append("path") .datum(weather) .attr("stroke", function() {if(weather.air > 0) {return "lightyellow" } else {return "lightpurple" } }) .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", linetemp) return svg.node(); }31:T9f9,chart4 = { ///just changing from name to consecutive integers let datecode= function() {if(value<15) {return value+117} else { if(value>42) {return value+258} else { return value+186 } } }; //DEFINING THE SVG const height =600; const width= 1000; const band= 600; const svg = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom)); /// ADD BACKGROUND svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', height) .attr('width', width) .attr('fill', 'black') .style("opacity",0.1) /// ADD COLOR BARS const xScale = d3.scaleBand() .domain(data.map(function(d){return d.time;})) .range([0, width]); const yScale = d3.scaleLinear() .domain([0,d3.max(series, d => d3.max(d, d=> d[1]))]) .range([7*height/8,height/8]); const rects = svg.selectAll("g") .data(series2) .enter() .append("g") .attr("fill", d => "#"+(d.key)); //Color is assigned here rects.selectAll("rect") .data(d => d) .join("rect") .attr("x", (width/2)-(band/2)) .attr("y", d=> (yScale(d[1]))) .attr("height", d=> (yScale(d[0]) - yScale(d[1]))) .attr("width", band) .attr("stroke-width", 2) .style("opacity", function(d) { if(d.data.time == datecode(value) ) { return 0.8 } else {return 0.05} }) ///ADD LINES function randValue2(max) { return Math.random() * max; } svg.selectAll('line') .data(d3.range((emissionacc[value].amount)/2).map((d) => d) ) .join("line") .each(function(e) { var size = randValue2(height ); var sizew = randValue2(width ); d3.select(this) .attr('y1', size) .attr('y2', size) .attr('x1', sizew-200 ) .attr('x2', sizew+200) }) .attr('stroke', 'red') .style("opacity", function(d) { if(ch3=="toggle" ) { return 0} else {return 0.2} }) .style("stroke-dasharray", ("1, 1")) .attr("stroke-width", 5) ; return svg.node(); } 32:T5eb,weatherchart={ //DEFINING THE SVG const height =50 ; const svg = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom)); ///////////////////////////////////////////////////////ADDIGN THE SNOW const xt = d3.scaleLinear() .domain(d3.extent(weather, d => d.day)) .range([margin.left, width]); const yt = d3.scaleLinear() .domain([d3.min(weather, d => d.snow), d3.max(weather, d => d.snow)]) .range([height , margin.top]) const area2 = d3.area() .curve(d3.curveNatural) .x(d => xt(d.day)) .y0(d => yt(0)) .y1(d => yt(d.snow)) svg.append("path") .datum(weather) .attr("stroke-linejoin", "round") .attr("fill", "lightblue") .attr("d", area2) .attr("opacity", 0.5) ///////////////////////////////////////////////////////////////ADDING THE AIR tEMP const xa = d3.scaleLinear() .domain(d3.extent(weather, d => d.day)) .range([margin.left, width]); const ya = d3.scaleLinear() .domain([d3.min(weather, d => d.air), d3.max(weather, d => d.air)]) .range([height , margin.top]) var linetemp = d3.line() .defined(d => !isNaN(d.day) && !isNaN(d.air)) .x(d => xa(d.day)) .y(d => ya(d.air)) svg.append("path") .datum(weather) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", linetemp); return svg.node(); }33:T508,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }34:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.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 = typeof format === "function" ? 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(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:[{"id":"9ea48c8caff3181939ef5c0a85b303c1bf99af42ae5dc10d141a620165061dbb0895c5db430d77ecf8e0ba58dd40ce3605a6dc66f2d3566812c0477904361ab4","href":"https://static.observableusercontent.com/files/9ea48c8caff3181939ef5c0a85b303c1bf99af42ae5dc10d141a620165061dbb0895c5db430d77ecf8e0ba58dd40ce3605a6dc66f2d3566812c0477904361ab4","name":"weather.csv","type":"text/csv","lastModified":1616075405840.857,"size":580},{"id":"989dc21737a033aff949a3abf08343c49f55627437b8db78ffc55563b14cc5c84a0a99b3fb4b907b3ce342190fd10e875fe2733503b9e7f4dcd02ea380b46926","href":"https://static.observableusercontent.com/files/989dc21737a033aff949a3abf08343c49f55627437b8db78ffc55563b14cc5c84a0a99b3fb4b907b3ce342190fd10e875fe2733503b9e7f4dcd02ea380b46926","name":"Book18@3.csv","type":"text/csv","lastModified":1616072091503.005,"size":81480},{"id":"d704e1ad81736b8fc616ed22e5a86a55576f2537bd79f8a15117dc6aab2c6d2b3bb8169d937d685162d6b90e8301b028202de1a9640a49d3b30e753eab773df7","href":"https://static.observableusercontent.com/files/d704e1ad81736b8fc616ed22e5a86a55576f2537bd79f8a15117dc6aab2c6d2b3bb8169d937d685162d6b90e8301b028202de1a9640a49d3b30e753eab773df7","name":"emissionacc@3.txt","type":"text/plain","lastModified":1616063730399.787,"size":463},{"id":"5b6738555db81bf19287d773e0af99bddf38d8288257efa0ffb5298e42f0ed4adad4a0887805f63e947f1e0a6844e6c6edd24070c2f6b4a72b0a8e5822ed62d5","href":"https://static.observableusercontent.com/files/5b6738555db81bf19287d773e0af99bddf38d8288257efa0ffb5298e42f0ed4adad4a0887805f63e947f1e0a6844e6c6edd24070c2f6b4a72b0a8e5822ed62d5","name":"emissionacc@4.txt","type":"text/plain","lastModified":1616238056956,"size":463}] 2e:{"title":"DUAL","cells":[{"id":1714,"value":"md` # DUAL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"md` #60DAYCHALLENGE by Núria Altimir for MTVEC March 2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"chart2 = {\n const height =3000\n ; \n const svg = d3.select(DOM.svg(width, height));\n \n const gSvg = svg.append(\"g\")\n \n const yScale = d3.scaleBand()\n .domain(data.map(function(d){return d.time;}))\n .range([0,height]);\n const xScale = d3.scaleLinear()\n .domain([0,d3.max(series3, d => d3.max(d, d=> d[1]))])\n .range([0, width]); \n \nvar area = d3.area()\n.curve(d3.curveBasis)\n .y(d => yScale(d.data.time))\n .x0(d => xScale(d[0]))\n .x1(d => xScale(d[1]));\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(series3)\n .join(\"path\")\n .attr(\"fill\", d => \"#\"+(d.key))\n .attr(\"d\", area)\n .attr(\"stroke\", 10)\n\n \n svg.append('text')\n .text(\"DUAL \")\n .attr('x', 1)\n .attr('y', 3000-50) \n .style('font-family', 'sans-serif')\n .style('font-size', 300)\n .style(\"fill\", \"#bb0000\")\n .attr(\"opacity\", 1)\n\n\n \n \n return svg.node();\n }\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"md` This is daily collection of a photo from my window (view to the garden so that there is sky, canopy, and ground at the highest sun position) and daily collection of km driven with the family car. From each photo I extracted the 12 main colors and their proportion. The km are transformed into g of CO2 released (150kgCO2/Lfuel and 8Lfuel/km, as per car specification). Snow depth (cm) from Finnish Meteorological Institute.\nThe piece emphasises the contrast between the changing natural colors and the non-stopping accumulation of GHG in the atmosphere. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1818,"value":"md` SLIDE THROUGHT DAILY CHANGES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"viewof ch3 = checkbox({\n //description: \"Click to act\",\n options: [{ value: \"toggle\", label: \" OR CLICK TO ACT\" }],\n valuebutton: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"md`**Apendix**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"md`*1.Data manipulation* \n\ndata--> original data in csv from Attachment\n\nseries, series 2, series 3-->stacked layout of data with different att or data\n\ndata2-->data manipulated so that objects with 0 values are taken off (did not work)\n\ndata3,4 and 5-->same as data2 but it works\n\nseries3-->stacked layout of data5\n\nemissionacc-->data on emissions \n\nweather--> air temperature and snow depth\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"Book18@3.csv\").text(), d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"series = d3.stack() \n .keys(data.columns.slice(1)) \n //.offset(d3.stackOffsetWiggle)\n // .order(d3.stackOrderInsideOut)\n \n .order(d3.stackOrderNone)\n (data)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"series2 = d3.stack() \n .keys(data.columns.slice(1)) \n// .offset(d3.stackOffsetWiggle)\n //.order(d3.stackOrderDescending)\n \n .order(d3.stackOrderNone)\n (data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"data2 = data.map(d => Object.entries(d).map((e) => ( { [e[0]]: e[1] } )).sort((a,b) => b - a).slice(0,12))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"data3 = data.map(d => Object.entries(d).map((e) => ( { \"label\":e[0],\"value\": e[1] } )) .sort((a,b) => b.value - a.value).slice(0,13))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"data4= data3\n.map(d => d.map( (e)=> ( [{ [d[0].label]:d[0].value , \n [d[1].label]:d[1].value,\n [d[2].label]:d[2].value, \n [d[3].label]:d[3].value,\n [d[4].label]:d[4].value,\n [d[5].label]:d[5].value,\n [d[6].label]:d[6].value,\n [d[7].label]:d[7].value,\n [d[8].label]:d[8].value,\n [d[9].label]:d[9].value,\n [d[10].label]:d[10].value,\n [d[11].label]:d[11].value,\n [d[12].label]:d[12].value, \n \n }] ) ).slice(12))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"data5=data4 .map(d => d[0][0] );","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"series3 = d3.stack() \n .keys(data.columns.slice(1)) \n .order(d3.stackOrderReverse) \n // .order(d3.stackOrderNone)\n (data)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"emissionacc=Object.assign(d3.csvParse(await FileAttachment(\"emissionacc@4.txt\").text(), d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"weather=Object.assign(d3.csvParse(await FileAttachment(\"weather.csv\").text(), d3.autoType))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1589,"value":"md`*2. Testing charts* `\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"chart3 = {\n const height =100;\n const svg = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom));\n\n const gSvg = svg.append(\"g\")\n .attr(\"transform\", \"translate(\"+margin.left+\",\"+margin.top+\")\");\n \n const xScale = d3.scaleBand()\n .domain(data5.map(function(d){return d.time;}))\n .range([0, width]);\n \n \n const yScale = d3.scaleLinear()\n .domain([0,d3.max(series3, d => d3.max(d, d=> d[1]))])\n .range([height,0]);\n \n \n const rects = gSvg.selectAll(\"g\").data(series3).enter()\n .append(\"g\")\n .attr(\"fill\", d => \"#\"+(d.key)); //Color is assigned here \n \n rects.selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", (d, i) => xScale(d.data.time))\n .attr(\"y\", d=> yScale(d[1]))\n .attr(\"height\", d=> yScale(d[0]) - yScale(d[1]))\n .attr(\"width\", xScale.bandwidth())\n .attr(\"stroke\", \"black\") \n .attr('stroke-width', 0.05);\n \n\n \n\n return svg.node();\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1604,"value":"md`*3. Other elements* `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"//viewof value = html`` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"margin = ({top: 20, right:20, bottom:20, left: 150})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}