viewof grafic2 = Inputs.select(new Map([
["CO2", "co2"],
["Cement CO2", "cement_co2"],
["Coal CO2", "coal_co2"],
["Consumption based CO2", "consumption_co2"],
["Oil CO2", "oil_co2"],
["Other industry CO2", "other_industry_co2"]
]), { label: "Select a CO2 plot" });
plot_other_industry_co2_2 = Plot.plot({
title: "CO2 emissions per year - " + [grafic2],
subtitle: "from 1980 to 2020",
width: 1100,
height: 500,
marginRight: 120,
marginBottom: 60,
x: {grid: true, label: "Year", labelAnchor: "center", labelArrow: false, labelOffset: 35},
y: {grid: true, label: grafic2, labelAnchor: "center", labelArrow: false, labelOffset: 40},
color:{
type: "categorical",
legend: true,
domain: ["Italy", "Spain"],
range: ["green", "red"],
},
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" }),
]
});
function getSelectedInput(selectedValue) {
for (const [key, value] of grafic2) {
if (value === selectedValue) {
return key;
}
}
}
dades_energy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof any = Inputs.range([1980, 2022], { label: "Energy total year", step: 1, value: 1 })
svg = d3.select("svg")
function updateChart(any) {
const filteredDataenergy = dades_energy.filter(d => d.year === any);
const bubbles = svg.selectAll("circle")
.dades_energy(filteredDataenergy, d => d.country);
bubbles.enter().append("circle")
.attr("cx", d => d.country === "Italy" ? 100 : 300)
.attr("cy", d => 100)
.attr("r", 0)
.merge(bubbles)
.transition()
.duration(500)
.attr("r", d => d.energy_total);
bubbles.exit().remove();
};
any.oninput = function(event) {
updateChart(+event.target.value);
};
updateChart(+any.value);
return svg.node();
bubble_chart = {
const root = pack(dades_energy);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", d => d.r)
.attr("fill-opacity", 0.7)
.attr("fill", d => color(d.data.month));
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
leaf.append("title")
.text(d => `${d.data.month}/${d.data.day}
$${format(d.value)}`);
return svg.node();
}
format = d3.format(",d")
bubbleplot = {
// Set up the chart dimensions
width2 = 600;
height2 = 400;
// Create the SVG container
svg = d3.create("svg")
.attr("width", width2)
.attr("height", height2);
// Set up the scales for the bubble sizes
radiusScale = d3.scaleLinear()
.domain([0, d3.max(filteredData, d => d.energy_total)])
.range([5, 50]); // Adjust the range based on your preferences
// Create circles for each data point
svg.selectAll("circle")
.data(filteredData)
.join("circle")
.attr("cx", (d, i) => i * 100 + 50) // Adjust the spacing between bubbles
.attr("cy", height / 2)
.attr("r", d => radiusScale(d.energy_total))
.style("fill", d => (d.country === 'Italy') ? 'blue' : 'red'); // Adjust the colors as needed
// Append labels for each bubble
svg.selectAll("text")
.data(filteredData)
.join("text")
.attr("x", (d, i) => i * 100 + 50)
.attr("y", height / 2)
.text(d => d.country)
.style("text-anchor", "middle");
// Display the SVG in the notebook
svg.node();
};
filteredData = dades_energy.filter(d => d.year === 2012 && (d.country === 'Italy' || d.country === 'Spain'));
Pack(dades_energy, {
path: (d) => d.name, // e.g. flare/animate/Easing
label: (d) => d.country, // display text
value: (d) => d?.size, // area of each circle
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 720
})
Pack(dades_energy, {
path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.name.split(".").pop(), // display text
value: (d) => d?.size, // area of each circle
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 720
})
plotenergy = BubbleChart(dades_energy, {
value: d => d.energy_total,
group: d => d.id.split(".")[1],
title: d => `${d.id}\n${d.value.toLocaleString("en")}`,
link: d => `https://github.com/prefuse/Flare/blob/master/flare/src/${d.id.replace(/\./g, "/")}.as`,
width: 1152
})
bubble_chart2 = {
const format = d3.format(",d");
// Assuming dades_energy is your data
const root = d3.pack()
.size([width, height])
.padding(3)
(d3.hierarchy({ children: dades_energy })
.sum(d => d.value));
// Define a color scale
const color = d3.scaleOrdinal(d3.schemeCategory10);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", d => d.r)
.attr("fill-opacity", 0.7)
.attr("fill", d => color(d.data.month)); // Use the color scale here
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => (d.data.name || '').split(/(?=[A-Z][a-z])|\s+/g)) // Check if name exists
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
leaf.append("title")
.text(d => `${d.data.month}/${d.data.day} $${format(d.value)}`);
return svg.node();
}
height = 500
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
html = importHTML("https://d3js.org/d3.v6.min.js")
yarn add @observablehq/bubble-chart-library
import { pack } from 'd3-hierarchy';
import {Mutable} from "@observablehq/inputs";
import {Generators} from "@observablehq/inputs";
import {Inputs} from "@observablehq/inputs"
dadesfiltrades
Type Table, then Shift-Enter. Ctrl-space for more options.
dades_energy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
emissionsCountry
Type Table, then Shift-Enter. Ctrl-space for more options.
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"
import {Pack} from "@d3/pack"
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.