Published
Edited
Jul 9, 2020
colorDomain = [median * 0.85, median * 0.95, median * 1.05, median * 1.15]
series = d3.stack()
.keys(priceComponents)
(slicedData)
.map(d => (d.forEach(v => v.key = d.key), d))
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d["Total exkl. MWST"])])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(slicedData.map(d => d.Netzbetreiber))
.range([margin.top, height - margin.bottom])
.padding(0.1)
xAxis = g => g
.attr("transform", `translate(0, ${margin.top})`)
.call(d3.axisTop(x))
.call(g => g.select(".domain").remove())
colorScale = d3.scaleThreshold().domain(colorDomain).range(colorRange)
colorRange = ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"].reverse()
median = d3.median(forChart, d => d["Total exkl. MWST"])
forChart = data
.filter(d => d.Produkt === product && d.Kategorie === category)
.sort((a, b) =>
sortingOrder === "A → Z"
? d3.ascending(a.Netzbetreiber, b.Netzbetreiber)
: sortingOrder === "Z → A"
? d3.descending(a.Netzbetreiber, b.Netzbetreiber)
: sortingOrder === "1 → 9"
? d3.ascending(a["Total exkl. MWST"], b["Total exkl. MWST"])
: d3.descending(a["Total exkl. MWST"], b["Total exkl. MWST"]))
categories = [...new Set(data.map(d => d.Kategorie))]
data = d3.csvParse(await FileAttachment("rohdaten2020.csv").text(), d3.autoType)
margin = ({top: 30, right: 10, bottom: 0, left: 20})
import {autoSelect} from "@jashkenas/inputs"
import {number} from "@jashkenas/inputs"
d3 = require("d3@5")
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.
