1.4 Selecciones en D3 / Alejandro Fornieles

Alejandro Fornieles

Workspace

Public

Edited

Apr 4

Fork of 1.4 Selecciones en D3

d3 = require("d3@5") //D3v5

// 4 círculos, el componente g agrupa todos los elementos

html`<svg width="760" height="140">

</g>

</svg>`

// Descomentá este código para ver el efecto

d3.selectAll('circle')

.style('fill', 'orange')

.attr('r', function() {

return 10 + Math.random() * 40;

});

// Descomentá este código para ver el efecto

d3.select('circle')

.style('fill', 'orange')

.attr('r', function() {

return 10 + Math.random() * 40;

});

html`<svg width="760" height="140">

</g>

</g>

</g>

</svg>`

d3.selectAll('g.item') // Selecciono grupos de clase item

.append('text')

.text(function(d, i) {

return i + 1;

});

html`<svg width="760" height="140">

</g>

</g>

</g>

</svg>`

d3.selectAll('g.iteminsert')

.insert('text', 'circle')

.text(function(d, i) {

return i + 1;

});

html`<svg width="760" height="140">

</g>

</g>

</g>

</svg>`

d3.select('g.itemremove') // Remuevo el primero

.remove();

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