Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created March 15, 2018 14:26
Show Gist options
  • Save lorenzopub/1205e8ca353da14c97a4b85a7a2664bc to your computer and use it in GitHub Desktop.
Save lorenzopub/1205e8ca353da14c97a4b85a7a2664bc to your computer and use it in GitHub Desktop.
Download ZIP
RoughJS & D3.js
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>RoughJS & D3.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.rawgit.com/pshihn/rough/9be60b1e/dist/rough.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
</head>
<body>
<h1>RoughJS & D3.js</h1>
<div id="viz"></div>
<script>
var width = 600, height = 410, margin = 10, labels_px = 200;
var canvas = d3.select('#viz').append('canvas')
.attr("id","canvas")
.attr('width', width)
.attr('height', height);
var data = [
{"provincia":"Buenos Aires","poblacion":15625084},
{"provincia":"Córdoba","poblacion":3308876},
{"provincia":"Santa Fe","poblacion":3194537},
{"provincia":"CABA","poblacion":2890151},
{"provincia":"Mendoza","poblacion":1738929},
{"provincia":"Tucumán","poblacion":1448188},
{"provincia":"Entre Ríos","poblacion":1235994},
{"provincia":"Salta","poblacion":1214441},
{"provincia":"Misiones","poblacion":1101593},
{"provincia":"Chaco","poblacion":1055259},
{"provincia":"Corrientes","poblacion":992595},
{"provincia":"Santiago del Estero","poblacion":874006},
{"provincia":"San Juan","poblacion":681055},
{"provincia":"Jujuy","poblacion":673307},
{"provincia":"Río Negro","poblacion":638645},
{"provincia":"Neuquén","poblacion":551266},
{"provincia":"Formosa","poblacion":530162},
{"provincia":"Chubut","poblacion":509108},
{"provincia":"San Luis","poblacion":432310},
{"provincia":"Catamarca","poblacion":367828},
{"provincia":"La Rioja","poblacion":333642},
{"provincia":"La Pampa","poblacion":318951},
{"provincia":"Santa Cruz","poblacion":273964},
{"provincia":"Tierra del Fuego","poblacion":127205}
];
var max = d3.max(data.map(function(d){return d.poblacion;}));
var rc = rough.canvas(document.getElementById('canvas'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var font_size = 16;
ctx.font = font_size + "px Helvetica";
ctx.textAlign="end";
rc.rectangle(1,1,width-2,height-2,{ roughness: 1, stroke: 'grey' });
data.forEach(
function(d,i) {
ctx.fillText(d.provincia, labels_px-margin, font_size+margin+i*((height-(2*margin))/data.length));
rc.rectangle(
labels_px,
margin+i*((height-(2*margin))/data.length),
d.poblacion / max * (width-labels_px-margin),
(height-2*margin)/data.length,
{ roughness: 1, fill: 'steelblue', stroke: 'grey' }
);
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment