Sankey diagram of citation flows (fork)
viewof timeseries = 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 level = radio({
title: 'Level of concept',
// description: 'Please select your preferred contact method',
options: [
{ label: 'L0', value: '0' },
{ label: 'L1', value: '1' },
{ label: 'L2', value: '2' },
{ label: 'L3', value: '3' },
],
value: '1'
})
// viewof level = Inputs.radio(new Map([["L0", 0], ["L1", 1], ["L2", 2], ["L3", 3]]), {value: 1, label: "Level of concept"})
viewof source = radio({
title: 'Source of citations',
// description: 'Please select your preferred contact method',
options: [
{ label: 'Cited papers', value: 'REF' },
{ label: 'Citing papers', value: 'VIS' },
],
value: 'REF'
})
// viewof source = Inputs.radio(new Map([["Cited papers", "REF"], ["Citing papers", "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 = slider({
min: 1,
max: 150,
step: 1,
description: "Top N pairs",
value: 100,
})
// viewof rankCutoff = Inputs.range([1, 150], {step: 1, label: "Top N pairs :", value: 100})
viewof frameWidth = slider({
min: 400,
max: 800,
step: 10,
description: "Frame width",
value: 600,
})
// viewof frameWidth = Inputs.range([400, 800], {step: 10, label: "Frame width", value: 600})
// viewof timeseriesss = select({
// title: "Link color",
// options: [
// {label: "static", value: "#aaa"},
// {label: "source-target", value: "source-target"},
// {label: "source", value: "source"},
// {label: "target", value: "target"},
// ],
// value: "source"
// })
viewof linkColor = Inputs.select(new Map([
["static", "#aaa"],
["source-target", "source-target"],
["source", "source"],
["target", "target"],
]), {
value: new URLSearchParams(html`<a href>`.search).get("color") || "source",
label: "Link color"
})
viewof nodeAlign = Inputs.select(["left", "right", "center", "justify"], {
value: "justify",
label: "Node alignment"
})
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 = FileAttachment("sankey_ts_df.csv").csv()
sankeyAggregated = FileAttachment("sankey_aggregated_df.csv").csv()
// d3Sankey = require.alias({"d3-array": d3, "d3-shape": d3, "d3-sankey": "d3-sankey@0.12.3/dist/d3-sankey.min.js"})("d3-sankey")
d3Sankey = require("d3-sankey@0.12")
// import {select, radio, slider, checkbox} from "@jashkenas/inputs"
import {select} from "@jashkenas/inputs"
import {radio} from "@jashkenas/inputs"
import {slider} 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.
