Public
Edited
Apr 2, 2024
Insert cell
Insert cell
d3 = require("d3@7")

Insert cell
// Data preparation
data = [
{name: 'Mercurio', radius: 2439.7, mass: 3.285e23},
{name: 'Venus', radius: 6051.8, mass: 4.867e24},
{name: 'Tierra', radius: 6371, mass: 5.972e24},
{name: 'Marte', radius: 3389.5, mass: 6.39e23},
{name: 'Jupiter', radius: 69911, mass: 1.898e27},
{name: 'Saturno', radius: 58232, mass: 5.683e26},
{name: 'Urano', radius: 25362, mass: 8.681e25},
{name: 'Neptuno', radius: 24622, mass: 1.024e26},
];
Insert cell

// Then, create a cell for the radius bar chart
radiusBarChart = {
const margin = {top: 20, right: 30, bottom: 40, left: 90},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// Setup your SVG container
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

const x = d3.scaleBand()
.range([0, width])
.domain(data.map(d => d.name))
.padding(0.2);

svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");

const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.radius)])
.range([height, 0]);

svg.append("g")
.call(d3.axisLeft(y));

svg.selectAll("mybar")
.data(data)
.enter()
.append("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.radius))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.radius))
.attr("fill", "#69b3a2");

return svg.node();
}
Insert cell

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.
Learn more