Skip to content

Instantly share code, notes, and snippets.

@zsobhani zsobhani/index.html
Last active Aug 29, 2015

What would you like to do?
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
width: 700px;
margin: 20px 0;
height: 300px;
background: #eee;
button {
margin: 20px 0 0 20px;
<h2>Playing around with <a href="">duopixel's bl.ock 4063326</a></h2>
<div id="line"></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var w = 700;
var h = 300;
var svg ="#line")
.attr("width", w)
.attr("height", h)
.attr("id", "visualization")
.attr("xmlns", "");
var data = d3.range(11).map(function(){return Math.random()*10})
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
.x(function(d,i) {return x(i);})
.y(function(d) {return y(d);})
var path = svg.append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "2")
.attr("fill", "none");
var lineLen = path.node().getTotalLength();
var dashLen = 10;
var ddLen = dashLen*2;
var darray =dashLen;
while(ddLen < lineLen){
.attr("stroke-linecap", "round")
.attr("stroke-dasharray", darray + ","+lineLen)
.attr("stroke-dashoffset", lineLen)
.attr("stroke-dashoffset", 0);
svg.on("click", function(){
.attr("stroke-dashoffset", totalLength);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.