2a:null 2b:["$","title",null,{"children":"Sankey diagram of citation flows (fork) | Hongtao Hao | Observable"}] 31:T1a77,function SankeyChart({ nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkValue = ({value}) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 1, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 1, // left margin, in pixels } = {}) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id})); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]})); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey.sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]) ({nodes, links}); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link.append("linearGradient") .attr("id", d => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") .attr("stop-color", ({source: {index: i}}) => color(G[i]))) .call(gradient => gradient.append("stop") .attr("offset", "100%") .attr("stop-color", ({target: {index: i}}) => color(G[i]))); link.append("path") .attr("d", linkPath) .attr("stroke", linkColor === "source-target" ? ({index: i}) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({source: {index: i}}) => color(G[i]) : linkColor === "target" ? ({target: {index: i}}) => color(G[i]) : linkColor) .attr("stroke-width", ({width}) => Math.max(1, width)) .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); if (Tl) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 14) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(({index: i}) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), {scales: {color}}); }32:[{"id":"ecf784e919dc3570cda464dbf4c4664e3ce136d010aed83fff4f4752c44ba39373a9a93206b30b91a91122cdda829f92847cfb93d3b0585df74b7982806e96bc","href":"https://static.observableusercontent.com/files/ecf784e919dc3570cda464dbf4c4664e3ce136d010aed83fff4f4752c44ba39373a9a93206b30b91a91122cdda829f92847cfb93d3b0585df74b7982806e96bc","name":"sankey_aggregated_df.csv","type":"text/csv","lastModified":1649168195594.664,"size":3876146},{"id":"8e705ef3d3b5d5a010d998213f09996524b8d694d392933fe8733c20e2adbb074ac9274fcd9a18a19a29af569a60221f4360caf40a806875d07b560cfe73d760","href":"https://static.observableusercontent.com/files/8e705ef3d3b5d5a010d998213f09996524b8d694d392933fe8733c20e2adbb074ac9274fcd9a18a19a29af569a60221f4360caf40a806875d07b560cfe73d760","name":"sankey_ts_df.csv","type":"text/csv","lastModified":1649168195594.664,"size":9463782}] 2e:{"id":"f1472fe0d22c1870","slug":"sankey-diagram-of-citation-flows-fork","title":"Sankey diagram of citation flows (fork)","thumbnail":"a24772b575bbbe0790463bddf050469a6fca686ec32c319aac56b26ce42b927d","access_level":"public","create_time":"$D2022-04-05T14:16:35.594Z","update_time":"$D2022-04-05T15:06:42.901Z","view_time":null,"first_public_time":"$D2022-04-05T15:02:34.213Z","fork":{"id":"bad9aa4af49a00e6","slug":"sankey-diagram-of-citation-flows","title":"Sankey diagram of citation flows","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Sankey diagram of citation flows (fork)","cells":[{"id":0,"value":"# Sankey diagram of citation flows (fork)","pinned":true,"hidden":false,"mode":"md"},{"id":5,"value":"viewof timeseries = select({\n title: \"Timeseries or not\",\n 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.\",\n options: [\"True\", \"False\"],\n value: \"True\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"// viewof timeseries = Inputs.select(['True', 'False'], {label: \"Timeseries\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof level = radio({\n title: 'Level of concept',\n // description: 'Please select your preferred contact method',\n options: [\n { label: 'L0', value: '0' },\n { label: 'L1', value: '1' },\n { label: 'L2', value: '2' },\n { label: 'L3', value: '3' },\n ],\n value: '1'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"// viewof level = Inputs.radio(new Map([[\"L0\", 0], [\"L1\", 1], [\"L2\", 2], [\"L3\", 3]]), {value: 1, label: \"Level of concept\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof source = radio({\n title: 'Source of citations',\n // description: 'Please select your preferred contact method',\n options: [\n { label: 'Cited papers', value: 'REF' },\n { label: 'Citing papers', value: 'VIS' },\n ],\n value: 'REF'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"// viewof source = Inputs.radio(new Map([[\"Cited papers\", \"REF\"], [\"Citing papers\", \"VIS\"]]), {value: \"REF\", label: \"Source of citation\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// viewof valuecutoff = Inputs.range([0, 500], {step: 1, label: \"Appear at least n times\", value: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof rankCutoff = slider({\n min: 1, \n max: 150, \n step: 1, \n description: \"Top N pairs\",\n value: 100,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"// viewof rankCutoff = Inputs.range([1, 150], {step: 1, label: \"Top N pairs :\", value: 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"viewof frameWidth = slider({\n min: 400, \n max: 800, \n step: 10, \n description: \"Frame width\",\n value: 600,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"// viewof frameWidth = Inputs.range([400, 800], {step: 10, label: \"Frame width\", value: 600})","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"// viewof timeseriesss = select({\n// title: \"Link color\",\n// options: [\n// {label: \"static\", value: \"#aaa\"},\n// {label: \"source-target\", value: \"source-target\"},\n// {label: \"source\", value: \"source\"},\n// {label: \"target\", value: \"target\"},\n// ],\n// value: \"source\"\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof linkColor = Inputs.select(new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"],\n]), {\n value: new URLSearchParams(html``.search).get(\"color\") || \"source\",\n label: \"Link color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof nodeAlign = Inputs.select([\"left\", \"right\", \"center\", \"justify\"], {\n value: \"justify\",\n label: \"Node alignment\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof playSpeedSankey = {\n const phrases = [\n 'Very slow.',\n 'Slow.',\n 'Medium.',\n 'Fast.',\n 'Very fast.',\n ]; \n const s = slider({\n value: 3, min: 0, max: 4, step: 1,\n display: v => phrases[v],\n title: 'Adjust your play speed',\n });\n s.input.style.width = \"50%\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof yearRange = rangeSlider({\n min: 1990,\n max: 2021,\n step: 1,\n title: 'Adjust the year range as you need.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof currYear = Scrubber(_.range(yearRange[0], yearRange[1]+1, 1), {\n autoplay: false,\n loop: false,\n alternate: false,\n initial: 31,\n // format: date => date.toLocaleString(\"ko-KR\", {year: \"numeric\", month: \"numeric\", day: \"numeric\"}),\n delay: 5000 - playSpeedSankey * 1000,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"displayText = source == \"REF\" ? \"From cited paper to VIS\" : \"From VIS to citing papers\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"fromWhere = md`

${displayText}

Year displayed: ${currYear}