Ramon Weber,
PhD Student @ MIT
Sustainable Design Lab & Digital Structures Group
import {columns} from "@bcardiff/observable-columns"
columns1 = (args) => {
const form = html`<form></form>`
form.value = {}
let cols = 0
for (const key in args) {
form.appendChild(args[key])
cols++
}
form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`
form.oninput = () => {
form.value = Object.keys(args).reduce((result, key) => {
result[key] = args[key].value
return result
}, Array.isArray(args) ? [] : {})
}
form.oninput()
return form
}
columns2 = (args) => {
const form = html`<form></form>`
form.value = {}
let cols = 0
for (const key in args) {
form.appendChild(args[key])
cols++
}
form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`
form.oninput = () => {
form.value = Object.keys(args).reduce((result, key) => {
result[key] = args[key].value
return result
}, Array.isArray(args) ? [] : {})
}
form.oninput()
return form
}
import {embed} from "@observablehq/auto-resizing-embed"
xAxis_bar = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x_bar).tickFormat(i => bar_data[i].name).tickSizeOuter(0))
yAxis_bar = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y_bar).ticks(null, bar_data.format))
//.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(bar_data.y))
SSP_cummulative_temp_2100 = [1.73, 2.68, 3.24, 4.09, 4.86]
Appendix
year_start = 2020;
year_end = 2051;
num_years = year_end-year_start;
sum_business_as_usual = business_as_usual.reduce(function(a, b) { return a + b; }, 0);
sum_net_zero_op = net_zero_op.reduce(function(a, b) { return a + b; }, 0);
sum_net_zero_op_ec = net_zero_op_ec.reduce(function(a, b) { return a + b; }, 0);
colors = ({
annual_emissions_business_as_usual: {
light: "#af6767",
dark: "#af6767",
surface: "#cab6b6",
text: "Business as usual",
total: sum_business_as_usual
},
annual_emissions_net_zero_op: {
light: "#146989", //"#a6cee3",
dark: "#0e475c",// "#1f78b4"
surface: "#6fa6bb",
text: "Net Zero OC",
total: sum_net_zero_op
},
annual_emissions_net_zero_op_ec: {
light: "#1e6f4f", //"#fdbf6f",
dark: "#3e5d53",//"#ff7f00"
surface: "#58b390",
text: "Net Zero OC and EC",
total: sum_net_zero_op_ec
},
})
last = array => array[array.length - 1]
import {slider} from '@jashkenas/inputs'
import {rangeSlider} from '@mootari/range-slider'
geometric = require("geometric@1");
arr = require("arraygeous@0");
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
