Published
Edited
Sep 14, 2020
1 fork
2 stars
Insert cell
Insert cell
html`
<svg id="vis1" width="100" height="100">
</svg>
`
Insert cell
d3.select("#vis1")
.append("circle")
.attr("fill", "salmon")
.attr("stroke", "black")
.attr("fill-opacity", .3)
.attr("r", 30)
.attr("cx", 40 + 30 * Math.random())
.attr("cy", 40 + 30 * Math.random());
Insert cell
Insert cell
// d3.select("#vis1")
// .selectAll("circle")
// .attr("fill", "cyan")
Insert cell
Insert cell
Insert cell
Insert cell
dados1 = [40, 80, 96, 76, 23, 42, 32, 90, 11, 22, 14];
Insert cell
Insert cell
dados2 = [ // essa é uma lista de objetos json
{'letra': 'A', 'valor': 12},
{'letra': 'B', 'valor': 53},
{'letra': 'C', 'valor': 62},
{'letra': 'D', 'valor': 40},
{'letra': 'E', 'valor': 35},
{'letra': 'F', 'valor': 11},
{'letra': 'G', 'valor': 22}
];
Insert cell
Insert cell
Insert cell
Insert cell
html`
<svg id="vis2" width="600" height="100">
</svg>
`
Insert cell
Insert cell
// d3.select("#vis2")
// .selectAll("circle")
// .data(dados1)
// .join("circle")
// .attr("cx", d => d * 5)
// .attr("cy", 50)
// .attr("r", 7)
// .attr("fill", "steelblue")
// .attr("fill-opacity", .7);
Insert cell
Insert cell
Insert cell
Insert cell
{
d3.select("#vis3")
.selectAll("circle")
.data(dados2)
.join("circle")
.attr("cx", d => d.valor * 5) // também poderia ser d => d['valor'] * 5
.attr("cy", 40)
.attr("r", 7)
.attr("fill", "steelblue")
.attr("fill-opacity", .7);

d3.select("#vis3")
.selectAll("text")
.data(dados2)
.join("text")
.attr("x", d => d.valor * 5 + 5) // +5 -> mais à direita
.attr("y", 40 + 14) // + 14 -> mais pra baixo
.attr("font-size", 12)
.attr("fill", "steelblue")
.text(d => d.letra); // o conteúdo de texto não é um atributo, é o valor do elemento.
}
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
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