Skip to content

Instantly share code, notes, and snippets.

@BastiTee
Last active January 3, 2018 19:50
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save BastiTee/84675415bfbcaebbf5397e645a26b706 to your computer and use it in GitHub Desktop.
d3v4: bl.ocks.org boilerplate with d3-workbench
d3v4: bl.ocks.org boilerplate with d3-workbench
license: gpl-3.0
height: 400
border: no
logfile
pidfile

A d3v4 boilerplate that is compatible with bl.ocks.org and utilizes the latest stable d3-workbench snapshot.

Size of preview.png: 960x500

Size of thumbnail.png: 230x120

id value
1 2
<!doctype html>
<head>
<meta charset="utf-8">
<base target="_blank">
<!-- Alternative 1: Full distribution -->
<!-- <script src="https://bastitee.github.io/d3-workbench-ghp/0.9.0/d3-wb-distall.min.js"></script> -->
<!-- Alternative 2: Distribution subset with explicit dependencies -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://bastitee.github.io/d3-workbench-ghp/0.9.0/d3-wb.min.js"></script>
<script src="https://bastitee.github.io/d3-workbench-ghp/0.9.0/d3-wb-modules.min.js"></script>
</head>
<body id="standalone-body">
<svg id="standalone-svg"></svg>
</body>
<script src="svg.js"></script>
var cfg = d3wb.config()
.attr("margin", "50 50 50 50")
.attr("debug", true) // draw debug canvas
.data(["data.csv"])
var cv = cfg.toCanvas() // converts config object to canvas object
d3.queue() // load-pattern for multiple datasets
.defer(d3.csv, cv.data[0])
.await(function(error, data) {
// do something with the data..
cv.selectAll("text")
.data(data).enter().append("text")
.text(function(d) {
return d["id"] + " != " + d["value"]
})
.attr("text-anchor", "middle")
.attr("x", cv.wid / 2)
.attr("y", cv.margin.top + 10)
.attr("fill", d3wb.color.white)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment