<script>
import {onMount} from 'svelte';
import * as d3 from 'd3';
let width = 450;
let element;
onMount(async function() {
let data = await d3.json('https://vega.github.io/vega-datasets/data/miserables.json');
console.log(data);
let chart = ForceGraph(data, {
nodeId: d => d.index,
nodeGroup: d => d.group,
nodeTitle: d => `${d.name}\n${d.group}`,
linkStrokeWidth: l => Math.sqrt(l.value),
width,
height: 600,
});
d3.select(element).append(() => chart);
// Or alternatively, via the native DOM API:
// element.appendChild(chart)
});
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/force-directed-graph
function ForceGraph({
nodes, // an iterable of node objects (typically [{id}, …])
links // an iterable of link objects (typically [{source, target}, …])
}, {
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
nodeTitle, // given d in nodes, a title string