Public
Edited
Mar 5
Orders-Table 1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// Group the data by several layers and sum up the sales
multiLevelGroup = d3.rollup(ordersTable1,
v => d3.sum(v, d => d.Sales),
d => d.Segment,
d => d.Region,
d => d.State,
d => d.Category,
d => d['Sub-Category']
);
// Convert the result to an array
multiGroupResult = Array.from(multiLevelGroup, ([segment, regions]) =>
Array.from(regions, ([region, states]) =>
Array.from(states, ([state, categories]) =>
Array.from(categories, ([category, subCategories]) =>
Array.from(subCategories, ([subCategory, sales]) => ({
Segment: segment,
Region: region,
State: state,
Category: category,
'Sub-Category': subCategory,
Sales: sales
}))
)
)
)
).flat(4);
// make a table
viewof table = Inputs.table(filteredData)
// Segment dropdown
viewof segmentSelect = Inputs.select(
Array.from(new Set(multiGroupResult.map(d => d.Segment))),
{
label: "Select Segment",
value: multiGroupResult[0].Segment
}
)
// Region dropdown
viewof regionSelect = Inputs.select(
Array.from(new Set(multiGroupResult.map(d => d.Region))),
{
label: "Select Region",
value: multiGroupResult[0].Region
}
)
// State dropdown
// Only show States that are in previously selected region
viewof stateSelect = Inputs.select(
Array.from(new Set(filteredData2.map(d => d.State))),
{
label: "Select State",
//value: filteredData2[0].State
value: defaultState
}
)
// make a copy of the original data
// filter that data based on the selection in "Region"
// then, use the result as the options for the "State" dropdown
multiGroupResult2 = multiGroupResult
// filter copied data based on the selection in "Region"
filteredData2 = multiGroupResult2.filter(d =>
(regionSelect == null || d.Region === regionSelect)
)
// filter data based on selection in Segment dropdown
// The result here is used in the final table
filteredData = multiGroupResult.filter(d =>
(segmentSelect == null || d.Segment === segmentSelect) &&
(regionSelect == null || d.Region === regionSelect) &&
(stateSelect == null || d.State === stateSelect)
)
// Conditional default State selected based on Region and Segment selected
defaultState = (regionSelect === 'South' && segmentSelect === 'Consumer') ? 'Arkansas' :
(regionSelect === 'South' && segmentSelect === 'Corporate') ? 'Tennessee' :
regionSelect === 'West' ? 'Utah' :
null; // Default value if no conditions are met
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.
