Platform
Resources
Pricing
Sign in
Get started
cgrb
Workspace
Fork
Published
By
cgrb
Edited
Aug 3, 2021
Fork of
Badewasserqualitäts-Monitoring
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
table
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
map
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
infoText
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
id
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
locationData
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scatter
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
margin
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bisect
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
callout
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mapLakes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mapRivers
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataTG
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataZH
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
categories
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
uniqueLocations
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
waterColors
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
symbols
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
symbol
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
star
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
circle
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
triangle
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
square
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
infoboxQuality
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
infoboxImage
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
placesRe
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
parseDate
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
format
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
formatDate
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
formatYear
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
minYear
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
currYear
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ZoomStart
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
plotWidth
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3format
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3Legend
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
L
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
leaflet
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
leaftletCSS
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
style
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML