Skip to content

Instantly share code, notes, and snippets.

@flunky

flunky/index.html

Last active March 26, 2017 05:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flunky/21acb83751de367f7860ad61541216b5 to your computer and use it in GitHub Desktop.
Save flunky/21acb83751de367f7860ad61541216b5 to your computer and use it in GitHub Desktop.
Download ZIP
How much I'm impressed with my daughter Hannah
Raw
index.html
<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.chart rect { fill: steelblue }
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
transform: rotate(0deg);
}
</style>
<html><body>
<svg class="chart"></svg>
<script>
var margin = 50;
var width = 240;
var height = 300;
var data = [.1,.05,1.1];
var x = d3.scale.ordinal()
.domain([0,1,2])
.rangeBands([0,width]);
var xh = d3.scale.ordinal()
.domain(["not Hannah","not Hannah ","Hannah"])
.rangeBands([0,width]);
var y = d3.scale.linear()
.domain([0,1.1])
.range([height,0]);
var chart = d3.select(".chart");
chart.attr("width",width + 2*margin)
.attr("height",height + 2*margin)
.append("g")
.attr("transform","translate(" + (1.5*margin) + "," + margin + ")")
.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("width",39)
.attr("height",function(d) { return height - y(d); })
.attr("x",function(d,i) { return x(i); })
.attr("y",function(d) { return y(d); });
var xAxis = d3.svg.axis()
.scale(xh)
.orient("bottom")
.ticks(6);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(11,"%");
chart.append("g")
.attr("transform", "translate(" + margin + "," + (height+margin) + ")")
.attr("class","axis")
.call(xAxis);
chart.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")")
.attr("class","axis")
.call(yAxis);
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment