Skip to content

Instantly share code, notes, and snippets.

@davelandry
Last active August 22, 2016 15: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 davelandry/7f87ef441549f0d21754 to your computer and use it in GitHub Desktop.
Save davelandry/7f87ef441549f0d21754 to your computer and use it in GitHub Desktop.
Simple Table

This visualization accompanies this blog post by Alexander Simoes, which is a guide to creating new visualization types. It is a table, or more descriptively, a visual representation of a table.

Featured on D3plus.org

<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = [
{"index":"a", "foo":20, "bar":5, "baz":77},
{"index":"b", "foo":2, "bar":20},
{"index":"c", "foo":94, "bar":55, "baz":101},
{"index":"d", "bar":95, "baz":82}
]
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("table")
.id("index")
.shape("check")
.cols(["foo", "bar", "baz"])
.draw()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment