D3 data binding v3 to v5 / John Alexis Guerra Gómez

John Alexis Guerra Gómez

I love to build dataviz for insight discovery. I also love to put technology to the service of humanity

Workspace

Published

D3 Tutorials

Edited

Jul 8, 2019

2 forks

25 stars

D3 Tutorials

d3.geoPath + Canvas + Zoom + Panning TopoJSON Simplifier and Filter attributes How to add a tooltip in D3 d3.stack with d3.group Scatterplot Overplotting Treemap from table d3.stack with d3.nest

D3 data binding v3 to v5

D3 Network Visualization Playground Reusable charts d3@4 Intro to D3 Marks and Channels in D3

{

const d3 = await require("d3@3");

// An svg with two circles

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

// You bind it to some data

const nodesUpdate = d3.select(svgEle)

.selectAll("circle")

.data(data);

// Add five more circles to match the data

const nodesEnter = nodesUpdate.enter()

.append("circle")

.style("fill", "steelblue")

.attr("cy", 20)

.attr("r", 1)

.attr("cx", d=> d*20);

nodesUpdate

.transition().duration(1000)

.attr("r", 5); // Sets r=5 for update + enter

return svgEle;

}

{

const d3 = await require("d3@3");

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodesUpdate = d3.select(svgEle)

.selectAll("circle")

.data(data);

nodesUpdate

.transition().duration(1000)

.attr("r", 5); // Sets r=5 only for update

const nodesEnter = nodesUpdate.enter()

.append("circle")

.style("fill", "steelblue")

.attr("cy", 20)

.attr("r", 1)

.attr("cx", d=> d*20);

return svgEle;

}

{

const d3 = await require("d3@4"); // We use v4 now

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodesUpdate = d3.select(svgEle)

.selectAll("circle")

.data(data);

const nodesEnter = nodesUpdate.enter()

.append("circle")

.style("fill", "steelblue")

.attr("cy", 20)

.attr("r", 1)

.attr("cx", d=> d*20);

nodesUpdate

.transition().duration(1000)

.attr("r", 5); // Sets r=5 only for update

return svgEle;

}

{

const d3 = await require("d3@4");

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodesUpdate = d3.select(svgEle)

.selectAll("circle")

.data(data);

const nodesEnter = nodesUpdate.enter()

.append("circle")

.style("fill", "steelblue")

.attr("cy", 20)

.attr("r", 1)

.attr("cx", d=> d*20);

nodesUpdate

.merge(nodesEnter) // We need to manually merge update + enter

.transition().duration(1000)

.attr("r", 5);

return svgEle;

}

{

const d3 = await require("d3@4");

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodesUpdate = d3.select(svgEle)

.selectAll("circle")

.data(data);

const nodesEnter = nodesUpdate.enter()

.append("circle");

// Will still update r=5 for enter+update regardless of it being called before setting r=1 in enter

nodesUpdate

.merge(nodesEnter)

.transition().duration(1000)

.attr("r", 5);

nodesEnter

.style("fill", "steelblue")

.attr("cy", 20)

.attr("r", 1)

.attr("cx", d=> d*20);

return svgEle;

}

{

const d3 = await require("d3@5"); // We use v5 now

// An svg with two circles

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodes = d3.select(svgEle)

.selectAll("circle")

.data(data)

.join("circle")

.style("fill", "steelblue")

.attr("cx", d => d*20)

.attr("cy", 20)

.attr("r", 1)

.transition().duration(1000)

.attr("r", 5);

return svgEle;

}

{

const d3 = await require("d3@5"); // We use v5 now

// An svg with two circles

const svgEle = html`<svg width=${width} height=50>

</svg>`;

let data = [1,2,3,4,5,6,7];

const nodes = d3.select(svgEle)

.selectAll("circle")

.data(data)

.join(

enter => enter.append("circle")

.style("fill", "steelblue")

.attr("cx", d => d*20)

.attr("cy", 20)

.attr("r", 1)

) // after the join you can think of the selection as update + enter

.transition().duration(1000)

.attr("r", 5);

return svgEle;

}

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