31:T53c,graph = { const context = this ? this.getContext("2d") : DOM.context2d(width, height); context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.globalAlpha = 1; context.lineWidth = 3; for(let i=0; i -999 && data[i+1][4] > -999){ let date = new Date(data[i][0], data[i][1], 0); let date2 = new Date(data[i+1][0], data[i+1][1], 0); let color = d3.rgb(colorScale(i/data.length)); color.opacity = xPos(date).alpha * (0.333 + 2*i/(3*dataI)); context.beginPath(); context.strokeStyle = color; context.moveTo(xPos(date).x, scaleY(data[i][4]) + height/2); context.lineTo(xPos(date2).x, scaleY(data[i + 1][4]) + height/2); context.stroke(); } } context.font = "20px Helvetica"; context.fillText(data[dataI][0], width - 150 ,50); context.font = "18px Helvetica"; context.fillText(parseFloat(data[dataI][4]).toFixed(0) + " ppm", width - 150 ,90); context.font = "10px Helvetica"; context.fillText("CO2 concentration at Mauna Loa", 50 , 30); for(let i = 0; i<=30; i=i+5){ context.fillText(i, 50 , scaleY(i) + height/2); } for(let i=0; i2 concentration at Mauna Loa","cells":[{"id":0,"value":"md`# Monthly mean CO₂ concentration at Mauna Loa`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`A version of [this data visalization](https://twitter.com/JustTheSpring/status/1048711474468728832), now using the Mauna Loa CO₂ data from Mauna Loa (see data origin at the bottom).\n\nI have seen this data since I was kid, but always in another format (https://ca.wikipedia.org/wiki/Fitxer:CO2-Mauna-Loa.png). I wanted to look for other possibilities.\n\nI also made this visualization for temperature data: https://beta.observablehq.com/@rveciana/d3js-version-of-the-geom_seismogram-visualization\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"frontDayOfYear = dataI*12%365","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"dataI = {\n let i = 0;\n while (true) {\n i++;\n yield Promises.delay(50, i%data.length);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"xPos = function(date){\n let day = daysIntoYear(date) - frontDayOfYear;\n return {x: width/2 + (width/3) * Math.sin(2*Math.PI * day/365),\n alpha: 0.66 + Math.cos(2*Math.PI * day/365)/3}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"scaleY = d3.scaleLinear()\n .domain([420, 300])\n .range([-200, 200])","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"colorScale = d3.interpolateHsl(\"rgb(23, 72, 170)\", \"rgb(117, 18, 130)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`This part sets the month labels position and hides the ones that are at the *non visible* part of the year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"monthPos = function(i){\n let result = new Date('1999-12-31');\n result.setDate(result.getDate() + months[i].d);\n let iniInt = frontDayOfYear-92<0?frontDayOfYear-92+365:frontDayOfYear-92;\n let endInt = frontDayOfYear+91>365?frontDayOfYear+91-365:frontDayOfYear+91;\n let condition;\n if(endInt > iniInt){\n condition = iniInt<=months[i].d && endInt>=months[i].d;\n } else {\n condition = iniInt<=months[i].d || endInt>=months[i].d;\n }\n if (condition){\n return xPos(result).x;\n }\n return -9999;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"months = [{d:1, t:\"Jan\"}, {d:32, t:\"Feb\"}, {d:60, t:\"Mar\"}, {d:91, t:\"Apr\"}, {d:121, t:\"May\"}, {d:152, t:\"Jun\"}, {d:182, t:\"Jul\"}, {d:213, t:\"Aug\"}, {d:244, t:\"Sep\"}, {d:274, t:\"Oct\"}, {d:301, t:\"Nov\"}, {d:335, t:\"Des\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"daysIntoYear = function(date){\n return (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) - Date.UTC(date.getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"\nhexToRgbA = function(hex, alpha){\n //https://stackoverflow.com/questions/21646738/convert-hex-to-rgba\n var c;\n if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){\n c= hex.substring(1).split('');\n if(c.length== 3){\n c= [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c= '0x'+c.join('');\n return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+', '+alpha+')';\n }\n throw new Error('Bad Hex');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"width = Math.min(window.innerWidth, 600)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`The data object in an array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"data = {\n let outData =[];\n let lines = dataSource.split(\"\\n\");\n for(let i = 0; i < lines.length; i++){\n if(lines[i][0] !== '#'){\n outData.push(lines[i].split(/\\s\\s+/g).map(Number));\n }\n }\n \nreturn outData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}