Public
Edited
Jul 22, 2023
data = ([
{"número": 6, "categoría": "A", fecha: 2020},
{"número": 2, "categoría": "B", fecha: 2021},
{"número": 10, "categoría": "C", fecha: 2022},
{"número": 4, "categoría": "D", fecha: 2023},
])
Plot.plot({
marks: [
Plot.barY(data, {x: "categoría", y: "número", fill: "categoría"}),
Plot.ruleY([0])
]
})
pie = {
let width = 450;
let height = 450;
let margin = 40;
let radius = Math.min(width, height) / 2 - margin;
let svg = d3.create("svg").attr("width", width).attr("height", height).style("font", "20px sans-serif");
let g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
let color = d3.scaleOrdinal()
.domain(data.map(d => d["categoría"]))
.range(d3.schemeTableau10);
let pie = d3.pie().value(d => d["número"])
let data_ready = pie(data);
let arcGenerator = d3.arc()
.innerRadius(0)
.outerRadius(radius);
g.selectAll('g')
.data(data_ready)
.join("g")
.append('path')
.attr('d', arcGenerator)
.attr('fill', d => color(d.data["categoría"]))
.attr("stroke", "black")
.style("stroke-width", "1px")
g.selectAll('text')
.data(data_ready)
.join('text')
.text(d => d.data["categoría"])
.attr("transform", d => "translate(" + arcGenerator.centroid(d) + ")")
.style("text-anchor", "middle")
.style("font-size", 17)
.style("fill", "black")
return svg.node()
}
treemap = {
let groups = d3.rollup(data, v => d3.sum(v, d => d["número"]), d => d["categoría"]);
let height = 500;
const childrenAccessorFn = ([ key, value ]) => value.size && Array.from(value)
const root = d3.hierarchy([null, groups], childrenAccessorFn)
.sum(([,value]) => value)
// .sort((a, b) => b.value - a.value)
const svg = d3.create("svg").attr("width", width).attr("height", height).style("font", "20px sans-serif");
let color = d3.scaleOrdinal()
.domain(data.map(d => d["categoría"]))
.range(d3.schemeTableau10);
d3.treemap()
.tile(d3.treemapSquarify)
.size([width, height])
.paddingTop(15)
.paddingRight(7)
.paddingInner(3)
(root)
const g = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`)
// Rectangles
g.append("rect")
.attr('x', 0)
.attr('y', 0)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.style("stroke", "black")
.style("fill", d => color(d.data[0]))
// Text inside rectangles
g.append("text")
.data(root.leaves())
.join("text")
.attr("x", d => 5)
.attr("y", d => 20)
.text(d => d.data[0])
.attr("fill", "black")
return svg.node()
}
Plot.plot({
y: { label: "numero"},
x: { label: "fecha", tickFormat: "d", ticks: 4},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "fecha", y: "número", stroke: "red"})
]
})
Plot.plot({
y: { label: "numero"},
x: { label: "categoría",ticks: 4},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "categoría", y: "número", stroke: "red"})
]
})
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.
