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
Embedding multiple cells from notebook into a React App Community Help	17	2474	September 21, 2019
How to copy the code from an Observable in to a Create-react-app? Community Help	2	2871	July 14, 2018
Problems adding a local data set to Zoomable Sunburts Community Help	6	726	October 17, 2019
how do i embed the notebook in react Community Help	6	1636	May 27, 2021
Overcoming difficulties with JSON data loading (or another mistake) Community Help	24	32052	October 7, 2018

Zoomable Sunburst d3 chart with react

Related topics