Week 1a - Introduction to HTML, CSS, and JavascriptA Minimal Introduction to JavaScript and ObservableCrash course on SVGCanvas introductionIntroduction to D3’s scalesQuantile, Quantize and Threshold scalesIntroduction to D3.jsData loading and managementFirst D3.js visualizationHierarchical data visualizationNetwork visualizationGeographic DataMy First D3.js visualizationMy second visualization in d3.jsMy reusable visualization in d3.jsMy third visualization in d3.js
Reusable code for D3.js
x = d3
.scaleLinear()
.domain([0, d3.max(numbers)])
.range([0, width])
y = d3
.scaleBand()
.domain(d3.range(numbers.length)) // note: this is an array containing an entry for each entry in the data
.range([0, 20 * numbers.length]) // we allocate a space of 20px for each entry, to accomodate space for paddings
{
// adapted from https://observablehq.com/@d3/lets-make-a-bar-chart/2?collection=@d3/lets-make-a-bar-chart
const svg = d3
.create("svg")
.attr("width", width) // change
.attr("height", y.range()[1]) // change
.attr("font-family", "sans-serif")
.attr("font-size", "10")
.attr("text-anchor", "end");
const bar = svg
.selectAll("g")
.data(numbers)
.join("g")
.attr("transform", (d, i) => `translate(0,${y(i)})`); // change
bar
.append("rect")
.attr("fill", "steelblue")
.attr("width", x) // change
.attr("height", y.bandwidth() - 1); // change
bar
.append("text")
.attr("fill", "white")
.attr("x", d => x(d) - 3) // change
.attr("y", y.bandwidth() / 2) // change
.attr("dy", "0.35em")
.text(d => d);
return svg.node();
}
plain_bar_chart_skel = function() {
let width = 420;
let height = 200;
function me(selection) {}
me.width = function(value) {
if (!arguments.length) return width;
width = value;
return me;
};
me.height = function(value) {
if (!arguments.length) return height;
height = value;
return me;
};
return me;
}
plain_bar_chart = function() {
let width = 300;
let height = 200;
function me(selection) {
const svg = selection
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("font-family", "sans-serif")
.attr("font-size", "10")
.attr("text-anchor", "end");
// update scales before updating the content
const _x = d3
.scaleLinear()
.domain([0, d3.max(selection.datum())])
.range([0, width]);
const _y = d3
.scaleBand()
.domain(d3.range(selection.datum().length))
.range([0, height]);
const bar = svg
.selectAll("g")
.data(selection.datum())
.join("g")
.attr("transform", (d, i) => `translate(0,${_y(i)})`);
bar
.append("rect")
.attr("fill", "steelblue")
.attr("width", _x)
.attr("height", _y.bandwidth() - 1);
bar
.append("text")
.attr("fill", "white")
.attr("x", d => _x(d) - 3)
.attr("y", _y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => d);
return me;
}
me.width = function(value) {
if (!arguments.length) return width;
width = value;
x.range([0, width]);
return me;
};
me.height = function(value) {
if (!arguments.length) return height;
height = value;
y.range([0, height]);
return me;
};
return me;
}
{
const div = d3.create("div");
const barCharter = plain_bar_chart()
.width(400)
.height(200);
div.datum(numbers).call(barCharter);
return div.node();
}
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.
