I got the solution to that.
Thanks for the advice.https://observablehq.com/@d3/zoomable-sunburst in this. There is one issue.
Check this?
I created this GIST if anyone finds it helpful it uses D3 and React and is based on the code of ObservableHQ
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}show original
data.js
export default {
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "value": 3938},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()show original
1 Like
Thanks for doing this, it really helped get me started.