The avatar for @stakeholder
Stakeholder
Public
Edited
Mar 29, 2023
1 star
1
Insert cell
Insert cell
Insert cell
viewof rows = Inputs.table(search)
Insert cell
viewof version = Inputs.range([0, 10], {value: 10, step: 1, label: "Version"})
Insert cell
Insert cell
d3tip = require('d3-tip')
Insert cell
data = chord_new
Insert cell
names = Array.from(new Set(data.flatMap(d => [d.Stakeholders, d.Target])))
Insert cell
// matrix = {
// const index = new Map(names.map((name, i) => [name, i]));
// const matrix = Array.from(index, () => new Array(names.length).fill(0));
// for (const {Stakeholders, Target, value_0} of data) matrix[index.get(Stakeholders)][index.get(Target)] += value_0;
// return matrix;
// }
Insert cell
Insert cell
Insert cell
chord = d3.chordDirected()
.padAngle(10 / innerRadius)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
Insert cell
chords = chord(matrix)
Insert cell
// for (let i =0; i< chords.length; i++) {
// for(let j =0; i< data.length; j++){
// if (names[chords[i].source.index] == data[j].Stakeholders){
// if (names[chords[i].target.index] == data[j].Target){
// chords[i].content = data[j].content
// }
// }
// }
Insert cell
content = {
const index = new Map(names.map((name, i) => [name, i]));
const matrix = Array.from(index, () => new Array(names.length).fill(0));
for (const {Stakeholders, Target, content} of data) matrix[index.get(Stakeholders)][index.get(Target)] = content;
return matrix;
}
Insert cell
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
Insert cell
ribbon = d3.ribbonArrow()
.radius(innerRadius - 0.5)
.padAngle(1 / innerRadius)
Insert cell
// color = d3.scaleOrdinal(names, d3.schemeCategory10)
Insert cell
color = d3.scaleOrdinal()
.domain(names)
.range(['#7178b5', '#0faca3', '#7ec1ca', '#a5ba37', '#f6bd0d', '#e27c40','#9b47a2']);
// .range(['#383e6d', '#096762', '#39828b', '#637021', '#b28807', '#b4541b','#602c65']);
Insert cell
formatValue = x => `${x.toFixed(0)}`
Insert cell
outerRadius = innerRadius + 6
Insert cell
innerRadius = Math.min(width, height) * 0.5 - 100
Insert cell
width = 440
Insert cell
height = width
Insert cell
d3 = require("d3@6")
Insert cell
import {table} from "@tmcw/tables@513"
Insert cell
tb = table(data, {
sortable: true,
columns: {
Fare: {
formatter(val, i) {
// A formatter that changes its behavior based on the row index,
// so we don’t repeat the $ for every row.
return i === 0 ? d3.format('$.2f')(val) : d3.format('.2f')(val);
}
},
Name: {
formatter(val) {
// Formatters can also return HTML values! Here’s
// one that highlights first names.
let parts = val.match(/([^,]*)\,(.*)/);
return html`<strong>${parts[1]}</strong>, ${parts[2]}`;
}
}
}
})
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
chord_new@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell

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.
Learn more