Zoomable Sunburst d3 chart with react

sandinosaso · June 12, 2021, 7:21am

I created this GIST if anyone finds it helpful it uses D3 and React and is based on the code of ObservableHQ

gist.github.com

https://gist.github.com/sandinosaso/a42791de775c02a2b983d32c33baee75

App.jsx

import React from 'react';

import Sunburst from './sunburst';
import data from './data';

const App = () => {
  return <Sunburst
            data={chartData.data}
            keyId="Sunburst"
            width={600}

This file has been truncated. show original

data.js

export default {
  "name": "flare",
  "children": [
   {
    "name": "analytics",
    "children": [
     {
      "name": "cluster",
      "children": [
       {"name": "AgglomerativeCluster", "value": 3938},

This file has been truncated. show original

sunburst.jsx

import React, {useEffect, useRef} from 'react';
import { isEqual } from 'lodash/lang';
import * as d3 from 'd3';

const partition = (data) => {
  const root = d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.value - a.value);

  const partition = d3.partition()

This file has been truncated. show original

Topic		Replies	Views
Multiple Zoomable Sunburst Graphs on Page Community Help	0	401	October 31, 2020
D3.js: Not resizing in Browser New To Observable	3	475	December 12, 2023
Sunburst and TreeMap displaying graph-like data Community Help	20	1466	September 8, 2020
Observable notebook's cells in independent React Components Community Help	1	1253	September 21, 2019
Embedding multiple cells from notebook into a React App Community Help	17	2471	September 21, 2019

Zoomable Sunburst d3 chart with react

Related topics