Published
Edited
Jul 4, 2020
3 forks
3 stars
margin = ({top: 20, right: 30, bottom: 30, left: 50})
width = 960 - margin.left - margin.right
height = 500 - margin.top - margin.bottom
padding = 0.3
parms = {
var xh = 10
var xw = 10 }
data.map(function(d) { return d.name; })
x = d3.scaleBand() // was scale.ordinal()
.domain(data.map(function(d) { return d.name; }))
.range([0,width])
.padding(padding)
.round(true)
x.domain()
d3.max(data, function(d) { return d.end; })
y = d3.scaleLinear() // was scale.linear()
.domain([0, d3.max(data, function(d) { return d.end; })*1.1])
.range([height, 0])
y.domain()
xAxis = d3.axisBottom()
.scale(x)
yAxis = d3.axisRight()
.scale(y)
.tickFormat(function(d) { return dollarFormatter(d); })
{const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 50]);
svg.append("g")
.call(xAxis);
return svg.node();}
d3 = require("d3@5")
function dollarFormatter(n) {
n = Math.round(n);
var result = n;
if (Math.abs(n) >= 1000000000) {
result = Math.round(n/1000000000) + 'B';
} else if (Math.abs(n) >= 1000000) {
result = Math.round(n/1000000) + 'M';
} else if (Math.abs(n) >= 1000) {
result = Math.round(n/1000) + 'K';
}
return result;
}
dollarFormatter(1000)
html`<style>
.bar.total rect {
fill: steelblue;
}
.bar.positive rect {
fill: darkolivegreen;
}
.bar.negative rect {
fill: crimson;
}
.bar line.connector {
stroke: grey;
stroke-dasharray: 3 1;
}
.bar text {
fill: black;
font: 12px sans-serif;
text-anchor: middle;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
