Lab 11: D3 Practice #2: Creating an Arc Diagram with Animated Transitions / Masha Belyi

graphData = d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json")

allNodesNames = graphData.nodes.map(function(d){return d.name});

idToNode =

{

let dict = {};

graphData.nodes.forEach(function(n) {

dict[n.id] = n;

});

return dict;

}

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

idToTargetNodes =

{

let dict = {};

graphData.nodes.forEach(function (n) {

dict[n.id] = [];

graphData.links.forEach(function (l) {

if (l.source === n.id) {

dict[n.id].push(l.target);

}

});

return dict;

}

margin = ({top: 20, bottom: 20, left: 30, right: 30});

height = 300 - margin.top - margin.bottom;

xScale = d3.scalePoint()

.domain(allNodesNames)

.range([0,width])

// Adapted from https://www.d3-graph-gallery.com/graph/arc_basic.html

justNodesAndLabels = {

const radius = 8

// create a container for the svg; use standard margin notation

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

// create a group to hold the viz, adjust the coordinates using standard margin notation

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// create the nodes and labels similarly to Lab 1;

// the new part here is that x locations are determined by the xScale function;

// we also add some padding to y to move it away from the margins

// we assign an attribute named id, as this can be useful to have later

arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

return container.node();

}

// code goes here

// Adapted from https://www.d3-graph-gallery.com/graph/arc_basic.html

nodesAndArcs = {

const radius = 8

// select the DIV defined in the HTML above; this is where the svg will go; define its size

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

// create a group to hold the viz, adjust the coordinates

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// Place the nodes use graphData.nodes for the data;

// the x locations are determined by the xScale function as above

arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

function buildArc (d) {

// d.source and d.target are the locations in graphData.links

// xScale takes a node name and finds its location on the x axis from 0 to width

// So start is the location in pixels of the start of the arc

let start = xScale(idToNode[d.source].name);

let end = xScale(idToNode[d.target].name);

// This code builds up the SVG arc path element

const arcPath = ['M', // start the path

start, height-50, // declare the (x,y) of where to start

'A', // specify an eliptical curve

(start - end)/2, ',', // xradius: height of arc is proportional to start - end

(start - end)/2, // yradius

0, 0, ",", // rotation of ellipse is 0 along x and y; see arc url for details

start < end ? 1: 0, // make all arcs curve above the nodes; see arc documentation

end, height-50] // declare (x,y) of endpoint

.join(' '); // convert the bracketed array into a string

return arcPath;

};

// to create the arcs, we use graphData.links instead of graphData.nodes

arcGroup.selectAll("arcs")

.data(graphData.links)

.enter().append("path")

.attr("d", d => buildArc(d))

.style("fill", "none") // no fill color for the arcs

.attr("stroke", "black") // make the arc's lines be black

return container.node();

}

animatedNodes1 = {

const radius = 8

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// First place the nodes at cy position 50

// Then call transition(), with a duration of i*500, moving to cy position height-50

// For fun, we've put in a bouncing ease transition type. Try changing it around!

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", 50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

.transition()

.ease(d3.easeBounce)

.duration((d,i) => i*500)

.attr("cy", height-50);

return container.node();

}

animatedNodes2 = {

const radius = 8

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", 50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

.transition()

.ease(d3.easeBounce)

.duration((d,i) => i*500)

.attr("cy", height-50);

/* This invokes additional transitions on the nodes selection;

Try commenting it out and putting it back in.

Add more transitions between the fill and the cy. */

nodes

.transition()

.style("fill", "firebrick")

.transition()

.attr("cy", 50)

return container.node();

}

animatedNodes3 = {

const radius = 8

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", 50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

.transition()

.ease(d3.easeBounce)

.duration((d,i) => i*500)

.attr("cy", height-50)

.attr("fill", "firebrick")

.on("end", function() {

d3.select(this)

.transition()

.attr("cy", 50)

})

return container.node();

}

expandingAnimatedNodes = {

const radius = 8

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

// give the svg a black background

container.style("background-color", "white")

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// define a bright red color; used the color meter on the pitch interactive viz

const redcol = d3.rgb("252", "0", "8");

// first just place the red nodes at opacity 1

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", redcol)

.attr("opacity", 1)

container.transition().duration(50).style("background-color", "black")

// now do the animations. Grow the size and then fade out the circles.

// at the end, fade the black background white.

nodes

.transition(d3.easeBounce)

.duration(1000)

.attr("r", 20).attr('opacity', 0.3)

.transition()

.ease(d3.easeLinear)

.duration(2000)

.attr("opacity", 0)

.on("end", function() {

container.transition().duration(1000).style("background-color", "white");

})

return container.node();

}

// adapted from https://www.d3-graph-gallery.com/graph/arc_highlight.html

// and https://observablehq.com/@lemonnish/svg-path-animations-d3-transition

animateArcsFromNodes = {

const radius = 8;

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// create the nodes

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

// create the node labels

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

// This code builds up the SVG path element; see nodesAndArcs for details

function buildArc(d) {

let start = xScale(idToNode[d.source].name);

let end = xScale(idToNode[d.target].name);

const arcPath = ['M', start, height-50, 'A', (start - end)/2, ',', (start-end)/2, 0,0,",",

start < end ? 1: 0, end, height-50].join(' ');

return arcPath;

}

// create the arcs

const arcs = arcGroup.selectAll("arcs")

.data(graphData.links)

.enter().append("path")

.style("fill", "none")

.attr("stroke", "black")

.attr("d", d => buildArc(d))

// do the animation; see the posts on arc animation for explanation

arcs

// hide the arcs

.attr("stroke-dasharray", function () {

return this.getTotalLength()

})

.attr("stroke-dashoffset", function () {

return this.getTotalLength()

})

// reveal the arcs

.transition()

.duration(4000)

.attr("stroke-dashoffset", 0)

// hide them again

.transition()

.attr("stroke-dashoffset", function () {

return this.getTotalLength()

})

return container.node();

}

// adapted from https://www.d3-graph-gallery.com/graph/arc_highlight.html

animateArcsFromNodesThenExplode = {

const radius = 8;

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// create the nodes

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

// create the node labels

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

// This code builds up the SVG path element; see nodesAndArcs for details

function buildArc(d) {

let start = xScale(idToNode[d.source].name);

let end = xScale(idToNode[d.target].name);

const arcPath = ['M', start, height-50, 'A', (start - end)/2, ',', (start-end)/2, 0,0,",",

start < end ? 1: 0, end, height-50].join(' ');

return arcPath;

}

// create the arcs

const arcs = arcGroup.selectAll("arcs")

.data(graphData.links)

.enter().append("path")

.style("fill", "none")

.attr("stroke", "black")

.attr("d", d => buildArc(d))

// do the animation; see the posts on arc animation for explanation

arcs

// hide the arcs

.attr("stroke-dasharray", function () {

return this.getTotalLength()

})

.attr("stroke-dashoffset", function () {

return this.getTotalLength()

})

// reveal the arcs

.transition()

.duration(4000)

.attr("stroke-dashoffset", 0)

.on("end", function() {

const redcol = d3.rgb("252", "0", "8");

nodes

.attr("fill", redcol)

.attr("opacity", 1)

.transition(d3.easeBounce)

.duration(1000)

.attr("r", 20).attr('opacity', 0.3)

.transition()

.ease(d3.easeLinear)

.duration(1000)

.attr("opacity", 0)

.on("end", function() {

arcs

.transition()

.ease(d3.easeLinear)

.duration(1000)

.attr("stroke-dasharray", function () {

return this.getTotalLength()

})

.attr("stroke-dashoffset", function () {

return this.getTotalLength()

})

});

})

return container.node();

}

// adapted from https://www.d3-graph-gallery.com/graph/arc_highlight.html

interactiveNodesAndArcs = {

const radius = 8

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// create the nodes

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id)

// create the node labels

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

// This code builds up the SVG path element; see nodesAndArcs for details

function buildArc(d) {

let start = xScale(idToNode[d.source].name);

let end = xScale(idToNode[d.target].name);

const arcPath = ['M', start, height-50, 'A', (start - end)/2, ',', (start-end)/2, 0,0,",",

start < end ? 1: 0, end, height-50].join(' ');

return arcPath;

}

// create the arcs

const arcs = arcGroup.selectAll("arcs")

.data(graphData.links)

.enter().append("path")

.attr("d", d => buildArc(d))

.style("fill", "none")

.attr("stroke", "black")

// When the user mouses over a node,

// add interactive highlighting to see connections between nodes

nodes.on('mouseover', function(d) {

// highlight only the selected node

d3.select(this).style("fill", "firebrick");

// next, style the arcs

arcs

// the arc color and thickness stays as the default unless connected to the selected node d

// notice how embedding the reference to arcs within nodes.on() allows the code to connect d to arcd

// this code iterates through all the arcs so we can compare each to the selected node d

.style('stroke', function (arcd) {

return arcd.source === d.id || arcd.target === d.id ? 'firebrick' : 'black';})

.style('stroke-width', function (arcd) {

return arcd.source === d.id || arcd.target === d.id ? 4 : 1;})

});

// remove highlighting when user mouse moves out of node by restoring default colors and thickness

nodes.on('mouseout', function (d) {

nodes.style("fill", "steelblue");

arcs.style('stroke', 'black');

arcs.style('stroke-width', 1);

});

return container.node();

}

md`### Change the colors of the circles that the animated arcs link to.

Use on("end") to change the colors of the circles that are interactively animated to after the arcs are drawn.

This was very tricky for me to figure out.

`

// adapted from https://www.d3-graph-gallery.com/graph/arc_highlight.html

animatedInteractiveNodesAndArcs = {

const radius = 8;

const container = d3.select(DOM.svg(width+margin.left+margin.right,

height+margin.top+margin.bottom))

const arcGroup = container

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// create the nodes

const nodes = arcGroup.selectAll("nodes")

.data(graphData.nodes)

.enter().append("circle")

.attr("cx", d => xScale(d.name))

.attr("cy", height-50)

.attr("r", radius)

.attr("fill", "steelblue")

.attr("id", d => d.id) // need to add the ID to use below

// create the node labels

arcGroup.selectAll("nodeLabels")

.data(graphData.nodes)

.enter().append("text")

.attr("x", d => xScale(d.name))

.attr("y", height-20)

.attr("fill", "darkgrey")

.style("text-anchor", "middle")

.text(d => d.name)

// This code builds up the SVG path element; see nodesAndArcs for details

function buildArc(d) {

let start = xScale(idToNode[d.source].name);

let end = xScale(idToNode[d.target].name);

const arcPath = ['M', start, height-50, 'A', (start - end)/2, ',', (start-end)/2, 0,0,",",

start < end ? 1: 0, end, height-50].join(' ');

return arcPath;

}

// create the arcs

let arcs = arcGroup.selectAll("arcs")

.data(graphData.links)

.enter().append("path")

.style("fill", "none")

.attr("stroke", "none")

.attr("d", d => buildArc(d));

// When the user mouses over a node,

// add interactive highlighting to see connections between nodes

nodes.on('mouseover', function(d) {

// remember which node is the selected node

let thisNode = this;

// highlight the selected node

d3.select(this).style("fill", "firebrick");

// style the arcs

arcs

.style('stroke', function (arcd) {

return arcd.source === d.id ? 'firebrick' : 'none';})

.style('stroke-width', function (arcd) {

return arcd.source === d.id ? 4 : 1;})

.attr("stroke-dasharray", function(arcd) {

return arcd.source === d.id ? this.getTotalLength() : 0;})

.attr("stroke-dashoffset", function(arcd)

{ return arcd.source === d.id ? this.getTotalLength() : 0;})

// reveal the arcs

.transition()

.duration(3000)

.attr("stroke-dashoffset", 0)

/* To make this code clean, I added the idToTargetNodes function in the Data section;

it gets list of nodes linked to from the user-selected node.

This function uses a filter on the nodes selection to find those nodes that are on the target

list or to find the source node itself. The style code that follows is applied only to those

nodes that make it through the filter.

The + before the node IDs makes them both integers instead of strings so that === works.

*/

.on("end", function(d, i) {

// the if statement is to make this function run only once at the end. It isn't required.

if (i === 0)

nodes

.filter(function(noded) {

return idToTargetNodes[thisNode.id].includes(noded.id) || +thisNode.id === +noded.id})

.style("fill", "firebrick");

});

// remove highlighting when user mouse moves out of node by restoring default colors and thickness

nodes.on('mouseout', function () {

nodes.style("fill", "steelblue");

arcs.style('stroke', 'none');

arcs.style('stroke-width', 1);

});

return container.node();

}

md`**Exercise:** Copy this code and change it so that, instead of making the target circles turn red when the arcs hit them, the target circles turn red and explode.

`

// code goes here

d3 = require("d3@^5.8")

One platform to build and deploy the best data apps