This is an example for Google I/O of the D3 visualization, with animation.
This example is live at http://bl.ocks.org/kjlubick/059355cdefeaf06d0f60e1cb2a8a4ddb
Slides from my talk are at https://docs.google.com/presentation/d/1puxW7PY2PQxOqUPyNzgBCLv_0NedlYgubtOVvqteYgk/edit#slide=id.p
| var data1 = [ | |
| {name: "Ireland", x: 50, y: 33, color:"#169B62"}, | |
| {name: "Spain", x: 60, y: 75, color:"#FFC400"}, | |
| {name: "Norway", x: 90, y: 25, color: "#002868"} | |
| ]; | |
| var data2 = [ | |
| {name: "Ireland", x: 50, y: 33, color:"#169B62"}, | |
| {name: "Spain", x: 60, y: 75, color:"#FFC400"}, | |
| {name: "Norway", x: 90, y: 25, color: "#002868"}, | |
| {name: "France", x: 13, y: 25, color: "#EF4135"}, | |
| {name: "Italy", x: 76, y: 42, color: "#F1F2F1"}, | |
| ]; | |
| var data3 = [ | |
| {name: "Ireland", x: 140, y: 210, color:"#169B62"}, | |
| {name: "Norway", x: 70, y: 146, color: "#002868"}, | |
| {name: "France", x: 90, y: 150, color: "#EF4135"}, | |
| {name: "Italy", x: 280, y: 120, color: "#F1F2F1"}, | |
| ]; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>D3 Example With Animation</title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> | |
| <script src="data.js"></script> | |
| <link rel="stylesheet" type="text/css" href="viz.css"> | |
| <script src="viz.js"></script> | |
| </head> | |
| <body> | |
| <div class="flex"> | |
| <div style="width: 300px; border: 1px solid black"> | |
| <svg id="viz" height="300" width="300"></svg> | |
| </div> | |
| <div class="flex panel"> | |
| <button id="data1">Dataset 1</button> | |
| <button id="data2">Dataset 2</button> | |
| <button id="data3">Dataset 3</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| .flex { | |
| display: flex; | |
| } | |
| .panel { | |
| width:100px; | |
| flex-direction: column; | |
| } | |
| button { | |
| max-height: 50px; | |
| margin:5px; | |
| padding:5px; | |
| } |
| function redraw(points, fadein) { | |
| var select = d3 | |
| .select("#viz") | |
| .selectAll("circle") | |
| .data(points, function(point){ | |
| return point.name; | |
| }); | |
| var enter = select | |
| .enter() | |
| .append("circle") | |
| .attr("r", 12) | |
| .attr("stroke", "black") | |
| .attr("fill", function(point){ | |
| return point.color; | |
| }) | |
| // We set the x and y during the enter so they don't spawn at 0,0 and look odd. | |
| .attr("cx", function(point){ | |
| return point.x; | |
| }) | |
| .attr("cy", function(point){ | |
| return point.y; | |
| }) | |
| .attr("opacity", fadein ? 0.0: 1.0); | |
| select | |
| .exit() | |
| .transition() | |
| .duration(200) | |
| .attr("opacity", 0.0) | |
| .remove(); | |
| select | |
| .transition() | |
| .attr("opacity", 1.0) | |
| .attr("cx", function(point){ | |
| return point.x; | |
| }) | |
| .attr("cy", function(point){ | |
| return point.y; | |
| }) | |
| .duration(1200); | |
| } | |
| document.addEventListener('DOMContentLoaded', function () { | |
| redraw(data1, false); | |
| d3 | |
| .select("#data1") | |
| .on("click", function(){ | |
| redraw(data1, true); | |
| }); | |
| d3 | |
| .select("#data2") | |
| .on("click", function(){ | |
| redraw(data2, true); | |
| }); | |
| d3 | |
| .select("#data3") | |
| .on("click", function(){ | |
| redraw(data3, true); | |
| }); | |
| }); | |