dadesfiltrades.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {x: "year", y: "co2", z: "country", color: "country"}),
]
})
Plot.plot({
title: "CO2 emissions per year",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "co2", text: (d) => `${d.co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "co2", fill: "country" }),
]
});
plot_co2 = Plot.plot({
title: "CO2 emissions per year",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "co2",
z: "country",
color: { legend: "country"},
stroke: "country"
})
]
});
plot_cement_co2 = Plot.plot({
title: "CO2 emissions per year - Industry Cement",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "cement_co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "cement_co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "cement_co2", text: (d) => `${d.cement_co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "cement_co2", fill: "country" }),
]
});
plot_coal_co2 = Plot.plot({
title: "CO2 emissions per year - Industry Coal",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "coal_co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "coal_co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "coal_co2", text: (d) => `${d.coal_co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "coal_co2", fill: "country" }),
]
});
plot_consumption_co2 = Plot.plot({
title: "CO2 emissions per year - Consumption-based emissions",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "consumption_co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "consumption_co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "consumption_co2", text: (d) => `${d.consumption_co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "consumption_co2", fill: "country" }),
]
});
plot_oil_co2 = Plot.plot({
title: "CO2 emissions per year - Industry Oil",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "oil_co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "oil_co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "oil_co2", text: (d) => `${d.oil_co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "oil_co2", fill: "country" }),
]
});
plot_other_industry_co2 = Plot.plot({
title: "CO2 emissions per year - Other Industry",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: "other_industry_co2",
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: "other_industry_co2", z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: "other_industry_co2", text: (d) => `${d.other_industry_co2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: "other_industry_co2", fill: "country" }),
]
});
dades = new Map([
["CO2", "co2"],
["Cement CO2", "cement_co2"],
["Coal CO2", "coal_co2"],
["Consumption CO2", "consumption_co2"],
["Oil CO2", "oil_co2"],
["Other industry CO2", "other_industry_co2"]
])
viewof grafic2 = Inputs.select(new Map([
["CO2", "co2"],
["Cement CO2", "cement_co2"],
["Coal CO2", "coal_co2"],
["Consumption CO2", "consumption_co2"],
["Oil CO2", "oil_co2"],
["Other industry CO2", "other_industry_co2"]
]), { label: "Select a CO2 plot" });
grafic2
plot_other_industry_co2_2 = Plot.plot({
title: "CO2 emissions per year - Other Industry",
subtitle: "from 1980 to 2020",
width: width,
height: 500,
marginRight: 120,
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["blue", "red"],
},
y: {grid: true},
x: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: grafic2,
z: "country",
color: { legend: "country"},
stroke: "country"
}),
Plot.text(dadesfiltrades, Plot.selectLast({x: "year", y: grafic2, z: "country", text: "country", textAnchor: "start", dx: 3})),
Plot.text(dadesfiltrades, {filter: (d) => d.year % 5 === 0, x: "year", y: grafic2, text: (d) => `${d.grafic2}`, dy: -12}),
Plot.circle(dadesfiltrades, { x: "year", y: grafic2, fill: "country" }),
]
});
grafic2
Generators.observe(change => {
const selectedPlot = change(viewof grafic2);
const selectedPlotCell = dades.get(selectedPlot);
return selectedPlotCell;
});
import {Mutable} from "@observablehq/inputs";
import {Generators} from "@observablehq/inputs";
viewof grafic = Inputs.select(dades, { label: "Select a CO2 plot" })
map1 = view(grafic)
colorScale = {
"Spain": "red",
"Italy": "blue",
};
import {Inputs} from "@observablehq/inputs"
viewof selectedColumn = Inputs.select({
options: Object.keys(dadesfiltrades[0]),
label: "Select a column"
});
viewof selectedColumn2 = Inputs.select({
options: ["co2", "cement_co2", "coal_co2", "consumption_co2", "oil_co2"],
label: "Select a column"
});
dades2 = new Map([
["CO2", "co2"],
["Cement CO2", "cement_co2"],
["Coal CO2", "coal_co2"],
["Consumption CO2", "consumption_co2"],
["Oil CO2", "oil_co2"],
["Other industry CO2", "other_industry_co2"]
])
yValues4 = dadesfiltrades.map(d => d[selectedColumn2.value]);
yValues3 = d3.column(dadesfiltrades, selectedColumn4.value);
viewof selectedColumn5 = Inputs.select({
options: ["co2", "cement_co2", "coal_co2", "consumption_co2", "oil_co2"],
label: "Select a column"
});
yValues5 = d3.column(dadesfiltrades, selectedColumn5.value)
dadesfiltrades
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(dadesfiltrades, {
x: "year",
y: yValues
})
]
});
viewof chart = Plot.plot({
marks: [
Plot.line(dadesfiltrades, { x: "year", y: yValues })
]
})
emissionsCountry
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.line(emissionsCountry, {
y: "co2_per_capita",
x: "year",
tip: true
}).plot()
import {mark} from "@observablehq/mark"
import {Plot, html} from "@observablehq/plot";
emissionsCountry = emissions[country].data
emissions = (
await fetch(
"https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json"
)
).json()
import { toc } from "@nebrius/indented-toc"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.