Public
Edited
Oct 24, 2023
md`# PetDB - Entity Values`
chart = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("circle")
.attr("cx", "100")
.attr("cy","100")
.attr("r","50")
.attr("fill", "lightblue")
.attr("transform", "translate(-50%, -50%)");
svg.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 24)
.attr("text-anchor", "middle")
return svg.node();
}
data = Object.entries(useData).map(([key,val], i) => {
const fullData = []
let currentKey = key.replaceAll('_', ' ').toUpperCase()
return fullData[i] = {"name": currentKey, "value": val}
})
useData = {
let { rock_values, mineral_values, volc_glass_values, inclusion_values } = tempData
return { rock_values, mineral_values, volc_glass_values, inclusion_values }
}
tempData = jsonData['data'][0];
jsonData = d3.json("https://ecapi.earthchem.org/statistics/entitystatistics");
color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#d6706a", "#FF9E99", "#60D6D0", "#378A85"])
// .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
arc = {
const radius = Math.min(width, height) / 2;
return d3.arc().innerRadius(radius * 0.67).outerRadius(radius - 1);
}
height = Math.min(width, 500);
pie = d3.pie()
.padAngle(0.005)
.sort(null)
.value(d => d.value)
d3 = require("d3@6")
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.
