Utilsd3.selection.attrd3.selection moduled3 documentation templated3.timeParse(specifier)d3.selection.removed3.selection.merged3.selection.insertd3.selection.exit()d3.selection.datad3.selection.enterd3.selection.append(type)d3.selection.selectAlld3.selection.styled3.selection.attrd3.selection.appendd3.selection.selectd3.selectAll docd3.select()d3-selection Doc Introd3.selection()D3 Documentation on Observable
Thinking with Joins
md`# Thinking with Joins`
{
const c = html`<svg></svg>`
const d = {x: 50, y: 50}
d3.select(c)
.attr("width", 200)
.attr("height", 200)
.append("circle") // there is no circle yet, let create one (check with append api)
.attr("cx", d.x)
.attr("cy", d.y)
.attr("style", "fill: red")
.attr("r", 5);
return c;
}
circle = {
const c = html`<svg></svg>`
const data = [{"x": 10, "y": 11}, {"x": 20, "y": 25}, {"x": 50, "y": 100}]
const circle = d3.select(c)
.attr("width", 200)
.attr("height", 200)
.selectAll("circle")
.data(data)
circle.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("style", "fill: red")
.attr("r", 5);
console.log(circle.enter().data());
return c;
}
{
const c = html`<svg></svg>`
let data = [{"x": 10, "y": 11}, {"x": 20, "y": 25}, {"x": 50, "y": 100}]
let circle = d3.select(c)
.attr("width", 200)
.attr("height", 200)
.selectAll("circle")
.data(data)
circle.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("style", "fill: red")
.attr("r", 5);
data.push({"x": 150, "y":150})
data = [{"x": 150, "y":30}].concat(data)
// delete data[0]
circle = d3.select(c).selectAll("circle")
.data(data);
circle.exit().remove();
circle.enter().append("circle")
.attr("r", 5)
.attr("style", "fill: blue")
.merge(circle)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
return c;
}
{
const c = html`<svg></svg>`
let data = [{"x": 10, "y": 11}, {"x": 20, "y": 25}, {"x": 50, "y": 100}]
let circle = d3.select(c)
.attr("width", 200)
.attr("height", 200)
.selectAll("circle")
.data(data)
circle.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("style", "fill: red")
.attr("r", 0)
.transition()
.duration(750)
.attr("r", 5);
// data.push({"x": 150, "y":150})
// data = [{"x": 150, "y":30}].concat(data)
data = [{"x": undefined, "y":undefined}, {"x": 50, "y": 100}, {"x": 150, "y":150}, {"x": 150, "y":30}, ]
circle = d3.select(c).selectAll("circle")
.data(data);
circle.exit().transition()
.attr("r", 0)
.remove();
circle.enter().append("circle")
.attr("r", 5)
.attr("style", "fill: blue")
.merge(circle)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
return c;
}
import { d3 } from "@embracelife/tutorial-utilities"
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.
