Visualization, Prototypes, ML, Data wrangling and Art.
urlsCsv
urls = new Map(urlsCsv.map(d => [dataCsv.columns.indexOf(d.id), d.url]))
dataCsv
dataCsv.columns
columns = dataCsv.columns.map(formatKey)
formatKey = d => d.replace(/\r/g,"").replace(/\n/g," ").replace(/- /g,"").replace(/\"/g,"").normalize()
data = dataCsv
.map(d => {
const values = Object.values(d)
values[11] = parseNumber(values[11])
return values
})
.filter(d => d[1] != "")
//.map(d => [...d])
//.map(d => (d[11] = parseNumber(d[11]), d))
parseNumber = d => parseInt((""+d).replace(/,/g, "").split(".")[0]) || undefined
parseNumber("61,876,000.00")
dataLookup = new Map(data.map(d => [d[1], d]))
<style>
h4 {margin: initial !important;}
<style>
paddingLeft = width * 0.3
data.filter(d => d[11] > 0)
sectorsColorsKeys = Object.keys(sectorsColors)
parseNumberTree("93.369.000€")
<style >
.observablehq p{ margin: inherit;}
</style>
view1 = html`
${draftsStacked.map(d => html`
<div style="margin-bottom: 2em">
<div style="margin-bottom: 0.5em"><b>${d.name}</b> ${d.date} <span style="white-space: nowrap;">(<a href="${d.url}" target="_blank">${d.lobbies.length} Kommentare</a>)</span></div>
${chartStacked(d.stack)}
</div>
`)}
`
import {fileInput} from "@mbostock/file-input"
import {swatches} from "@d3/color-legend"
import {form, formValue} from "@mbostock/form-input"
d3 = require("d3@6")
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.
