Skip to content

Instantly share code, notes, and snippets.

@ZLester

ZLester/.block

Last active April 2, 2018 03:04
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 ZLester/98b8a26c58114aba5a18c4dc7d3ae3e5 to your computer and use it in GitHub Desktop.
Save ZLester/98b8a26c58114aba5a18c4dc7d3ae3e5 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data = [
[
"will",
1265
],
[
"know",
1035
],
[
"one",
907
],
[
"lord",
840
],
[
"us",
749
],
[
"like",
727
],
[
"want",
723
],
[
"now",
667
],
[
"men",
658
],
[
"man",
640
],
[
"king",
620
],
[
"come",
607
],
[
"never",
554
],
[
"father",
547
],
[
"good",
544
],
[
"go",
518
],
[
"back",
513
],
[
"think",
501
],
[
"get",
466
],
[
"see",
465
],
[
"right",
461
],
[
"need",
457
],
[
"grace",
446
],
[
"take",
445
],
[
"well",
435
],
[
"time",
423
],
[
"lady",
409
],
[
"just",
406
],
[
"way",
374
],
[
"yes",
373
],
[
"tell",
363
],
[
"people",
362
],
[
"make",
356
],
[
"north",
356
],
[
"going",
349
],
[
"queen",
338
],
[
"say",
323
],
[
"dead",
315
],
[
"stark",
303
],
[
"ever",
300
],
[
"let",
298
],
[
"little",
295
],
[
"brother",
294
],
[
"kill",
292
],
[
"ser",
291
],
[
"mother",
291
],
[
"long",
287
],
[
"many",
284
],
[
"fight",
276
],
[
"name",
272
],
[
"give",
262
],
[
"told",
257
],
[
"find",
256
],
[
"please",
253
],
[
"girl",
248
],
[
"better",
248
],
[
"king's",
248
],
[
"boy",
244
],
[
"got",
243
],
[
"oh",
243
],
[
"first",
242
],
[
"always",
238
],
[
"nothing",
238
],
[
"die",
236
],
[
"son",
232
],
[
"much",
231
],
[
"day",
226
],
[
"said",
225
],
[
"every",
225
],
[
"must",
224
],
[
"help",
224
],
[
"killed",
219
],
[
"love",
216
],
[
"war",
216
],
[
"life",
212
],
[
"keep",
211
],
[
"jon",
210
],
[
"winterfell",
208
],
[
"world",
207
],
[
"may",
207
],
[
"house",
207
],
[
"last",
206
],
[
"night",
205
],
[
"made",
204
],
[
"watch",
203
],
[
"lannister",
201
],
[
"army",
201
],
[
"saw",
199
],
[
"look",
198
],
[
"still",
197
],
[
"home",
196
],
[
"leave",
196
],
[
"great",
195
],
[
"wall",
194
],
[
"enough",
192
],
[
"done",
192
],
[
"even",
190
],
[
"old",
190
],
[
"away",
189
],
[
"gods",
187
]
];
var w = 1000;
var h = 500;
var barPadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => {
return i * (w / data.length);
})
.attr("y", 0)
.attr("width", w / data.length - barPadding)
.attr("height", (d) => d[1]/3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment