Public
Edited
Feb 20, 2023
1 fork
md`${await FileAttachment("11.jpeg").image()}`
{
const margin = {top: 10, right: 10, bottom: 10, left: 10};
const width = 960 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
d3.json("https://observablehq.com/@d3/treemap?@149")
.then(data => {
const root = d3.hierarchy(data)
.eachBefore(d => d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value);
const treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.padding(1)
.round(true);
treemap(root);
const color = value => {
const hue = 120 - (value / 100) * 120;
return `hsl(${hue}, 70%, 50%)`;
};
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.style("font", "10px sans-serif");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("rect")
.attr("id", d => (d.leafUid = d.data.name + "-leaf-" + Math.random().toString().slice(2)))
.attr("class", "tile")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.on("mousemove", function(d) {
const tooltip = d3.select(this.parentNode).select(".tooltip");
tooltip.style("display", "block");
tooltip.style("left", d3.event.pageX + 10 + "px");
tooltip.style("top", d3.event.pageY + 10 + "px");
})
.on("mouseout", function() {
const tooltip = d3.select(this.parentNode).select(".tooltip");
tooltip.style("display", "none");
});
leaf.append("clipPath")
.attr("id", d => (d.clipUid = d.data.name + "-clip-" + Math.random().toString().slice(2)))
.append("use")
.attr("xlink:href", d => "#" + d.leafUid);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.attr("font-size", d => Math.min((d.x1 - d.x0) / 5, 14))
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.2 +(d.y1 - d.y0) / 2}`)
.text(d => d);
leaf.append("foreignObject")
.attr("class", "tooltip")
.attr("width", "100")
.attr("height", "50")
.style("display", "none")
.append("xhtml:div")
.style("font-size", "12px")
.html(d => `${d.data.name}: ${d3.format(",")(d.value)}`);
return svg.node();
})
}
emissions = (
await fetch(
"https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json"
)
).json()
region = ['OECD(GCP)', 'Non-OECD(GCP)', 'Central America(GCP)', 'middle East', 'North America', 'Oceania', 'South America','Africa', 'Europe', 'Asia']
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.lineY(data, {x: "year", y: "cumulative_co2", stroke: "country"}),
Plot.ruleY([0])
]
})
owidCo2Data1 = FileAttachment("annual-co2-emissions-per-country.csv").csv()
viewof table = Inputs.table(owidCo2Data1)
data = owidCo2Data1.filter(d => region.includes(d.country))
{
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
const projection = d3.geoNaturalEarth1();
const pathGenerator = d3.geoPath().projection(projection);
const g = svg.append('g');
const colorScale = d3.scaleSequential(d3.interpolateReds)
.domain([0, d3.max(data, d => d['Deaths - Cause: All causes - Risk: Household air pollution from solid fuels - Sex: Both - Age: Age-standardized (Rate)'])]);
Promise.all([
FileAttachment("death-rate-by-source-from-indoor-air-pollution.csv").csv(),
FileAttachment("world-50m@1.json").json()
]).then(([data, world]) => {
console.log(data);
const countries = topojson.feature(world, world.objects.countries);
g.selectAll('path')
.data(countries.features)
.enter().append('path')
.attr('class', 'country')
.attr('d', pathGenerator)
.attr('fill', d => {
const countryData = data.find(e => e.Code === d.id);
if (countryData) {
return colorScale(countryData['Deaths - Cause: All causes - Risk: Household air pollution from solid fuels - Sex: Both - Age: Age-standardized (Rate)']);
} else {
return 'gray';
}
})
.append('title')
.text(d => {
const countryData = data.find(e => e.Code === d.id);
if (countryData) {
return `${d.properties.name}: ${countryData['Deaths - Cause: All causes - Risk: Household air pollution from solid fuels - Sex: Both - Age: Age-standardized (Rate)']}`;
} else {
return `${d.properties.name}: No data available`;
}
});
});
}
import {select, geoPath, geoNaturalEarth1} from 'd3';
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.
