Family first. People before programs. Basketball too.
Published
Edited
Sep 22, 2020
11 stars
createTexturedSvg = texture => {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.call(texture);
svg
.append("g")
.attr("fill", texture.url())
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg;
}
withLines = {
const texture = textures.lines();
const svg = createTexturedSvg(texture);
return svg.node();
}
withCircles = {
const texture = textures.circles().size(5);
const svg = createTexturedSvg(texture);
return svg.node();
}
withPolkaDots = {
const texture = textures
.circles()
.radius(4)
.fill("darkorange")
.strokeWidth(2)
.stroke("firebrick")
.complement()
.background("#ccc");
const svg = createTexturedSvg(texture);
return svg.node();
}
withHexagons = {
const texture = textures
.paths()
.d("hexagons")
.size(8)
.strokeWidth(2)
.stroke("darkorange");
const svg = createTexturedSvg(texture);
return svg.node();
}
withCrosses = {
const texture = textures
.paths()
.d("crosses")
.lighter()
.thicker();
const svg = createTexturedSvg(texture);
return svg.node();
}
withCaps = {
const texture = textures
.paths()
.d("caps")
.lighter()
.thicker()
.stroke("darkorange");
const svg = createTexturedSvg(texture);
return svg.node();
}
withWoven = {
const texture = textures
.paths()
.d("woven")
.lighter()
.thicker();
const svg = createTexturedSvg(texture);
return svg.node();
}
withWaves = {
const texture = textures
.paths()
.d("waves")
.thicker()
.stroke("firebrick");
const svg = createTexturedSvg(texture);
return svg.node();
}
withNylon = {
const texture = textures
.paths()
.d("nylon")
.lighter()
.shapeRendering("crispEdges");
const svg = createTexturedSvg(texture);
return svg.node();
}
withSquares = {
const texture = textures
.paths()
.d("squares")
.stroke("darkorange");
const svg = createTexturedSvg(texture);
return svg.node();
}
textures = require("textures")
d3 = require("d3@6")
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.
