Skip to content

Instantly share code, notes, and snippets.

@edwinschaap

edwinschaap/index.html

Last active December 16, 2015 16:59
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 edwinschaap/5467052 to your computer and use it in GitHub Desktop.
Save edwinschaap/5467052 to your computer and use it in GitHub Desktop.
Download ZIP
d3.js visual approach
Raw
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js - Top 10 used words</title>
<script type="text/javascript" src="http://mbostock.github.io/d3/d3.v2.js?2.9.5"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
</head>
<body>
The top 10 most used words:
<script type='text/javascript'>
var data = [
{ word: 'texaschainsaw3d', count: 2820},
{ word: 'rt', count: 1750,},
{ word: 'treysongz', count: 1186},
{ word: 'http', count: 1177},
{ word: 't.co', count: 1150},
{ word: 'going', count: 687},
{ word: 'lionsgatehorror', count: 679},
{ word: 'tomorrow', count: 512},
{ word: 'angelsattcm3d', count: 391},
{ word: 'leatherface', count: 388}
];
var chart = d3.select("body").append("div")
.attr("class", "chart");
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d.count+ "px"; })
.text(function(d) { return d.word; });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment