Skip to content

Instantly share code, notes, and snippets.

@alansmithy alansmithy/.block

Last active Jul 24, 2017
What would you like to do?
fresh block
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
var w = 900
var h =560
var margin = {left:30,top:30,right:30,bottom:50}
var plotW = w-(margin.left+margin.right)
var plotH = h-(
var svg ="body").append("svg")
.attr("width", w)
.attr("height", h)
var data=[
var chart = svg.append("g")
var title = svg.append("text")
.text("Population structure of Uruguay, 1950 (%)")
.attr("y", 20)
.attr("x", margin.left)
.attr("font-size", 24)
.attr("font-family", "monospace")
var yScale = d3.scaleLinear()
//for the xscale, we want to extract the names of cats
var cats ={
var xScale = d3.scaleBand()
.padding(0.2)//adjust spacing between bars
//define axes
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
//render axes
var rects = chart.append("g").selectAll("rect")
return xScale(
return plotH-(yScale(d.val1))
.attr("y",function(d,i){return yScale(d.val1)})
//add a button
return plotH-(yScale(d.val2))
}).attr("y",function(d,i){return yScale(d.val2)})
title.text("Population structure of Uruguay, 2015 (%)")
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.