dateFormatsIso = FileAttachment("Date Formats-ISO.tsv").tsv({ typed: true })
dateFormatsIso[0]["Date"] instanceof Date
dateFormatsSwiss = FileAttachment("Date Formats-Swiss.tsv").tsv({ typed: true })
dateFormatsSwiss[0]["Date"] instanceof Date
dateFormatsQuarter = FileAttachment("Date Formats-Quarter.tsv").tsv({
typed: true
})
dateFormatsQuarter[0]["Date"] instanceof Date
parseSwissFormat = d3.utcParse("%-d.%-m.%Y")
correctlyParsedSwissDates = FileAttachment("Date Formats-Swiss.tsv")
.tsv()
.then((data) => data.map((d) => ({ Date: parseSwissFormat(d.Date) })))
correctlyParsedSwissDates[0]['Date'] instanceof Date
swissGermanLocale = fetch(
"https://raw.githubusercontent.com/d3/d3-time-format/main/locale/de-CH.json"
)
.then((response) => response.json())
.then((obj) => d3.timeFormatLocale(obj))
formatPrettySwissDates = swissGermanLocale.utcFormat("%-d. %B %Y")
correctlyParsedSwissDates.map((d) => ({
originalDate: d.Date,
formattedDate: formatPrettySwissDates(d.Date)
}))
xTimeScale = d3
.scaleTime()
.domain(d3.extent(correctlyParsedSwissDates, (d) => d.Date))
.range([0, width])
svg({ width, height: 50 }, draw(d3.axisBottom(xTimeScale)))
shortSwissFormat = swissGermanLocale.utcFormat("%-d. %b")
svg(
{ width, height: 50 },
draw(d3.axisBottom(xTimeScale).tickFormat(shortSwissFormat))
)
svg(
{ width, height: 50 },
draw(
d3
.axisBottom(xTimeScale)
.ticks(d3.timeMonth)
.tickFormat(swissGermanLocale.utcFormat("%B"))
)
)
svg(
{ width, height: 50 },
draw(
d3
.axisBottom(xTimeScale)
.ticks(d3.timeWeek)
.tickFormat(swissGermanLocale.utcFormat("Woche %-V"))
)
)
import {style} from "@cas-datenvisualisierung/style"
xAxis = (xScale) => d3.create("svg:g").call(d3.axisBottom(xScale)).node()
draw = (whatToDraw) => d3.create("svg:g").call(whatToDraw).node()
className = `plot-${Math.random().toString(16).slice(2)}`
appendChildren = (node, children) => {
// undefined -> empty array
if (children === undefined) children = [];
// single element -> singleton array
if (!Array.isArray(children)) children = [children];
children = children.filter((c) => c !== null);
children.forEach((c) => node.appendChild(c));
}
// Adapted from Observable Plot
svg = ({ width, height }, children) => {
const svg = d3
.create("svg")
.attr("class", className)
.attr("fill", "currentColor")
.attr("font-family", "system-ui, sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("aria-label", undefined)
.attr("aria-description", undefined)
.call((svg) =>
svg.append("style").text(`
.${className} {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}
.${className} text,
.${className} tspan {
white-space: pre;
}
`)
)
.node();
appendChildren(svg, children);
return svg;
}
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.
