Last active
December 15, 2015 16:58
-
-
Save Y4suyuki/5292493 to your computer and use it in GitHub Desktop.
Trying D3 tutorial at http://christopheviau.com/d3_tutorial and http://alignedleft.com/tutorials/d3/
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SVG Test</title> | |
| <script type="text/javascript" src="d3.v3/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 500; | |
| var h = 100; | |
| var barPadding = 1; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
| 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d, i) { | |
| return i * (w / dataset.length); //Bar width of 20 plus 1 for padding | |
| }) | |
| .attr("y", function(d) { | |
| return h - d * 4; | |
| }) | |
| .attr("width", w / dataset.length - barPadding) | |
| .attr("height", function(d) { | |
| return d * 4;}) | |
| .attr("fill", function(d) { | |
| return "rgb(" + (255 - (d * 10)) + ", 0, " + (d * 10) + ")"; | |
| }) | |
| // add some hover effect | |
| .on("mouseover", function(){ | |
| d3.select(this).attr("fill", "orange") | |
| }) | |
| .on("mouseout", function(){ | |
| d3.select(this).attr("fill", function(d) { | |
| return "rgba(0, 0, 255, " + ( d / 100 * 1.3 + 0.1) + ")"; | |
| }); | |
| });; | |
| //add labels | |
| svg.selectAll("text") | |
| .data(dataset) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d; | |
| }) | |
| .attr("text-anchor", "middle") //center the text holizontally | |
| .attr("x", function(d, i) { | |
| return i * (w / dataset.length) + (w / dataset.length - barPadding)/2; | |
| }) | |
| .attr("y", function(d) { | |
| return h - (d * 4) + 14; | |
| }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "white") | |
| ; | |
| </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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SVG Test</title> | |
| <!-- style --> | |
| <style> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font_family: sans-serif; | |
| font-size: 11px; | |
| } | |
| </style> | |
| <!-- end of style --> | |
| <script type="text/javascript" src = "d3.v3/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 500; | |
| var h = 100; | |
| var dataset = [ | |
| [ 5, 20 ], | |
| [ 480, 90 ], | |
| [ 250, 50 ], | |
| [ 100, 33 ], | |
| [ 330, 95 ], | |
| [ 410, 12 ], | |
| [ 475, 44 ], | |
| [ 25, 67 ], | |
| [ 85, 21 ], | |
| [ 220, 88 ] | |
| ]; | |
| //Define scales | |
| var xScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[0]; })]) | |
| .range([padding, w - padding * 2]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([h - padding, padding]); | |
| var rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([2, 5]); | |
| //Define axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("r", function(d) { | |
| return rScale(d[1]); | |
| }); | |
| //Labels | |
| svg.selectAll("text") | |
| .data(dataset) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d[0] + "," + d[1]; | |
| }) | |
| .attr("x", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "red"); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0, " + (h - padding) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translaate(" + padding + ", 0)") | |
| .call(yAxis); | |
| </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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| </head> | |
| <body> | |
| <div id="viz"></div> | |
| <script type="text/javascript"> | |
| var sampleSVG = d3.select("#viz") | |
| .append("svg") | |
| .attr("width", 100) | |
| .attr("height", 100); | |
| sampleSVG.append("circle") | |
| .style("stroke", "black") | |
| .style("fill", "white") | |
| .attr("r", 40) | |
| .attr("cx", 50) | |
| .attr("cy", 50) | |
| .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) | |
| .on("mouseout", function(){d3.select(this).style("fill", "white");}) | |
| .on("mousedown", animateFirststep); | |
| function animateFirststep() { | |
| d3.select(this).transition() | |
| .duration(1000) | |
| .attr("r", 10) | |
| .style("fill", "black") | |
| .each("end", animateSecondstep); | |
| }; | |
| function animateSecondstep() { | |
| d3.select(this).transition() | |
| .duration(1000) | |
| .attr("r", 40) | |
| .style("fill", "aliceblue") | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment