EJ Fox & Ian Johnson
streaming data, code, acid, design
black = "#333"
lightblue = "rgb(71,110,147)" //"rgb(71,104,141)" //"rgb(203,209,200)" // "rgb(135,164,174)" //"rgb(82,117,149)"
text = [
{
column: "Information",
text: "Information: selling information in the form of goods or services",
offset: "10%",
translate: { x: 0, y: -10 },
color: "rgb(82,117,149)",
line: "line",
wordspacing: 25,
texture: textures
.lines()
.stroke(black)
// .background("rgb(82,117,149)")
.background(black)
.orientation("3/8")
.size(lineSize)
.strokeWidth(1)
// .heavier(1)
},
{
column: "Construction",
text: "Construction: the building of large structures",
offset: "20%",
translate: { x: 0, y: 50 },
color: lightblue,
line: "line",
wordspacing: 25,
letterspacing: "0.3em",
texture: textures
.lines()
// .stroke("black")
// .background("rgb(82,117,149)")
.stroke(black)
.background(lightblue)
.orientation("3/8")
.size(lineSize)
.strokeWidth(1)
// .heavier(1)
},
{
column: "Manufacturing",
text:
"Manufacturing: the making of articles on a large scale using machinery",
offset: "14%",
translate: { x: 20, y: 50 },
color: "rgb(135,164,174)",
line: "line",
wordspacing: 25,
texture: textures
.lines()
.stroke(black)
.background(lightblue)
.orientation("3/8")
.size(lineSize)
.strokeWidth(0)
.heavier(1)
},
{
column: "Self-employed",
text:
"Self-employed: working for oneself as a freelancer or the owner of a business rather than for an employer",
offset: "4%",
translate: { x: -20, y: -50 },
color: "rgb(203,209,200)",
line: "line",
wordspacing: 9,
letterspacing: "0.05em",
texture: textures
.lines()
.stroke(lightblue)
.orientation("3/8")
.size(lineSize)
.strokeWidth(1)
// .heavier(1)
}
]
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(
d3.axisLeft(
d3
.scaleLinear()
.domain([0, minimum])
.range([y(0), y(minimum)])
)
)
.call(g => g.select(".domain").remove())
// .call(g =>
// g
// .select(".tick:last-of-type text")
// .clone()
// .attr("x", 3)
// .attr("text-anchor", "start")
// .attr("font-weight", "bold")
// .text(data.y)
// )
yAxis2 = g =>
g
.attr("transform", `translate(${width - margin.right},0)`)
.call(
d3.axisRight(
d3
.scaleLinear()
.domain([0, maximum])
.range([y(0), y(maximum)])
)
)
.call(g => g.select(".domain").remove())
minimum = series[2][0][1]
maximum = d3.max(series[2], d => d[1])
columns = text.map(d => d.column)
translations = text.map(d => d.translate)
colors = text.map(d => d.color)
hellonearthiscolors = ["#2C4E68", "#457399", "#85A6B2", "#ACB8B9", "#EEE1D3"]
swatches({
color: d3
.scaleOrdinal()
.domain(hellonearthiscolors)
.range(hellonearthiscolors)
})
svg`<svg><defs><filter id="roughpaper"><feTurbulence type="fractalNoise" baseFrequency='0.04' numOctaves="5" result='noise' />
<feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
<feDistantLight azimuth='45' elevation='60' />
</feDiffuseLighting></filter></defs></svg>`
svg`<svg viewBox="0 0 1160 262" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path-1" d="M0.05078125,107.609375 L237.603724,72.0980293 C257.310784,69.1520578 277.448615,72.1606986 295.434067,80.7380223 L440.117791,149.73819 C461.666904,160.015036 486.181718,162.243221 509.230549,156.019944 L856.599391,62.2289545 C883.145646,55.0613586 911.471983,59.140881 934.916817,73.508129 L1160.05078,211.472656 L1160.05078,211.472656"></path>
</defs>
<text text-anchor="middle" style="font-size: 3rem;">
<textPath xlink:href="#path-1" startOffset="50%">
See you later, <a xlink:href="https://alligator.io/">Alligator</a>! 🐊 Not so soon, Baboon! 🐵
</textPath>
</text>
</svg>`
data = Object.assign(d3.csvParse(await FileAttachment("unemployment-2.csv").text(), d3.autoType), {y: "Unemployment"})
filtered = data.filter(d => {
return d.date > new Date("2008-01-01");
})
series = d3.stack().keys(columns)(filtered)
area = d3
.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
.curve(d3.curveStep)
line = d3
.line()
.x(d => x(d.data.date))
.y(d => y(d[1]))
.curve(d3.curveBasis)
midline = d3
.line()
.x(d => x(d.data.date))
.y(d => y(d[0] + (d[1] - d[0]) / 2))
.curve(d3.curveBasis)
line2 = d3
.line()
.x(d => x(d.data.date))
.y(d => y(d[1]))
.curve(d3.curveStep)
x = d3
.scaleUtc()
.domain(d3.extent(filtered, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])
color = d3
.scaleOrdinal()
.domain(columns)
.range(colors)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
height = width * .92
margin = ({ top: 100, right: 50, bottom: 30, left: 50 })
d3 = require("d3@6")
import {swatches} from "@d3/color-legend"
textures = require("textures")
lineSize = 7
texture = textures
.lines()
.stroke("black")
.background("red")
.orientation("3/8")
.size(lineSize * 2)
.strokeWidth(1)
.heavier(1)
textureURL = texture.url()
legend2 = {
const svg = d3
.create("svg")
.attr("viewBox", [-5, 0, width, 60])
.style("background-color", "#111");
// svg.append("g").attr("transform", "translate(${height},20)");
// .append(() => legend({ ramp, title: data.title, width: 260 }));
// for (let item of ramp) {
// svg.insert(() => item);
// }
text.forEach((d, i) => {
svg.call(text[i].texture);
});
// svg
// .append("g")
// .selectAll("rect")
// .data(d3.range(0, 10).map(d => (d / 10) * signalMap[signal].extent[1]))
// .join("rect")
// .attr("fill", (d, i) => q(d).url())
// .attr("stroke", "#fff")
// .attr("width", width)
// .attr("height", 100)
// .attr("x", (d, i) => i * (100 + 5))
// .attr("y", 5);
return html`<div>${svg.node()}</div>`;
}
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.
