Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active September 13, 2016 22:21
Show Gist options
  • Save aaizemberg/33c96e48a6ecb77a732cc886eadbc569 to your computer and use it in GitHub Desktop.
Save aaizemberg/33c96e48a6ecb77a732cc886eadbc569 to your computer and use it in GitHub Desktop.
Download ZIP
probando d3.sketchy de sebastianmeier
Raw
index.html
<html>
<head>
<style>
rect{
fill:none;
stroke:#000;
}
path{
fill:none;
stroke:#000;
stroke-width:0.3;
stroke-linecap:round;
stroke-linejoin:round;
}
path.black{
stroke:black;
stroke-width:1;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//prjcts.sebastianmeier.eu/sketch/d3.sketchy.js"></script>
</head>
<body>
<script>
var w = 960, h = 500;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h)
var sketchy = d3sketchy();
var data = [15625084, 3308876, 3194537, 2890151, 1738929, 1448188, 1235994, 1214441, 1101593, 1055259, 992595, 874006, 681055, 673307, 638645, 551266, 530162, 509108, 432310, 367828, 333642, 318951, 273964, 127205];
var sx = d3.scale.linear().domain([0,d3.max(data)]).range([0,960-20]);
data.forEach(function(d,i) {
sketchy.rectStroke({svg:svg, x:10, y:10+(i*20), width:sx(d), height:19 });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment