⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
Published
Edited
Nov 9, 2020
Importers
cell = createBarLine([bins, density], [x, y], {
xLabel: 'Time (days)',
yLabel: 'Density',
width: width,
height: 500
})
function createBarLine([bins, density], [data_x, data_y], options = {}) {
const graph = html`<div></div>`;
// Options
const lineColor =
options && options.hasOwnProperty('lineColor')
? options.lineColor
: '#957DAD';
const barColor =
options && options.hasOwnProperty('barColor')
? options.barColor
: '#FEC8D8';
// set the dimensions and margins of the graph
const margin = { top: 30, right: 0, bottom: 60, left: 60 };
const graph_width =
(options && options.width ? options.width : 350) -
margin.left -
margin.right;
const graph_height =
(options && options.height ? options.height : 200) -
margin.top -
margin.bottom;
const svg = d3
.select(graph)
.append("svg")
.attr("width", graph_width + margin.left + margin.right)
.attr("height", graph_height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear().range([0, graph_width]);
const y = d3.scaleLinear().range([graph_height, 0]);
x.domain([0, d3.max(bins)]);
y.domain([0, d3.max(density)]);
/*
* X Axis
*/
svg
.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${graph_height})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
// text label for the x axis
if (options && options.hasOwnProperty('xLabel')) {
svg
.append("text")
.attr("y", graph_height + margin.bottom - 10)
.attr("x", graph_width / 2)
.style("text-anchor", "middle")
.text(options.xLabel);
}
/*
* Y Axis
*/
svg.append("g").call(d3.axisLeft(y));
// text label for the y axis
if (options && options.hasOwnProperty('yLabel')) {
svg
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - graph_height / 2)
.attr("dy", ".8em")
.style("text-anchor", "middle")
.text(options.yLabel);
}
/*
* Barchart
*/
svg
.selectAll(".bar")
.data(d3.zip(bins, density))
.enter()
.append("rect")
.style("fill", barColor)
.attr("x", function(d) {
return x(d[0]);
})
.attr("width", graph_width / bins.length)
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return graph_height - y(d[1]);
});
/*
* Line
*/
const lineFunction = d3
.line()
.curve(d3.curveBasis)
.x(function(d) {
return x(d[0]);
})
.y(function(d) {
return y(d[1]);
});
const svgLine = svg
.append('path')
.attr('stroke', lineColor)
.attr('d', lineFunction(d3.zip(data_x, data_y)))
.attr('stroke-width', 2)
.attr('fill', 'none');
return graph;
}
d3 = require('d3')
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.
