Last active
August 29, 2015 14:00
-
-
Save mrtriangle/11222739 to your computer and use it in GitHub Desktop.
Chart with Tension
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Tension</title> | |
| <style> | |
| body { | |
| font-family: "helvetica"; | |
| } | |
| button { | |
| margin: 0 7px 0 0; | |
| background-color: #f5f5f5; | |
| border: 1px solid #dedede; | |
| border-top: 1px solid #eee; | |
| border-left: 1px solid #eee; | |
| font-size: 12px; | |
| line-height: 130%; | |
| text-decoration: none; | |
| font-weight: bold; | |
| color: #565656; | |
| cursor: pointer; | |
| } | |
| .single-bar { | |
| min-height: 1px; | |
| min-width: 30px; | |
| background-color: #4682b4; | |
| margin-right: 1px; | |
| font-size: 10px; | |
| color: #f0f8ff; | |
| text-align: center; | |
| width: 15px; | |
| display: inline-block; | |
| } | |
| .baseline { | |
| height: 1px; | |
| background-color: black; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis .grid-line{ | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| stroke-opacity: .2; | |
| } | |
| .line{ | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 2; | |
| } | |
| .dot { | |
| fill: #fff; | |
| stroke: #000; | |
| } | |
| .area { | |
| stroke: none; | |
| fill: steelblue; | |
| fill-opacity: .2; | |
| } | |
| .pie text{ | |
| fill: white; | |
| font-weight: bold; | |
| } | |
| .bubble{ | |
| fill-opacity: .3; | |
| } | |
| .bar{ | |
| stroke: none; | |
| fill: steelblue; | |
| } | |
| text { | |
| font-size: 11px; | |
| pointer-events: none; | |
| } | |
| text.parent { | |
| fill: steelblue; | |
| } | |
| circle { | |
| fill: #ccc; | |
| stroke: #999; | |
| pointer-events: all; | |
| } | |
| circle.parent { | |
| fill: steelblue; | |
| fill-opacity: .1; | |
| stroke: steelblue; | |
| } | |
| circle.parent:hover { | |
| stroke-width: .5px; | |
| } | |
| circle.child { | |
| pointer-events: none; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var width = 500, | |
| height = 375, | |
| margin = 30, | |
| duration = 500, | |
| x = d3.scale.linear() | |
| .domain([0, 10]) | |
| .range([margin, width - margin]), | |
| y = d3.scale.linear() | |
| .domain([0, 1]) | |
| .range([height - margin, margin]); | |
| var data = d3.range(10).map(function(i){ | |
| return {x: i, y: (Math.sin(i * 3) + 1) / 2}; | |
| }); | |
| var svg = d3.select("body").append("svg"); | |
| svg.attr("height", height) | |
| .attr("width", width); | |
| renderAxes(svg); | |
| render([1]); | |
| function render(tension){ | |
| var line = d3.svg.line() | |
| .interpolate("cardinal") | |
| .x(function(d){return x(d.x);}) | |
| .y(function(d){return y(d.y);}); | |
| svg.selectAll("path.line") | |
| .data(tension) | |
| .enter() | |
| .append("path") | |
| .attr("class", "line"); | |
| svg.selectAll("path.line") | |
| .data(tension) // <-A | |
| .transition().duration(duration).ease("linear") // <-B | |
| .attr("d", function(d){ | |
| return line.tension(d)(data); // <-C | |
| }); | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("cx", function(d) { return x(d.x); }) | |
| .attr("cy", function(d) { return y(d.y); }) | |
| .attr("r", 4.5); | |
| } | |
| function renderAxes(svg){ | |
| var xAxis = d3.svg.axis() | |
| .scale(d3.scale.linear().domain([0, 10]).range([0, quadrantWidth()])) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(d3.scale.linear().domain([0, 1]).range([quadrantHeight(), 0])) | |
| .orient("left"); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", function(){ | |
| return "translate(" + xStart() + "," + yStart() + ")"; | |
| }) | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", function(){ | |
| return "translate(" + xStart() + "," + yEnd() + ")"; | |
| }) | |
| .call(yAxis); | |
| } | |
| function xStart(){ | |
| return margin; | |
| } | |
| function yStart(){ | |
| return height - margin; | |
| } | |
| function xEnd(){ | |
| return width - margin; | |
| } | |
| function yEnd(){ | |
| return margin; | |
| } | |
| function quadrantWidth(){ | |
| return width - 2 * margin; | |
| } | |
| function quadrantHeight(){ | |
| return height - 2 * margin; | |
| } | |
| </script> | |
| <h4>Line Tension:</h4> | |
| <div class="control-group"> | |
| <button onclick="render([0])">0</button> | |
| <button onclick="render([0.2])">0.2</button> | |
| <button onclick="render([0.4])">0.4</button> | |
| <button onclick="render([0.6])">0.6</button> | |
| <button onclick="render([0.8])">0.8</button> | |
| <button onclick="render([1])">1</button> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment