Created
July 11, 2011 04:41
-
-
Save ivanteoh/1075321 to your computer and use it in GitHub Desktop.
Scale graph - snippets
This file contains 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> | |
| <title>Scale Graph</title> | |
| </head> | |
| <body> | |
| <div id="demoContainer"> | |
| <div id="option"> | |
| <input name="updateButton" type="button" value="Update"/> | |
| </div> | |
| <div id="mainGraph"> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script> | |
| <script type="text/javascript"> | |
| <!-- Scale graph code here. --> | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| function randomData() { | |
| return d3.range(10).map(function(i) { | |
| return {x: i / 9, y: Math.random()}; | |
| }); | |
| } |
This file contains 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
| var data = randomData(); | |
| var newMaxY = d3.max(data, function(d) {return d.y;}); |
This file contains 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
| function reDomain(maxValue) { | |
| var dy = Math.pow(10, Math.round(Math.log(maxValue) / Math.log(10)) - 1); | |
| return Math.ceil(maxValue / dy) * dy; | |
| } | |
| var newCeilY = reDomain(newMaxY); |
This file contains 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
| var w = 450, | |
| h = 450, | |
| p = 50, | |
| x = d3.scale.linear().domain([0, 1]).range([0, w]), | |
| y = d3.scale.linear().domain([0, newCeilY]).range([h, 0]); | |
| var chart = d3.select("#mainGraph") | |
| .append("svg:svg") | |
| .attr("width", w + p * 2) | |
| .attr("height", h + p * 2); | |
| var vis = chart.append("svg:g") | |
| .attr("transform", "translate(" + p + "," + p + ")"); |
This file contains 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
| var xrule = vis.selectAll("g.x") | |
| .data(x.ticks(10)) | |
| .enter().append("svg:g") | |
| .attr("class", "x"); | |
| xrule.append("svg:line") | |
| .style("stroke", "#ccc") | |
| .style("shape-rendering", "crispEdges") | |
| .attr("x1", x) | |
| .attr("x2", x) | |
| .attr("y1", 0) | |
| .attr("y2", h); | |
| xrule.append("svg:text") | |
| .attr("x", x) | |
| .attr("y", h + 3) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "middle") | |
| .text(x.tickFormat(10)); | |
| var yrule = vis.selectAll("g.y") | |
| .data(y.ticks(10)) | |
| .enter().append("svg:g") | |
| .attr("class", "y"); | |
| yrule.append("svg:line") | |
| .attr("class", "yLine") | |
| .style("stroke", "#ccc") | |
| .style("shape-rendering", "crispEdges") | |
| .attr("x1", 0) | |
| .attr("x2", w) | |
| .attr("y1", y) | |
| .attr("y2", y); | |
| yrule.append("svg:text") | |
| .attr("class", "yText") | |
| .attr("x", -3) | |
| .attr("y", y) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "end") | |
| .text(y.tickFormat(10)); |
This file contains 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
| var node = vis.selectAll("path.dot") | |
| .data(data) | |
| .enter().append("svg:path") | |
| .attr("class", "dot") | |
| .style("fill", "white") | |
| .style("stroke-width", "1.5px") | |
| .attr("stroke", "#9acd32") | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) | |
| .attr("d", d3.svg.symbol()) | |
| .on("mouseover", function(d,i) { | |
| d3.select(this).transition().duration(300).style("fill","#00ffff"); }) | |
| .on("mouseout", function(d,i) { | |
| d3.select(this).transition().duration(300).style("fill","white"); }); | |
| node.append("svg:title") | |
| .attr("class", "dotTitle") | |
| .text(function(d) { return "X: " + d.x.toFixed(3) + ", Y: " + d.y.toFixed(3); }); |
This file contains 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
| function updateData() { | |
| var data = randomData(); | |
| var newMaxY = d3.max(data, function(d) {return d.y;}); | |
| var newCeilY = reDomain(newMaxY); | |
| var w = 450, | |
| h = 450, | |
| x = d3.scale.linear().domain([0, 1]).range([0, w]), | |
| y = d3.scale.linear().domain([0, newCeilY]).range([h, 0]); | |
| var vis = d3.select("#mainGraph svg g"); | |
| var yrule = vis.selectAll("g.y") | |
| .data(y.ticks(10)); | |
| // yRule Enter | |
| var newrule = yrule.enter().append("svg:g") | |
| .attr("class", "y"); | |
| newrule.append("svg:line") | |
| .attr("class", "yLine") | |
| .style("stroke", "#ccc") | |
| .style("shape-rendering", "crispEdges") | |
| .attr("x1", 0) | |
| .attr("x2", w) | |
| .attr("y1", 0) | |
| .attr("y2", 0) | |
| .transition() | |
| .duration(2000) | |
| .attr("y1", y) | |
| .attr("y2", y); | |
| newrule.append("svg:text") | |
| .attr("class", "yText") | |
| .attr("x", -3) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "end") | |
| .attr("y", 0) | |
| .transition() | |
| .duration(2000) | |
| .attr("y", y) | |
| .text(y.tickFormat(10)); | |
| // yLine Update | |
| yrule.select("line.yLine") | |
| .transition() | |
| .duration(2000) | |
| .attr("y1", y) | |
| .attr("y2", y); | |
| // yText Update | |
| yrule.select("text.yText") | |
| .transition() | |
| .duration(2000) | |
| .attr("y", y) | |
| .text(y.tickFormat(10)); | |
| // yrule Remove | |
| var oldrule = yrule.exit(); | |
| oldrule.select("line.yLine") | |
| .transition() | |
| .duration(2000) | |
| .attr("y1", 0) | |
| .attr("y2", 0) | |
| .remove(); | |
| oldrule.select("text.yText") | |
| .transition() | |
| .duration(2000) | |
| .attr("y", 0) | |
| .remove(); | |
| oldrule.transition() | |
| .duration(2000).remove(); | |
| // Dots | |
| var node = vis.selectAll("path.dot") | |
| .data(data) | |
| .transition() | |
| .duration(2000) | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
| node.select("title.dotTitle") | |
| .text(function(d) { return "X: " + d.x.toFixed(3) + ", Y: " + d.y.toFixed(3); }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment