md`# tidy.js - prep data for Multi-Line Charts
Let's look at how we can use tidy.js to help us prep data for [multi-line charts](https://observablehq.com/@d3/multi-line-chart)`
Table(inputData)
tallData = tidy(
inputData,
pivotLonger({ cols: ['-name'], namesTo: 'month', valuesTo: 'value' }),
mutate({ value: d => +d.value })
)
Table(tallData)
groupedTallData = tidy(tallData, groupBy('name', groupBy.entriesObject()))
Table(groupedTallData)
groupedTallData2 = tidy(
tallData,
groupBy(
'name',
groupBy.entries({
mapEntry: ([key, values]) => ({ name: key, values }),
mapLeaf: d => d.value
})
)
)
Table(groupedTallData2)
series = tidy(
inputData,
// make data tall (one object per value)
pivotLonger({ cols: ['-name'], namesTo: 'month', valuesTo: 'value' }),
// make value a number
mutate({ value: d => +d.value }),
// export into our desired shape with `name, values` as field names
groupBy(
'name',
groupBy.entries({
mapEntry: ([key, values]) => ({ name: key, values }),
mapLeaf: d => d.value
})
)
)
simpleMonths = Object.keys(inputData[0]).slice(1)
tidyMonths = tidy(tallData, distinct('month'), map(d => d.month))
simpleDates = tidyMonths.map(d3.utcParse("%Y-%m"))
tidyDates = tidy(
tallData,
distinct('month'),
mutate({ date: d => d3.utcParse('%Y-%m')(d.month) }),
map(d => d.date)
)
chartData = ({ y: 'Unemployment %', series: series, dates: tidyDates })
import { chart } with { chartData as data } from '@d3/multi-line-chart'
chart
statesSeries = tidy(
inputData,
// make data tall (one object per value)
pivotLonger({ cols: ['-name'], namesTo: 'month', valuesTo: 'value' }),
// make value a number, extract state
mutate({
value: d => +d.value,
state: d => /, (..)/.exec(d.name)[1]
}),
// add in an overall average per month, re-using the "state" field to identify it
groupBy('month', total({ value: mean('value') }, { state: 'Overall' })),
// summarize at the state level for each month
groupBy(['state', 'month'], summarize({ value: mean('value') })),
// export into our desired shape with `name, values` as field names
groupBy(
'state',
groupBy.entries({
mapEntry: ([key, values]) => ({ name: key, values }),
mapLeaf: d => d.value
})
)
)
Table(statesSeries)
chartData2 = ({
y: 'Unemployment % by State',
series: statesSeries,
dates: tidyDates
})
import { xAxis, yAxis, line, hover, height } with {
chartData2 as data
} from '@d3/multi-line-chart'
import {
tidy,
pivotLonger,
groupBy,
mutate,
distinct,
map,
summarize,
mean,
total
} from '@pbeshai/tidyjs'
import { Table } from "@observablehq/inputs"
tsvInput = await FileAttachment("unemployment.tsv").text()
inputData = d3.tsvParse(tsvInput)
d3 = require("d3@^6.1")
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.
