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")
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.
