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