Last active
December 3, 2018 20:42
-
-
Save wnghdcjfe/05563068f5948433ae9fa8ca7bd800d4 to your computer and use it in GitHub Desktop.
D3 v4 | animate path
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| /* set the CSS */ | |
| .line { | |
| fill: none; | |
| /*stroke: #aaa; | |
| stroke: #43484c; | |
| stroke: #405275; | |
| stroke: rgba(40, 53, 79, .95); | |
| stroke: #161719; | |
| stroke: #f99e1a;*/ | |
| stroke: #f89e35; | |
| stroke-width: 2px; | |
| stroke-dasharray:1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear alternate infinite; | |
| } | |
| @keyframes dash{ | |
| from{ | |
| stroke-dashoffset: 1000; | |
| } | |
| to{ | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .line2 { | |
| fill: none; | |
| stroke: #aaa; | |
| stroke-width: 2px; | |
| stroke-dasharray:1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear alternate infinite; | |
| } | |
| .line3 { | |
| fill: none; | |
| stroke: #405275; | |
| stroke-width: 2px; | |
| stroke-dasharray:1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear alternate infinite; | |
| } | |
| .line3-text { | |
| fill: #405275; | |
| stroke: #405275; | |
| } | |
| .line2-text { | |
| fill: #aaa; | |
| stroke: #aaa; | |
| } | |
| .line-text { | |
| fill: #f89e35; | |
| stroke: #f89e35; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| padding: 5px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| background: #f99e1a; | |
| border: 0px; | |
| border-radius: 8px; | |
| } | |
| .tooltip p { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| circle { | |
| fill: rgba(40, 53, 79, .95); | |
| } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // set the dimensions and margins of the graph | |
| var margin = { | |
| top: 20, | |
| right: 20, | |
| bottom: 30, | |
| left: 50 | |
| }, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // set the ranges | |
| var x = d3.scaleLinear().range([0, width]); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| // define the line | |
| function basicy() { | |
| var ret = d3.line() | |
| .x(function (d) { | |
| return x(d.year); | |
| }) | |
| return ret; | |
| } | |
| var valueline = basicy() | |
| .y(function (d) { | |
| return y(d.GNI); | |
| }); | |
| var valueline2 = basicy() | |
| .y(function (d) { | |
| return y(d.PGDI); | |
| }); | |
| var valueline3 = basicy() | |
| .y(function (d) { | |
| return y(d.PPP); | |
| }); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // append the svg obgect to the body of the page | |
| // appends a 'group' element to 'svg' | |
| // moves the 'group' element to the top left margin | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| // Get the data | |
| var datalist = []; | |
| d3.csv("korea_gdp.csv", function (error, data) { | |
| if (error) throw error; | |
| // scale the range of the data | |
| x.domain(d3.extent(data, function (d) { | |
| return d.year; | |
| })); | |
| y.domain([0, d3.max(data, function (d) { | |
| return Math.max(d.GNI, d.PGDI, d.PPP); | |
| })]); | |
| // add the valueline path. | |
| //그냥 data를 하게 되면 array[16]이 되지만, [data]를 하게 되면 array[1]안에 있는 array[16]이 된다. | |
| var dataArray = [{ | |
| "name": "GNI", | |
| "x": 100, | |
| "y": 50, | |
| "class": "line-text", | |
| "class2": "line", | |
| "dataline": valueline | |
| }, { | |
| "name": "PGDI", | |
| "x": 100, | |
| "y": 70, | |
| "class": "line2-text", | |
| "class2": "line2", | |
| "dataline": valueline2 | |
| }, { | |
| "name": "PPP", | |
| "x": 100, | |
| "y": 90, | |
| "class": "line3-text", | |
| "class2": "line3", | |
| "dataline": valueline3 | |
| }] | |
| for (var i = 0; i < dataArray.length; i++) { | |
| svg.append("text").text(dataArray[i].name) | |
| .attr("x", dataArray[i].x) | |
| .attr("y", dataArray[i].y); | |
| svg.append("rect") | |
| .attr("x", dataArray[i].x - 70) | |
| .attr("y", dataArray[i].y - 11) | |
| .attr("width", 50) | |
| .attr('height', 10) | |
| .attr('class', dataArray[i].class) | |
| svg.append("path") | |
| .data([data]) | |
| .attr("d", dataArray[i].dataline) | |
| .attr("class", dataArray[i].class2) | |
| } | |
| // add the dots with tooltips | |
| var fixeddot = svg.selectAll("dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("r", 5) | |
| var fixeddot2 = svg.selectAll("dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("r", 5) | |
| var fixeddot3 = svg.selectAll("dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("r", 5) | |
| fixeddot.attr("cx", function (d) { | |
| return x(d.year); | |
| }) | |
| .attr("cy", function (d) { | |
| return y(d.GNI); | |
| }) | |
| .on("mouseover", function (d) { | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div.html("<p>년도:" + d.year + "</p> <p>GNI:" + d.GNI + "</p>") | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }); | |
| fixeddot2.attr("cx", function (d) { | |
| return x(d.year); | |
| }) | |
| .attr("cy", function (d) { | |
| return y(d.PGDI); | |
| }) | |
| .on("mouseover", function (d) { | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div.html("<p>년도:" + d.year + "</p> <p>PGDI:" + d.PGDI + "</p>") | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }); | |
| fixeddot3.attr("cx", function (d) { | |
| return x(d.year); | |
| }) | |
| .attr("cy", function (d) { | |
| return y(d.PPP); | |
| }) | |
| .on("mouseover", function (d) { | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div.html("<p>년도:" + d.year + "</p> <p>PPP:" + d.PPP + "</p>") | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }); | |
| // add the X Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // add the Y Axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)); | |
| }); | |
| </script> | |
| </body> |
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
| year | GNI | PGDI | GDP | PPP | |
|---|---|---|---|---|---|
| 2000 | 11865.3 | 7462 | 11951.3 | 20756.77579 | |
| 2001 | 11180.2 | 6898 | 11257.3 | 21536.08194 | |
| 2002 | 12735.4 | 7597 | 12787 | 23008.07837 | |
| 2003 | 14160.9 | 8478 | 14215.9 | 23565.6093 | |
| 2004 | 15898.3 | 9439 | 15931 | 24627.61063 | |
| 2005 | 18508.2 | 11046 | 18654 | 25541.46475 | |
| 2006 | 20823.2 | 12342 | 20901.3 | 26733.64524 | |
| 2007 | 23032.8 | 13260 | 23102.9 | 28063.26818 | |
| 2008 | 20463.4 | 11808 | 20464.8 | 28650.2824 | |
| 2009 | 18302.9 | 10536 | 18346.3 | 28716.09789 | |
| 2010 | 22169.7 | 12270.4 | 22147.4 | 30440.40368 | |
| 2011 | 24302.1 | 13446.5 | 24159.8 | 31327.1269 | |
| 2012 | 24696 | 13670.1 | 24445.1 | 31901.07293 | |
| 2013 | 26178.9 | 14704.4 | 25993.4 | 32684.31908 | |
| 2014 | 28070.7 | 15921.6 | 27982.5 | 33639.60763 | |
| 2015 | 27339.7 | 15523.9 | 27213.5 | 34386.57488 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment