JSFiddle - React, Tailwind, and code Playground

by Musakkhir Sayyed

HTML

<div id="chart" style="overflow:scroll">

CSS

.node
        {
            font: 300 11px "Helvetica Neue" , Helvetica, Arial, sans-serif;
            fill: #bbb;
        }
        
        .node:hover
        {
            fill: #000;
        }
        
        .link
        {
            stroke: steelblue;
            stroke-opacity: .4;
            fill: none;
            pointer-events: none;
        }
        
        .node:hover, .node--source, .node--target
        {
            font-weight: 700;
        }
        
        .node--source
        {
            fill: #d62728;
        }
        
        .node--target
        {
            fill: #2ca02c;
        }
        
        .link--source, .link--target
        {
            stroke-opacity: 1;
            stroke-width: 2px;
        }
        
        .link--source
        {
            stroke: #2ca02c;
        }
        
        .link--target
        {
            stroke: #d62728;
        }

JavaScript

var flaredata=[
    {
        "name": "webmetro.com",
        "imports": [
            "insider.webmetro.com",
            "webmetro.com/careers",
            "webmetro.com/contact",
            "webmetro.com/contact/events",
            "webmetro.com/contact/events.html",
            "webmetro.com/contact/request-consultation",
            "webmetro.com/contact/request-consultation.html",
            "webmetro.com/contact-us.html",
            "webmetro.com/internet-marketing",
            "webmetro.com/internet-marketing/online-media",
            "webmetro.com/internet-marketing/online-media/affiliate-marketing",
            "webmetro.com/internet-marketing/online-media/display-advertising",
            "webmetro.com/internet-marketing/online-media/email-marketing",
            "webmetro.com/internet-marketing/online-media/social-advertising",
            "webmetro.com/internet-marketing/online-media/video-marketing",
            "webmetro.com/internet-marketing/search-marketing",
            "webmetro.com/internet-marketing/search-marketing/comparison-search",
            "webmetro.com/internet-marketing/search-marketing/content-marketing",
            "webmetro.com/internet-marketing/search-marketing/mobile-search",
            "webmetro.com/internet-marketing/search-marketing/pay-per-click-ppc",
            "webmetro.com/internet-marketing/search-marketing/seo",
            "webmetro.com/internet-marketing/user-engagement",
            "webmetro.com/internet-marketing/user-engagement/conversion-rate-optimization",
            "webmetro.com/internet-marketing/user-engagement/landing-page-optimization",
            "webmetro.com/internet-marketing/user-engagement/prospect-cultivation",
            "webmetro.com/internet-marketing/user-engagement/social-media-marketing",
            "webmetro.com/internet-marketing/user-engagement/website-design",
            "webmetro.com/our-work",
            "webmetro.com/our-work/case-studies",
           ...