Last active
August 29, 2015 14:04
-
-
Save markarios/36443a08be2619722bbc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font-family: Helvetica; | |
| } | |
| div { | |
| margin: 50px; | |
| float:left; | |
| } | |
| header { | |
| margin-bottom: 30px; | |
| font-size: 1.25rem; | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Does order matter when using the enter, update, exit pattern in d3js? </h1> | |
| <content> | |
| To verify that order doesn't matter I did three programming experiments. Each experiment had the order of the pattern changed slightly but each used the exact same data which was produced randomly. <p>What you see below are the results of experiment. | |
| </content> | |
| <div id="enterexitupdate"><header>Enter, Exit, Update</header></div> | |
| <div id="exitenterupdate"><header>Exit, Enter, Update</header></div> | |
| <div id="updateenterexit"><header>Update, Enter, Exit</header></div> | |
| <script> | |
| var dataSource = [], | |
| pointCount = 15, | |
| svgW = 200, | |
| svgH = 150; | |
| timerInterval = 500; | |
| for (var i = 0; i < pointCount; i++) { | |
| dataSource.push( | |
| {x: Math.random(), y: Math.random(),color:"DeepSkyBlue"}); | |
| }; | |
| var svgSpace1 = d3.select("div#enterexitupdate") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| var svgSpace2 = d3.select("div#exitenterupdate") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| var svgSpace3 = d3.select("div#updateenterexit") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| function render1(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| }; | |
| function render2(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| }; | |
| function render3(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| }; | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| setInterval(function(){ | |
| dataSource.shift(); | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| }, timerInterval); | |
| setInterval(function(){ | |
| dataSource.push( | |
| {x: Math.random(), y: Math.random(), color:"DeepPink"}); | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| }, timerInterval); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font-family: Helvetica; | |
| } | |
| div { | |
| margin: 50px; | |
| float:left; | |
| } | |
| header { | |
| margin-bottom: 30px; | |
| font-size: 1.25rem; | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Does order matter when using the enter, update, exit pattern in d3js? </h1> | |
| <content> | |
| To verify that order doesn't matter I did three programming experiments. Each experiment had the order of the pattern changed slightly but each used the exact same data which was produced randomly. <p>What you see below are the results of experiment. | |
| </content> | |
| <div id="enterexitupdate"><header>Enter, Exit, Update</header></div> | |
| <div id="exitenterupdate"><header>Exit, Enter, Update</header></div> | |
| <div id="updateenterexit"><header>Update, Enter, Exit</header></div> | |
| <script> | |
| var dataSource = [], | |
| pointCount = 15, | |
| svgW = 200, | |
| svgH = 150; | |
| timerInterval = 500; | |
| for (var i = 0; i < pointCount; i++) { | |
| dataSource.push( | |
| {x: Math.random(), y: Math.random(),color:"DeepSkyBlue"}); | |
| }; | |
| var svgSpace1 = d3.select("div#enterexitupdate") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| var svgSpace2 = d3.select("div#exitenterupdate") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| var svgSpace3 = d3.select("div#updateenterexit") | |
| .append("svg") | |
| .attr("width",svgW) | |
| .attr("height",svgH); | |
| function render1(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| }; | |
| function render2(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| }; | |
| function render3(usrData,usrSVG){ | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .attr("r",5) | |
| .attr("cx", function(d){return d.x*svgW;}) | |
| .attr("cy", function(d){return d.y*svgH;}) | |
| .transition() | |
| .attr("fill",function(d){return d.color;}); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .enter() | |
| .append("circle"); | |
| usrSVG.selectAll("circle") | |
| .data(usrData) | |
| .exit() | |
| .transition() | |
| .remove(); | |
| }; | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| setInterval(function(){ | |
| dataSource.shift(); | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| }, timerInterval); | |
| setInterval(function(){ | |
| dataSource.push( | |
| {x: Math.random(), y: Math.random(), color:"DeepPink"}); | |
| render1(dataSource,svgSpace1); | |
| render2(dataSource,svgSpace2); | |
| render3(dataSource,svgSpace3); | |
| }, timerInterval); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment