Introducción a la visualización de datos con Observable y d3.js / Adrián Blanco

Adrián Blanco

Graphics reporter at The Washington Post

Workspace

Published

Edited

4 stars

html`

//GALAXIA

//PLANETAS

//ASTEROIDE

</svg>

height = 400

margin = ({ top: 20, right: 20, bottom: 20, left: 20 })

chart = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const g = svg.append("g");

// Data, Enter, Append

// g.append("g")

// .selectAll("circle")

// .data(data)

// .enter()

// .append("circle")

return svg.node()

}

sistemaSolarD3 = {

const distance = d3

.scaleLinear()

.domain([0, 4500])

.range([15, width]);

const radius = d3

.scaleSqrt()

.domain([0, 7200])

.range([0, 4]);

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const g = svg.append("g");

//Universo

g.append("rect")

.attr("width", width)

.attr("height", height)

.attr("fill", "#363F84");

//Sol

g.append("circle")

.attr("cx", -980)

.attr("cy", 200)

.attr("r", 985)

.attr("fill", "#FBC654");

g.append("g")

.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("id", d => d.planet)

.attr("cx", d => distance(d.distancia))

.attr("cy", height / 2)

.attr("r", d => radius(d.radio))

.attr("fill", d => d.color);

g.append("text")

.attr("dx", distance(130))

.attr("dy", 215)

.attr("font-size", 14)

.attr("font-family", 'Arial')

.attr("fill", "#FFF")

.text("↑");

g.append("text")

.attr("dx", distance(130))

.attr("dy", 235)

.attr("font-size", 14)

.attr("font-family", 'Arial')

.attr("fill", "#FFF")

.text("Tierra");

return svg.node();

}

barchart = {

const svg = d3

.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

const xScale = d3

.scaleTime()

.domain([new Date(2020, 2, 1), new Date()])

.range([0 + margin.left, width - margin.right]);

const yScale = d3

.scaleLinear()

.domain([0, d3.max(hospitalizados.map(d => d.hospitalizados_planta))])

.range([height - margin.top, 0 + margin.bottom]);

const xAxis = g =>

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(xScale));

const yAxis = g =>

.call(

.axisLeft(yScale)

.ticks(5)

.tickSize(-width + margin.left + margin.right)

)

.call(g => g.select(".domain").remove())

.call(g => g.selectAll("line").style("stroke", "lightgray"));

const bars = svg

.append('g')

.attr('class', 'bars')

.selectAll('rect')

.data(hospitalizados.sort((a, b) => d3.ascending(a.fecha, b.fecha)))

.enter()

.append('rect')

.attr('id', d => d.fecha + " " + d.pcr_positivos)

.attr('x', d => xScale(d.fecha))

.attr('y', d => yScale(d.hospitalizados_planta))

.attr('width', 3)

.attr('height', d => yScale(0) - yScale(d.hospitalizados_planta))

.style("fill", "#FBC654");

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${height - margin.bottom})`)

.call(xAxis)

.selectAll("text")

.style("text-anchor", "middle")

.style("font", "10px sans-serif");

svg

.append("g")

.attr("class", "axis y")

.attr("transform", `translate(${margin.left},0)`)

.call(yAxis)

.selectAll("text")

.style("font", "10px sans-serif");

return svg.node();

}

parseDate = d3.timeParse("%Y-%m-%d");

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.

Learn more