INSEE ParquetWord Tour: 40k words and their friendsHello, SageMath cellPoisson disk sampling functionsSubresource Integrity Hash GeneratorChatterjee correlationTagged bordersHeatmapSankey link paths (#91)Search with AccentsHello, EDTF!Canvas axisTernary binningTable ExtractorjszipDiscrete distribution inputHello, talismanSpatial interpolation: Voronoi & Blur (code)Canvas path blurPaths Delaunay hoverFill with strokeDruidJSAnimating a cardinal curve between control points
Scintillating symbols
chart0 = chart(
data,
"a) <strong>Difference in shape.</strong> The complete fusion is striking. Selection is difficult.",
new Map([
[
"circle",
`<circle r=${Math.sqrt(64 / Math.PI)} stroke-width="0.5" stroke="white">`
],
["triangle", `<path d="${triangle}" stroke-width="0.5" stroke="white">`],
[
"square",
`<rect x=-4 y=-4 width=8 height=8 stroke-width="0.5" stroke="white">`
]
])
)
chart1 = chart(
data,
"b) <strong>Difference in scintillation.</strong> Selection is easier to operate. Complete fusion is obtained by looking at the drawing from a distance of 1 meter.",
new Map([
[
"circle1",
`<circle r=${Math.sqrt(64 / Math.PI)} stroke-width="0.5" stroke="white">`
],
[
"eye",
`<circle r=${Math.sqrt(64 / Math.PI)} fill="white" stroke="#000" />
<circle r=${Math.sqrt(64 / Math.PI) * 0.6} />`
],
["cross", `<path d=${cross} stroke-width="0.5" stroke="white">`]
])
)
chart2 = chart(
data,
"c) <strong>Difference in value.</strong> Selection is striking, fusion is more difficult to achieve.",
new Map([
[
"circle01",
// the black circle must be larger because of its white stroke
`<circle r=${Math.sqrt(80 / Math.PI)} stroke-width="0.5" stroke="white">`
],
[
"circle02",
`<circle r=${Math.sqrt(64 / Math.PI)} fill="white" stroke="#000">`
],
[
"circle03",
`<circle r=${Math.sqrt(
64 / Math.PI
)} fill="${hachures02.url()}" stroke="#000">`
]
]),
hachures02
)
hachures02 = textures
.lines()
.orientation("6/8")
.size(2.2)
.strokeWidth(0.5)
chart3 = chart(
data,
"Colors might be helped by different shapes.",
new Map([
[
"circle31",
`<circle r=${Math.sqrt(64 / Math.PI)} fill="${
d3.schemeTableau10[0]
}" stroke-width="0.5" stroke="#000">`
],
[
"eye3",
`<g fill="${d3.schemeTableau10[1]}"><circle r=${Math.sqrt(
64 / Math.PI
)} fill="white" stroke="#000" />
<circle r=${Math.sqrt(64 / Math.PI) * 0.6} />`
],
[
"cross3",
`<path d=${cross} stroke-width="0.5" fill="${d3.schemeCategory10[2]}" stroke="black">`
]
])
)
function chart(data, comment, symbols, hachures) {
const x = d3.scaleLinear(d3.extent(data, d => d.x), [20, width - 20]);
const y = d3.scaleLinear(d3.extent(data, d => d.y), [20, height - 23]);
const s = d3.scaleOrdinal(new Set(data.map(d => d.type)), symbols);
const r = d3.scaleSqrt();
const svg = d3
.create("svg")
.attr("viewBox", `0 0 ${width} ${height + 60}`)
.attr("width", width)
.classed("chart", true);
if (hachures) svg.call(hachures);
svg
.append("rect")
.attr("x", 1)
.attr("y", 1)
.attr("width", width - 2)
.attr("height", height - 2)
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke", "black");
svg
.append("defs")
.selectAll()
.data(symbols)
.join("g")
.attr("id", d => d[0])
.html(d => d[1]);
svg
.append("g")
.selectAll()
.data(data)
.join("use")
.attr("href", d => "#" + s(d.type)[0])
.attr("transform", d => `translate(${x(d.x)},${y(d.y)})scale(${r(3.8)})`);
svg
.append("foreignObject")
.attr("width", width)
.attr("height", 55)
.attr("y", height + 5)
.append("xhtml:div")
.html(comment);
return svg.node();
}
height = 292
width = height
cross = {
const p = d3.path();
d3.symbolCross.draw(p, 58); // 64 is a bit too much
return "" + p;
}
triangle = {
const p = d3.path();
d3.symbolTriangle.draw(p, 60);
return "" + p;
}
d3 = require("d3@6")
textures = require("textures@1")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.