// viewof timeseries = Inputs.select(["True", "False"], {value: "True", label: "Timeseries or not"})
// 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 timeseriesCO = Inputs.select(['True', 'False'], {label: "Timeseries"})
// viewof playSpeedCO = {
// const phrases = [
// 'Very slow.',
// 'Slow.',
// 'Medium.',
// 'Fast.',
// 'Very fast.',
// ];
// const s = slider({
// value: 2, min: 0, max: 4, step: 1,
// display: v => phrases[v],
// title: 'Adjust your play speed',
// });
// s.input.style.width = "70%";
// return s;
// }
viewof playSpeedCO = Inputs.radio(new Map([["Very slow", 0], ["Slow", 1], ["Medium", 2], ["Fast", 3], ["Very fast", 4]]), {value: 3, label: "Adjust play speed"})
year = md`<h2>Year displaying: ${currYearCO}</h2>`
// year = md`
// <div style="overflow-x:auto;">
// <h4 style="font-size: 5vw;font-family:'Kumbh Sans'">Year: ${currYear}</h4>
// `
chartCo = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 1.5, -height / 1.5, width*1.3, height*1.3]);
const chords = chord(matrix);
const group = svg.append("g")
.attr("font-size", 14)
.attr("font-family", "sans-serif")
.selectAll("g")
.data(chords.groups)
.join("g");
group.append("path")
.attr("fill", d => color(names[d.index]))
.attr("d", arc);
group.append("text")
.each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
.attr("dy", "0.35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${outerRadius + 5})
${d.angle > Math.PI ? "rotate(180)" : ""}
`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => names[d.index]);
// group.append("title")
// .text(d => `${names[d.index]}
// ${d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} outgoing →
// ${d3.sum(chords, c => (c.target.index === d.index) * c.source.value)} incoming ←`);
svg.append("g")
.attr("fill-opacity", 0.75)
.selectAll("path")
.data(chords)
.join("path")
.style("mix-blend-mode", "multiply")
.attr("fill", d => color(names[d.target.index]))
.attr("d", ribbon)
.append("title")
.text(d => `${names[d.source.index]} <> ${names[d.target.index]} ${d.source.value}`);
return svg.node();
}
// data = fulldata.filter(d => d.level == `${level}`).filter(d => d.value >= `${cutoff}`)
data = (timeseriesCO === "True")? timeseriesData
.filter(d => d.year == currYearCO)
.filter(d => d.level == `${levelCO}`)
.filter(d => d.value >= `${cutoff}`) :
fulldata
.filter(d => d.level == `${levelCO}`)
.filter(d => d.value >= `${cutoff}`)
fulldata = d3.csv("https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/co_occurrance/aggregated_cooccurance_df.csv")
timeseriesData = d3.csv("https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/co_occurrance/ts_aggregated_cooccurance_df.csv")
rename = name => name.substring(name.indexOf(".") + 1, name.lastIndexOf("."))
names = Array.from(new Set(data.flatMap(d => [d.source, d.target]))).sort(d3.ascending)
matrix = {
const index = new Map(names.map((name, i) => [name, i]));
const matrix = Array.from(index, () => new Array(names.length).fill(0));
for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += value;
return matrix;
}
chord = d3.chordDirected()
.padAngle(10 / innerRadius)
.sortSubgroups(d3.ascending)
.sortChords(d3.ascending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbon()
.radius(innerRadius - 1)
.padAngle(1 / innerRadius)
color = d3.scaleOrdinal(names, d3.schemeCategory10)
outerRadius = innerRadius + 15
innerRadius = Math.min(width, height) * .5 - 90
width = 750
height = width
import {Scrubber} from "@mbostock/scrubber"
import { rangeSlider as rangeSlider } from '@mootari/range-slider'
import {swatches} from "@d3/color-legend"
import {select, radio, slider, checkbox} from "@jashkenas/inputs"
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.
