Published
Edited
Aug 3, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/*
viewof infoBox = htl.html`<div class="tg2-wrap"><table class="tg2">
<thead>
<tr>
<th class="tg2-0lax" colspan="2">${map.clickedPlace.location}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg2-1lax">Badewasserqualität: ${infoboxQuality}</td>
<td class="tg2-1lax" rowspan="3">${infoboxImage}</td>
</tr>
<tr>
<td class="tg2-1lax">Letzte Messung: ${formatDate(
map.clickedPlace.datum
)}</td>
</tr>
<tr>
<td class="tg2-73oq">Messung durch: ${map.clickedPlace.source}</td>
</tr>
<tr>
<td class="tg2-73oq" colspan="2">Entwicklung der Badewasserqualität:<br>${viewof scatter}</td>
</tr>
</tbody>
</table></div>`
*/
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/*
viewof chart = {
const height = 250;

// Axis

const y = d3
.scalePoint()
.domain(["Mangelhaft", "Ausreichend", "Gut", "Ausgezeichnet"])
.range([height - margin.bottom, margin.top]);

const xAccessor = (d) => d.datum;
const yAccessor = (d) => d.quality;

const xAxis = (svg) =>
svg
.attr("transform", `translate(0,${margin.top})`)
.call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSize(height - 50)
.tickFormat((d) =>
d.toLocaleString("de-CH", {
month: "short",
year: "numeric"
})
)
)
.call((g) => g.select(".domain").remove())
.call((g) =>
g.attr("stroke", "currentColor").attr("stroke-opacity", 0.2)
);

const yAxis = (svg) =>
svg
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisRight(y)
.tickSize(width - margin.left - margin.right)
.tickValues(["Mangelhaft", "Ausreichend", "Gut", "Ausgezeichnet"])
)
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.selectAll(".tick:not(:first-of-type) line")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2)
)
.call((g) => g.selectAll(".tick text").attr("x", 0).attr("dy", -4));

// SVG
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

// Symbols
const symbols = svg
.append("g")
.attr("stroke-width", 1)
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("path")
.data(locationData)
.join("path")
.attr(
"transform",
(d) => `translate(${x(xAccessor(d))}, ${y(yAccessor(d))})`
)
.attr("fill", (d) => color(d.quality))
.attr(
"d",
d3
.symbol()
.type(function (d) {
if (d.quality == "Ausgezeichnet") {
return d3.symbolCross;
} else if (d.quality == "Gut") {
return d3.symbolSquare;
} else if (d.quality == "Ausreichend") {
return d3.symbolCircle;
} else if (d.quality == "Mangelhaft") {
return d3.symbolTriangle;
}
})
.size(200)
);

// TOOLTIPS
const tooltip = svg.append("g");

svg.on("touchmove mousemove", function (event) {
const { datum, quality } = bisect(d3.pointer(event, this)[1]);

tooltip.attr("transform", `translate(${x(datum)},${y(quality)})`).call(
callout,
`${datum.toLocaleString("de-CH", {
day: "numeric",
month: "short",
year: "numeric"
})}
${quality}`
);
});

svg.on("touchend mouseleave", () => tooltip.call(callout, null));

return svg.node();
}
*/
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
format = (date) =>
date.toLocaleString("de-CH", {
month: "short",
year: "numeric"
})
Insert cell
formatDate = d3.timeFormat("%d.%m.%Y")
Insert cell
formatYear = d3.timeFormat("%Y")
Insert cell
Insert cell
Insert cell
ZoomStart = d3.scaleLinear().domain([300, 1200]).range([9, 11])(width)
Insert cell
plotWidth = {
if (width >= 1100) {
return width / 1.5;
} else if (width < 1100 && width >= 750) {
return width / 3;
} else {
return width / 1.5;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { tidy, desc, asc, filter, distinct } from "@pbeshai/tidyjs"
Insert cell
d3Legend = require("d3-svg-legend")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more