Skip to content

Instantly share code, notes, and snippets.

@saraquigley
Last active November 5, 2015 05:24
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 saraquigley/875d852d7217bf0adcb9 to your computer and use it in GitHub Desktop.
Save saraquigley/875d852d7217bf0adcb9 to your computer and use it in GitHub Desktop.
favorite API functions

This fork of Mike Bostock's simple bar chart shows the favorite API functions of d3unconf(2015) attendees.

forked from mbostock's block: Simple Bar Chart

api frequency
selection.data() 3
d3.ascending() 1
d3.csv() 2
d3.dispatch() 1
d3.interpolate() 3
d3.json() 1
d3.layout.chord() 1
d3.layout.force() 5
d3.nest() 8
d3.selectAll() 1
d3.svg.line() 1
d3.transition() 8
selection.enter() 2
selection.transition() 1
d3.scale() 7
d3.select() 1
d3.unconf() 1
x.centroid() 1
d3.layout.x() 2
d3.mean() 1
d3.svg.x() 1
d3.timer() 1
d3.svg.brush() 1
d3.geo() 1
d3.geo.projection() 4
d3.geom.delaunay() 1
d3.geom.quadtree() 1
d3.geom.voronoi() 3
d3.map() 1
d3.range() 1
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 130, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
data.sort(function(a,b) {return b.frequency - a.frequency;})
x.domain(data.map(function(d) { return d.api; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.api); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
d3.selectAll(".x.axis .tick text")
.attr("transform","translate(-12,4)rotate(290)")
.style("text-anchor","end");
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment