Last active
December 18, 2017 23:31
-
-
Save JulienAssouline/5da9ae43ac3fb5ae77dc9462f3b2eca3 to your computer and use it in GitHub Desktop.
two linked animations
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
| index | experience | ||
|---|---|---|---|
| 0 | 1 | 487 | |
| 1 | 2 | 384 | |
| 2 | 3 | 257 | |
| 3 | 4 | 170 | |
| 4 | 5 | 140 | |
| 5 | 6 | 97 | |
| 6 | 7 | 81 | |
| 7 | 8 | 55 | |
| 8 | 9 | 47 | |
| 9 | 11 | 25 | |
| 10 | 10 | 24 | |
| 11 | 12 | 21 | |
| 12 | 13 | 8 | |
| 13 | 14 | 2 |
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 () { | |
| var w = 700; | |
| var h = 400; | |
| var margin = { | |
| top: 0, | |
| bottom: 40, | |
| left: 40, | |
| right: 40 | |
| } | |
| var width = w - margin.left - margin.right; | |
| var height = h - margin.top - margin.bottom; | |
| var xScale = d3.scaleLinear() | |
| .range([0, width]) | |
| var yScale = d3.scaleLinear() | |
| .range([height, 0]) | |
| var yScale_bars = d3.scaleLinear() | |
| .range([height, 0]) | |
| var xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| var yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| var svg = d3.select("#baseball_arcs") | |
| .append("svg") | |
| .attr("id", "chart") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("Baseball_careers_1999.csv", function(error, data){ | |
| data.forEach(function(d){ | |
| d.index = d.index | |
| d.experience = +d.experience | |
| }); | |
| xScale.domain([0, 14]) | |
| yScale.domain([0, 1]) | |
| yScale_bars.domain([0, 500]) | |
| var path = svg.selectAll(".arcs") | |
| .data(data) | |
| .enter() | |
| .append("path") | |
| .style("stroke", "#832129") | |
| .attr("class", function(d){ | |
| return "arcs " + "l" + d.index.replace(/ /g, "") // a number cannot start a class, which is why I added "l" | |
| // also make sure it is not a number when loading ur data. keep it as a string!!! | |
| }) | |
| .attr("d", function(d){ | |
| var To_scale = xScale(d.index), | |
| From_scale = xScale(0), | |
| y = yScale(0), | |
| dx = To_scale - From_scale, | |
| dy = y, | |
| dr = Math.sqrt(dx * dx + dy * dy); | |
| return "M" + From_scale + " " + y + " A 43 50 0 0 1 " + To_scale + " " + y; | |
| }) | |
| .style("fill", "none") | |
| .style("opacity", 0) | |
| .call(transition) | |
| .on("mouseover", function(d){ | |
| d3.selectAll("path").style("opacity", 0.5) | |
| d3.select(this).style("opacity", 1).style("stroke-width", 2) | |
| d3.selectAll(".rect").style("opacity", 0.5) | |
| d3.select("." + "n" + d.index.replace(/ /g, "")).style("opacity", 1) | |
| }) | |
| .on("mouseout", function(d){ | |
| d3.selectAll("path").style("opacity", 1) | |
| d3.select(this).style("opacity", 1).style("stroke-width", 1) | |
| d3.selectAll(".rect").style("opacity", 1) | |
| }) | |
| function transition(path){ | |
| path.each(function(PathItem, index_1){ | |
| d3.select(this).transition() | |
| .delay(index_1 * 300 + 19) | |
| .duration(index_1 * 20 + 1000) | |
| .on("start", function(){ | |
| d3.select(this).style("opacity", 1) | |
| }) | |
| .on("end", function(d){ | |
| d3.select("#bar-" + d.index.replace(/ /g, "")) | |
| .transition() | |
| .attr("y", 0) | |
| .attr("height", function(d){ | |
| return height - yScale_bars(d.experience) | |
| }) | |
| }) | |
| .attrTween("stroke-dasharray", tweenDash) | |
| }) | |
| } | |
| function tweenDash(){ | |
| var l = this.getTotalLength(), | |
| i = d3.interpolateString("0," + l, l + "," + l) | |
| return function(t){ return i(t); }; | |
| } | |
| svg.append("g") | |
| .classed("xaxis", true) | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("fill", "#832129") | |
| svg.append("g") | |
| .classed("yaxis", true) | |
| .attr("transform", "translate(0," + -15 + ")") | |
| .call(yAxis) | |
| .selectAll("text") | |
| .style("fill", "none") | |
| // function arcs(d, bend){ | |
| // bend = bend || 1; | |
| // } | |
| }); | |
| })() |
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"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| /* No style rules here yet */ | |
| body,html{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: "Arial", sans-serif; | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| #chart{ | |
| background-color: #1b1a1b; | |
| border: 1px solid none; | |
| } | |
| .yaxis path{ | |
| fill: none; | |
| stroke: none; | |
| } | |
| .yaxis line{ | |
| fill: none; | |
| stroke: none; | |
| stroke-width: 2px; | |
| shape-rendering: crispEdges; | |
| opacity: 0.7; | |
| stroke-dasharray: 3,3; | |
| } | |
| .xaxis path, | |
| .xaxis line{ | |
| fill: none; | |
| stroke: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id = "baseball_arcs"></div> | |
| <script src="baseball_life_arcs.js"></script> | |
| <div id="bars_reversed"></div> | |
| <script src="reversed_barchart.js"></script> | |
| </div> | |
| </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 () { | |
| var w = 700; | |
| var h = 400; | |
| var margin = { | |
| top: 40, | |
| bottom: 40, | |
| left: 40, | |
| right: 40 | |
| } | |
| var width = w - margin.left - margin.right; | |
| var height = h - margin.top - margin.bottom; | |
| var xScale = d3.scaleLinear() | |
| .range([0, width]) | |
| var yScale = d3.scaleLinear() | |
| .range([height, 0]) | |
| var xAxis = d3.axisTop() | |
| .scale(xScale) | |
| var yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| var svg = d3.select("#bars_reversed") | |
| .append("svg") | |
| .attr("id", "chart") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("Baseball_careers_1999.csv", function(error, data){ | |
| data.forEach(function(d){ | |
| d.experience = +d.experience | |
| d.index = d.index | |
| }); | |
| xScale.domain([0, 15]) | |
| yScale.domain([0, 500]) | |
| svg.selectAll(".rect") | |
| .data(data) | |
| .enter() | |
| .append("rect") | |
| .attr("class", function(d){ | |
| return "rect " + "n" + d.index.replace(/ /g, "") // needs to be a different letter than the last one to work | |
| }) | |
| .attr("id", function(d){ | |
| return "bar-" + d.index.replace(/ /g, "") // needs to be a different letter than the last one to work | |
| }) | |
| .attr("x", function(d){ | |
| return xScale(d.index) | |
| }) | |
| .attr("y", 0) | |
| .attr("height", 0) | |
| .attr("width", 30) | |
| .style("fill", "#832129") | |
| .on("mouseover", function(d, i){ | |
| d3.selectAll("rect").style("opacity", 0.5) | |
| d3.select(this).style("opacity", 1) | |
| d3.selectAll(".arcs").style("opacity", 0.5) | |
| d3.select("." + "l" + d.index.replace(/ /g, "")).style("opacity", 1).style("stroke-width", 2) | |
| }) | |
| .on("mouseout", function(d){ | |
| d3.selectAll(".arcs").style("opacity", 1).style("stroke-width", 1) | |
| d3.selectAll("rect").style("opacity", 1) | |
| // d3.select(this).style("stroke", "#832129").style("opacity", 1) | |
| }) | |
| // .transition() | |
| // .attr("y", 0) | |
| // .attr("height", function(d){ | |
| // return height - yScale(d.experience) | |
| // }) | |
| // .duration(300) | |
| // .delay(function(d, i){ | |
| // return i * 500; | |
| // }) | |
| svg.append("g") | |
| .classed("xaxis", true) | |
| .attr("transform", "translate(15,0)") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("fill", "#832129") | |
| }); | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment