d3 = require("d3@6")
html`
<svg id="vis2" width="450" height="120">
<circle id="ponto1" cx="40" cy="8" r="7" />
<circle id="ponto2" cx="80" cy="24" r="7" fill="crimson" />
<circle cx="150" cy="40" r="7" fill="crimson" />
<circle cx="160" cy="56" r="7" fill="crimson" />
<circle cx="230" cy="72" r="7" fill="crimson" />
<circle cx="420" cy="88" r="7" fill="crimson" />
</svg>
`
d3.select("#ponto1")
.attr("fill", "crimson")
// d3.selectAll("circle")
// .attr("r", 20)
// d3.selectAll("#vis2 > circle")
// .attr("r", 12)
viewof corEscolhida = html`<input type="color" value="#0000ff">`
d3.selectAll("#vis3 circle")
.attr("fill", corEscolhida)
html`
<svg id="vis3" width="450" height="120" class="ptos3">
<g fill-opacity="0.5" stroke="black">
<circle cx="40" cy="60" r="7" />
<circle cx="80" cy="60" r="7" />
<circle cx="150" cy="60" r="7" />
<circle cx="160" cy="60" r="7" />
<circle cx="230" cy="60" r="7" />
<circle cx="420" cy="60" r="7" />
</g>
</svg>
`
viewof tamanho = html`<input type=range min=1 max=20 step=2>`
d3.selectAll("#vis3 circle")
.attr("r", tamanho)
html`
<svg id="vis4" width=1000 height=100>
<rect id="meAnime" width=50 height=50 x=10 y=10 fill="steelblue" />
</svg>
`
// d3.select("#meAnime").transition()
// .duration(2000) // 2000 milliseconds => 2 seconds
// .attr("x", 700)
// .attr("y", 50)
// .attr("width", 100)
// .attr("fill", "firebrick");
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.
