Last active
August 25, 2016 15:28
-
-
Save bradoyler/85911182ee1698385e0f20087a62833b to your computer and use it in GitHub Desktop.
D3-Node Histogram example using d3@v4 https://github.com/bradoyler/d3-node
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const D3Node = require('d3-node'); | |
const d3 = require('d3-v4') | |
const styles = ` | |
.bar rect { | |
fill: steelblue; | |
} | |
.bar text { | |
fill: #fff; | |
font: 10px sans-serif; | |
}`; | |
var options = { | |
svgStyles: styles, | |
d3Module: d3 | |
}; | |
var d3n = new D3Node(options); | |
// from https://bl.ocks.org/mbostock/3048450 | |
var data = d3.range(1000).map(d3.randomBates(10)); | |
var formatCount = d3.format(",.0f"); | |
var margin = {top: 10, right: 30, bottom: 30, left: 30}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scaleLinear() | |
.rangeRound([0, width]); | |
var bins = d3.histogram() | |
.domain(x.domain()) | |
.thresholds(x.ticks(20)) | |
(data); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(bins, function(d) { return d.length; })]) | |
.range([height, 0]); | |
var svg = d3n.createSVG() | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var bar = svg.selectAll(".bar") | |
.data(bins) | |
.enter().append("g") | |
.attr("class", "bar") | |
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); | |
bar.append("rect") | |
.attr("x", 1) | |
.attr("width", x(bins[0].x1) - x(bins[0].x0) - 1) | |
.attr("height", function(d) { return height - y(d.length); }); | |
bar.append("text") | |
.attr("dy", ".75em") | |
.attr("y", 6) | |
.attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2) | |
.attr("text-anchor", "middle") | |
.text(function(d) { return formatCount(d.length); }); | |
svg.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
console.log(d3n.svgString()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment