Published
Edited
Feb 25, 2021
1 fork
Importers
firstTimeSankey = drawSankey(firstTime)
drawSankey(lowValue)
drawSankey(inactive)
drawSankey(inactiveChangeOnly)
function getHighValueData(weeksAgo) {
const index = (rawData.length - weeksAgo) % rawData.length
const d = rawData[index].transitions
const links = [
{source: 'Low-Value →', target: 'High-Value', value: d['Low to High-Value'] },
{source: 'Inactive →', target: 'High-Value', value: d['Reactivated High-Value'] },
{source: 'First Time →', target: 'High-Value', value: d['New High-Value'] },
{source: 'High-Value →', target: 'High-Value', value: d['High-Value'] },
{source: 'High-Value', target: '→ High-Value', value: d['High-Value'] },
{source: 'High-Value', target: 'Low-Value', value: d['High to Low-Value'] },
{source: 'High-Value', target: 'Inactive', value: d['Lapsed High-Value'] },
]
return { nodes: [...nodes, {name: '→ High-Value'}], links }
}
function getHighValueJourney (weeksAgo) {
const index = (rawData.length - weeksAgo) % rawData.length
const enterWeek = rawData[index - 1]?.transitions || {}
const exitWeek = rawData[index].transitions
const links = [
{source: 'Low-Value →', target: 'High-Value', value: enterWeek['Low to High-Value'] },
{source: 'Inactive →', target: 'High-Value', value: enterWeek['Reactivated High-Value'] },
{source: 'First Time →', target: 'High-Value', value: enterWeek['New High-Value'] },
{source: 'High-Value →', target: 'High-Value', value: enterWeek['High-Value'] },
{source: 'High-Value', target: '→ High-Value', value: exitWeek['High-Value'] },
{source: 'High-Value', target: 'Low-Value', value: exitWeek['High to Low-Value'] },
{source: 'High-Value', target: 'Inactive', value: exitWeek['Lapsed High-Value'] },
]
return { nodes: [...nodes, {name: '→ High-Value'}], links }
}
highValueJourney = {
const enterWeek = rawData[rawData.length - 2].transitions
const exitWeek = rawData[rawData.length - 1].transitions
const links = [
{source: 'Low-Value →', target: 'High-Value', value: enterWeek['Low to High-Value'] },
{source: 'Inactive →', target: 'High-Value', value: enterWeek['Reactivated High-Value'] },
{source: 'First Time →', target: 'High-Value', value: enterWeek['New High-Value'] },
{source: 'High-Value →', target: 'High-Value', value: enterWeek['High-Value'] },
{source: 'High-Value', target: '→ High-Value', value: exitWeek['High-Value'] },
{source: 'High-Value', target: 'Low-Value', value: exitWeek['High to Low-Value'] },
{source: 'High-Value', target: 'Inactive', value: exitWeek['Lapsed High-Value'] },
]
return { nodes: [...nodes, {name: '→ High-Value'}], links }
}
inactiveChangeOnly = {
const d = rawData[rawData.length - 1].transitions
const links = [
{source: 'First Time →', target: 'Inactive', value: d['Bounced'] },
{source: 'High-Value →', target: 'Inactive', value: d['Lapsed High-Value'] },
{source: 'Low-Value →', target: 'Inactive', value: d['Lapsed Low-Value'] },
{source: 'Inactive', target: 'High-Value', value: d['Reactivated High-Value'] },
{source: 'Inactive', target: 'Low-Value', value: d['Reactivated Low-Value'] },
]
return { nodes: nodes.filter(x => x.name !== 'Inactive →'), links }
}
tick = {
let i = 0
while (true) {
yield Promises.delay(2000, i++)
}
}
d3.schemeTableau10
d3 = require("d3-color@2", "d3-scale-chromatic@2")
import {drawSankey} with {stateColor as color} from '@olizilla/sankey-diagram-data-as-arg-edition'
import {Range} from "@observablehq/inputs"
import {Scrubber} from "@mbostock/scrubber"
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.
