2f:T50f,canvas4 = { var c = this ? this.getContext('2d') : DOM.context2d(width, height); var canvas = c.canvas; var i = this && this.i || 0; while (playing) { c.fillStyle = plot3Params.backgroundColor; c.fillRect(0, 0, width - 0 * 2, height - 0 * 2); c.fillStyle = "black"; c.font = '25px Verdana'; var countryTextWidth = c.measureText(selectedCountryName).width c.fillText("In " , (canvas.width/2) - 350, height/2 - 80); c.fillText("emitted" , (canvas.width/2) - 350, height/2 + 40); c.fillText("Million tonnes of CO2 equivalents" , (canvas.width/2) - 350, height/2 + 100); meshes3.forEach((mesh) => { mesh.update(c, width, height); debugger }); c.beginPath(); c.fillStyle = "#FFBD39"; c.font = 'bold 30px Verdana'; var textYearString = selectedYear, textYearWidth = c.measureText(textYearString).width; c.fillText(textYearString , (canvas.width/2) - 300, height/2 - 80); c.fillText(selectedCountryName , (canvas.width/2) - 350, height/2 - 20); c.fillStyle = "#8367F4"; c.fillText(yearCountryEmissions.toFixed(3), (canvas.width/2) - 230, height/2 + 40); c.restore(); yield canvas; } yield canvas; } 30:T722,class Agent2 { constructor(x, y, color, size, boundaries, velocity, opacity, selected = false) { this.pos = new Vector(x, y); this.vel = new Vector( util.random.range(-1, 1) * velocity, util.random.range(-1, 1) * velocity ); this.size = size; this.boundaries = boundaries; this.radius = Math.abs(this.size); this.color = color; this.opacity = opacity; this.selected = selected; } bounce(width, height) { if (this.pos.x <= 0 || this.pos.x >= width) this.vel.x *= -1; if (this.pos.y <= 0 || this.pos.y >= height) this.vel.y *= -1; } wrap(width, height) { if (this.pos.x + this.radius <= this.boundaries[0]) this.pos.x = this.boundaries[2] + this.radius -2; else if (this.pos.x >= this.boundaries[2] + this.radius) this.pos.x = this.boundaries[0] - this.radius + 2; if (this.pos.y + this.radius <= this.boundaries[1]) this.pos.y = this.boundaries[3] + this.radius -2; else if (this.pos.y >= this.boundaries[3] + this.radius) this.pos.y = this.boundaries[1] - this.radius + 2; } update() { this.pos.x += this.vel.x; this.pos.y += this.vel.y; } draw(context) { context.save(); context.translate(this.pos.x, this.pos.y); context.lineWidth = 4 * this.size; context.beginPath(); context.globalAlpha = this.opacity; context.strokeStyle = this.color; context.arc(0, 0, this.radius, 0, Math.PI * 2); context.fillStyle = this.color; context.fill(); if (this.size < 10 && this.selected) { context.beginPath(); context.strokeStyle = "red"; context.lineWidth = 1; context.arc(0, 0, 60, 0, Math.PI * 2); context.stroke(); } context.restore(); } }31:T727,class Agent { constructor(x, y, color, size, boundaries, velocity, opacity) { this.pos = new Vector(x, y); this.vel = new Vector( util.random.range(-1, 1) * velocity, util.random.range(-1, 1) * velocity ); this.size = size; this.boundaries = boundaries; this.radius = Math.abs(util.random.range(4, 12) * this.size); this.color = color; this.opacity = opacity; } bounce(width, height) { if (this.pos.x <= 0 || this.pos.x >= width) this.vel.x *= -1; if (this.pos.y <= 0 || this.pos.y >= height) this.vel.y *= -1; } wrap(width, height) { if (this.pos.x + this.radius <= this.boundaries[0]) this.pos.x = this.boundaries[2] + this.radius -2; else if (this.pos.x >= this.boundaries[2] + this.radius) this.pos.x = this.boundaries[0] - this.radius + 2; if (this.pos.y + this.radius <= this.boundaries[1]) this.pos.y = this.boundaries[3] + this.radius -2; else if (this.pos.y >= this.boundaries[3] + this.radius) this.pos.y = this.boundaries[1] - this.radius + 2; } update() { this.pos.x += this.vel.x; this.pos.y += this.vel.y; } draw(context) { context.save(); context.translate(this.pos.x, this.pos.y); context.lineWidth = 4 * this.size; context.beginPath(); context.globalAlpha = this.opacity; context.strokeStyle = this.color; context.arc(0, 0, this.radius, 0, Math.PI * 2); context.fillStyle = this.color; context.fill(); if (this.outer) { context.beginPath(); context.strokeStyle = this.color; context.lineWidth = this.outerRangeSize; context.arc(0, 0, this.radius * this.outerRange, 0, Math.PI * 2); context.stroke(); } context.restore(); } }32:[{"id":"1a580b20888187ce218d3256dfc376ee1d73a671989491af4de005abdbbcaa8364d0d5d61427dbfcacb1052f7b1df95bd74671249f258e03a8d1857bc7fbcddb","href":"https://static.observableusercontent.com/files/1a580b20888187ce218d3256dfc376ee1d73a671989491af4de005abdbbcaa8364d0d5d61427dbfcacb1052f7b1df95bd74671249f258e03a8d1857bc7fbcddb","name":"owid-co2-data (1).csv","type":"text/csv","lastModified":1705439531841.313,"size":13516864},{"id":"351c087fe75394298ee15e59ab5e069712f1944a2c04ac775a912cf1cc509965e2681c4c1d31f728fe8b325ff2d57ce7403dc4343c15727a1ff3676d64237e9a","href":"https://static.observableusercontent.com/files/351c087fe75394298ee15e59ab5e069712f1944a2c04ac775a912cf1cc509965e2681c4c1d31f728fe8b325ff2d57ce7403dc4343c15727a1ff3676d64237e9a","name":"countries-1.csv","type":"text/csv","lastModified":1705439625992.857,"size":5672}] 2d:{"title":"EU27 Ghg emissions visualization","cells":[{"id":94,"value":"# EU27 Ghg emissions visualization","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"height = Math.round(width / 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"initialEmissions = 4270.49","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"finalEmissions = 2957.36","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"improvement = ((initialEmissions - finalEmissions) / initialEmissions) * 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"plot1Params = {\n const vars = {\n nMeshes: 3,\n meshSizes: [6, 7, 1],\n meshNAgents: [15, 20, 19],\n meshVelocity: [1, 2, 0.5],\n meshOpacity: [0.9, 0.85, 1],\n meshColors: [\"#555555\", \"#777777\", \"#222222\"],\n backgroundColor: \"#ffffff\",\n offset: 0,\n boundaries: [0, 0, width, height],\n meshes: [],\n }\n return vars\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"plot2Params = {\n const vars = {\n nMeshes: 3,\n meshSizes: [6, 7, 1],\n meshNAgents: [Math.round(15 * 0.3), Math.round(20 * 0.3), Math.round(19 * 0.3)],\n meshVelocity: [1, 2, 0.5],\n meshOpacity: [0.9, 0.85, 1],\n meshColors: [\"#555555\", \"#777777\", \"#222222\"],\n backgroundColor: \"#ffffff\",\n offset: 0,\n boundaries: [0, 0, width, height],\n meshes: [],\n }\n return vars\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"playing = {\n button;\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"Falta:\n- L'arrodoniment acaba menjant-se moltes dades. Quan més partícules hi hagi, menys error d'arrodoniment hi ha. Mirar si es pot optimitzar per a poder-hi posar més partícules\n- Afegir imatge/icona més representatiu?","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"canvas2 = {\n var c = this ? this.getContext('2d') : DOM.context2d(width, height);\n var canvas = c.canvas;\n var i = this && this.i || 0;\n\n while (playing) {\n c.fillStyle = plot1Params.backgroundColor;\n c.fillRect(0, 0, width - 0 * 2, height - 0 * 2);\n\n c.fillStyle = \"black\";\n c.font = '20px sans-serif';\n \n var textString = \"Europe in 1990\",\n textWidth = c.measureText(textString ).width;\n \n c.fillText(textString , (canvas.width/2) - (textWidth / 2), height/2);\n \n meshes.forEach((mesh) => {\n mesh.update(c, width, height);\n });\n \n c.beginPath();\n c.strokeStyle = \"black\";\n c.lineWidth = 0;\n c.rect(0, 0, width, height);\n //c.stroke();\n c.restore();\n \n yield canvas;\n }\n yield canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"canvas3 = {\n var c = this ? this.getContext('2d') : DOM.context2d(width, height);\n var canvas = c.canvas;\n var i = this && this.i || 0;\n\n while (playing) {\n c.fillStyle = plot2Params.backgroundColor;\n c.fillRect(0, 0, width - 0 * 2, height - 0 * 2);\n\n c.fillStyle = \"black\";\n c.font = '20px sans-serif';\n \n var textString = \"Europe in 2020\",\n textWidth = c.measureText(textString ).width;\n \n c.fillText(textString , (canvas.width/2) - (textWidth / 2), height/2);\n \n meshes2.forEach((mesh) => {\n mesh.update(c, width, height);\n });\n \n c.beginPath();\n c.strokeStyle = \"black\";\n c.lineWidth = 0;\n c.rect(0, 0, width, height);\n //c.stroke();\n c.restore();\n \n yield canvas;\n }\n yield canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"ue_countries = countries_csv.filter(d => d.UE === \"Yes\" && d.country != \"Finland\" && d.country != \"Romania\").map(d => {return d.country})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"ue_countries.indexOf(\"Austria\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"emissions = emissions_raw\n .map((d) => {\n d.year = parseInt(d.year);\n d.total_ghg = parseFloat(d.total_ghg);\n return d;\n })\n .filter(\n (d) =>\n d.year >= 1990 &&\n (ue_countries.indexOf(d.country) !== -1 || d.country == 'European Union (27)') && d.country != 'Romania' && d.country != 'Finland' &&\n !isNaN(d.total_ghg)\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"emissions_ext = {\n const dataZ = [];\n emissions.filter(d => d.country != 'European Union (27)').forEach((d, i) => {\n const baseYearGhg = emissions.find((d) => d.country == emissions[i].country && d.year == 1990).total_ghg;\n dataZ.push(\n {\n country: d.country,\n year: d.year,\n total_ghg: d.total_ghg,\n diff_from_base: Math.round(((percentageDecrease(baseYearGhg, d.total_ghg)) + Number.EPSILON) * 100) / 100\n }\n )\n });\n \n return dataZ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"sortedEmissionsByCountry = d3.group(emissions_ext, d => d.country)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"sizesArray = {\n debugger\n const sizes = [];\n const yearData = emissions_ext.filter(d => d.year == selectedYear);\n const totalGhg = d3.sum(yearData, function(d) {\n return d.total_ghg;\n });\n yearData.forEach((d, i) => {\n const percentage = (d.total_ghg / totalGhg) * 100;\n sizes.push((percentage / 100) * totalGhg); // x % of y : Divide x by 100. Multiply the previous result by y\n }) \n \n return sizes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"yearCountryEmissions = emissions_ext.filter(d => d.country == selectedCountryName && d.year == mutable selectedYear)[0].total_ghg","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"selectedCountry = ue_countries.indexOf(selectedCountryName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof selectedCountryName = Inputs.select(ue_countries, {label: \"Select country\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"mutable selectedYear = 1990","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"//viewof selectedYear = Inputs.range([1990, 2020], {label: \"Year\", step: 1})\n\nyearControl = {\n var input = DOM.range(1990, 2020);\n input.step = 1;\n input.value = mutable selectedYear;\n input.oninput = () => mutable selectedYear = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"viewof button = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"baseSize = 9","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"multiplier = 0.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"plot3Params = {\n const vars = {\n nMeshes: 2,\n meshSizes: [6, 2, 1],\n meshNAgents: [Math.round(15 * 0.3), Math.round(20 * 0.3), Math.round(19 * 0.3)],\n meshVelocity: [2, 2, 0.5],\n meshOpacity: [0.9, 0.07, 1],\n meshColors: [\"#555555\", \"#998E8E\", \"#222222\"],\n backgroundColor: \"#ffffff\",\n offset: 0,\n boundaries: [0, 0, width, height],\n meshes: [],\n }\n return vars\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"meshes3 = {\n const meshArray = [];\n \n for (let i = 0; i < plot3Params.nMeshes; i++) {\n if(i == 0) {\n const mesh = new Mesh2(\n width,\n height,\n plot3Params.meshNAgents[i],\n 100,\n plot3Params.meshColors[i],\n plot3Params.meshSizes[i],\n plot3Params.boundaries,\n plot3Params.meshVelocity[i],\n plot3Params.meshOpacity[i],\n );\n meshArray.push(mesh);\n }\n else {\n const mesh = new Mesh(\n width,\n height,\n plot3Params.meshNAgents[i],\n 100,\n plot3Params.meshColors[i],\n plot3Params.meshSizes[i],\n plot3Params.boundaries,\n plot3Params.meshVelocity[i],\n plot3Params.meshOpacity[i],\n );\n meshArray.push(mesh);\n }\n }\n return meshArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"class Mesh2 {\n constructor(\n width,\n height,\n nAgents,\n joinDist,\n color,\n size,\n boundaries,\n velocity,\n opacity,\n ) {\n this.agents = [];\n this.joinDist = joinDist;\n this.color = color;\n this.size = size;\n for (let i = 0; i < sizesArray.length; i++) {\n if(i == selectedCountry) continue;\n const x = util.random.range(0, width);\n const y = util.random.range(0, height);\n \n this.agents.push(\n new Agent2(x, y, this.color, sizesArray[i] * 0.5, boundaries, velocity, opacity)\n );\n }\n this.agents.push(\n new Agent2(util.random.range(0, width),util.random.range(0, height), \"#FF3939\", sizesArray[selectedCountry] * 0.5, boundaries, velocity, 1, true)\n );\n }\n \n update(context, width, height) {\n this.agents.forEach((agent) => {\n agent.update();\n agent.draw(context);\n agent.wrap(width, height);\n });\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"eu_27_data = emissions_ext\n.filter(d => d.country == 'European Union (27)')\n.map(function(d) {\n d.ghg_per_capita = parseFloat(d.ghg_per_capita);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"function percentageDecrease(initial, final) {\n return ((initial - final) / initial) * 100\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"class Vector {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n \n getDistance(v) {\n const dx = this.x - v.x;\n const dy = this.y - v.y;\n return Math.sqrt(dx * dx + dy * dy);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"class Mesh {\n constructor(\n width,\n height,\n nAgents,\n joinDist,\n color,\n size,\n boundaries,\n velocity,\n opacity\n ) {\n this.agents = [];\n this.joinDist = joinDist;\n this.color = color;\n this.size = size;\n for (let i = 0; i < nAgents; i++) {\n const x = util.random.range(0, width);\n const y = util.random.range(0, height);\n \n this.agents.push(\n new Agent(x, y, this.color, this.size, boundaries, velocity, opacity)\n );\n }\n }\n \n update(context, width, height) {\n this.agents.forEach((agent) => {\n agent.update();\n agent.draw(context);\n agent.wrap(width, height);\n });\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"meshes = {\n const meshArray = [];\n \n for (let i = 0; i < plot1Params.nMeshes; i++) {\n const mesh = new Mesh(\n width,\n height,\n plot1Params.meshNAgents[i],\n 100,\n plot1Params.meshColors[i],\n plot1Params.meshSizes[i],\n plot1Params.boundaries,\n plot1Params.meshVelocity[i],\n plot1Params.meshOpacity[i],\n );\n meshArray.push(mesh);\n }\n return meshArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"meshes2 = {\n const meshArray = [];\n \n for (let i = 0; i < plot2Params.nMeshes; i++) {\n const mesh = new Mesh(\n width,\n height,\n plot2Params.meshNAgents[i],\n 100,\n plot2Params.meshColors[i],\n plot2Params.meshSizes[i],\n plot2Params.boundaries,\n plot2Params.meshVelocity[i],\n plot2Params.meshOpacity[i],\n );\n meshArray.push(mesh);\n }\n return meshArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"canvasSketch = require(\"canvas-sketch@0.7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"util = import('https://cdn.skypack.dev/canvas-sketch-util@1.10.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"emissions_raw = await FileAttachment(\"owid-co2-data (1).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"emissions_raw","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"countries_csv = await FileAttachment(\"countries-1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}