Skip to content

Instantly share code, notes, and snippets.

@davewood
Forked from mbostock/.block
Last active Aug 29, 2015
Embed
What would you like to do?

This simple bar chart demonstrates two new features of D3 2.6:

  • Namespaces are now optional! You can now append an SVG element by just saying append("svg"), without specifying the namespace explicitly as "svg:svg". Adding an element whose name is a known prefix (in d3.ns.prefix) implies a namespace; similarly, appending or inserting an element will inherit the namespace from its parent.

  • The axis component now supports ordinal scales. The labels on the left side of the bar chart are rendered with the axis component.

<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.6.0"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
}
.bar text.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
</style>
</head>
<body>
<script type="text/javascript">
var m = [30, 10, 10, 30],
w = 960 - m[1] - m[3],
h = 930 - m[0] - m[2];
var format = d3.format(",.0f");
var x = d3.scale.linear().range([0, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("sample-data.csv", function(data) {
// Parse numbers, and sort by value.
data.forEach(function(d) { d.value = +d.value; });
data.sort(function(a, b) { return b.value - a.value; });
// Set the scale domain.
x.domain([0, d3.max(data, function(d) { return d.name; })]);
y.domain(data.map(function(d) { return d.name; }));
var bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("height", y.rangeBand());
bar.append("text")
.attr("class", "value")
.attr("x", function(d) { return x(d.value); })
.attr("y", y.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return d.name; });
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
</html>
name value
SubTest 14487
VarVal 6436
VarQueryPath 3783
Comment 3033
VarCheck 2140
EPP 700
REST 649
VarRand 562
ClearVars 470
CountQueryPath 432
DateAdd 239
Transformation 238
SSH 148
VarCheckRegExp 147
Math 89
DateFormat 86
DateCheck 66
EPPConnect 41
EPPDisconnect 35
DB 28
SOAP 19
PrintVars 18
DBDisconnect 8
DBConnect 8
DataCmp 3
ForLoop 3
Diff 2
Multiline 2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment