Skip to content

Instantly share code, notes, and snippets.

@estebanafonso
Created March 31, 2015 19:20
Show Gist options
  • Save estebanafonso/e399a78730b9abf58af8 to your computer and use it in GitHub Desktop.
Save estebanafonso/e399a78730b9abf58af8 to your computer and use it in GitHub Desktop.
Different Lego Sets by Theme 2014
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 3</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: gray;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 1400)
.attr("height", 800);
d3.csv("legobarchart.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.numtypes, +b.numtypes);
//If your numeric values aren't sorting properly,
//try commenting out the line above, and instead using:
//
//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
//
//Data coming in from the CSV is saved as strings (text),
//so the + signs here force JavaScript to treat those
//strings instead as numeric values, thereby fixing the
//sort order (hopefully!).
});
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 50)
.attr("y", function(d, i) {
return i * 15 + 25;
})
.attr("width", function(d) {
return d.numtypes * 15;
})
.attr("height", 12)
.attr("fill", "blue")
.append("title")
.text(function(d) {
return d.Theme + " had " + d.numtypes + " sets in 2014.";
});
});
</script>
</body>
</html>
Theme numtypes
Advanced Models 5
Agents 6
Architecture 2
Bricks and More 1
Castle 2
City 34
Collectable Minifigures 48
Creator 16
DC Comics Super Heroes 8
Disney Princess 7
Duplo 32
Friends 31
Fusion 4
HERO Factory 15
Ideas 4
Juniors 11
Legends of Chima 44
Marvel Super Heroes 13
Minecraft 7
Miscellaneous 2
Mixels 27
Ninjago 10
Promotional 8
Seasonal 10
Star Wars 34
Technic 11
Teenage Mutant Ninja Turtles 9
The Hobbit 4
The LEGO Movie 18
The Simpsons 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment