Sankey diagram of citation flows
// viewof ts_or_not = select({
// title: "Timeseries or not",
// description: "Please indicate whether you want it to be dynamic or not. If True, it will show year by year; if False, it will show the aggregated result.",
// options: ["True", "False"],
// value: "True"
// })
viewof timeseries = Inputs.select(['True', 'False'], {label: "Timeseries"})
viewof source = Inputs.radio(new Map([["Cited papers", "REF"], ["VIS", "VIS"]]), {value: "REF", label: "Source of citation"})
// viewof valuecutoff = Inputs.range([0, 500], {step: 1, label: "Appear at least n times", value: 100})
viewof rankCutoff = Inputs.range([1, 150], {step: 1, label: "Top N pairs :", value: 100})
viewof playSpeedSankey = Inputs.radio(new Map([["Very slow", 0], ["Slow", 1], ["Medium", 2], ["Fast", 3], ["Very fast", 4]]), {value: 3, label: "Adjust play speed"})
viewof yearRange = rangeSlider({
min: 1990,
max: 2021,
step: 1,
title: 'Adjust the year range as you need.'
})
// viewof yearRange = Inputs.range([1990, 2021], {step: 1, value: 1990, label: "Year range", width:500})
// viewof currYear = Scrubber(_.range(yearRange[0], yearRange[1]+1, 1), {
// autoplay: false,
// loop: false,
// alternate: false,
// initial: 31,
// // format: date => date.toLocaleString("ko-KR", {year: "numeric", month: "numeric", day: "numeric"}),
// delay: 5000 - playSpeedSankey * 1000,
// })
viewof currYear = Scrubber(_.range(1990, 2022, 1), {
autoplay: false,
loop: false,
alternate: false,
// format: date => date.toLocaleString("ko-KR", {year: "numeric", month: "numeric", day: "numeric"}),
delay: 5000 - playSpeedSankey * 1000,
})
displayText = source == "REF" ? "From cited paper to VIS" : "From VIS to citing papers"
fromWhere = md`<h2>${displayText}</h2>`
year = md`<h2>Year displayed: ${currYear}</h2>`
tsDisaplayText = timeseries === "True" ? "Below is time-series data:" : "Below is aggregated data for VIS 1990-2021:"
// tsDisaplayText = ts_or_not === "True" ? "Below is time-series data:" : "Below is aggregated data for VIS 1990-2021:"
tsDisplay = md`${tsDisaplayText}`
chartSankey = SankeyChart({
links: data
}, {
nodeGroup: d => d.id.split(/\W/)[0], // take first word for color
nodeAlign, // e.g., d3.sankeyJustify; set by input above
linkColor, // e.g., "source" or "target"; set by input above
format: (f => d => `${f(d)} citations`)(d3.format(",.1~f")),
width: `${frameWidth}`,
height: 600
})
// data = (ts_or_not === "True")? sankeyTS.filter(
// d => d.year == currYear && d['source name'] == source && d.level == level && d.value >= valuecutoff) :
// sankeyAggregated.filter(d => d['source name'] == source && d.level == level && d.value >= valuecutoff)
data = (timeseries === "True")? sankeyTS.filter(
d => d.year == currYear && d['source name'] == source && d.level == level && d.rank <= rankCutoff) :
sankeyAggregated.filter(d => d['source name'] == source && d.level == level && d.rank <= rankCutoff)
// data = (ts_or_not === "True")? sankeyTS.filter(
// d => d.year == currYear && d['source name'] == source && d.level == level && d.rank <= rankCutoff) :
// sankeyAggregated.filter(d => d['source name'] == source && d.level == level && d.rank <= rankCutoff)
sankeyTS = d3.csv("https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/sankey/sankey_ts_df.csv")
sankeyAggregated = d3.csv("https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/sankey/sankey_aggregated_df.csv")
d3Sankey = require.alias({"d3-array": d3, "d3-shape": d3, "d3-sankey": "d3-sankey@0.12.3/dist/d3-sankey.min.js"})("d3-sankey")
import {select, radio, slider, checkbox} from "@jashkenas/inputs"
import {swatches} from "@d3/color-legend"
import { rangeSlider as rangeSlider } from '@mootari/range-slider'
import {Scrubber} from "@mbostock/scrubber"
import {howto} from "@d3/example-components"
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.
