React D3 Innovations

A groundbreaking React library for advanced data visualization, combining the power of D3.js with innovative interaction patterns and smart features.

Features

1. Smart Network Navigator

Interactive network visualization with advanced features:

• Force-directed layout with physics simulation
• Ghost trails showing historical movements
• Preview windows on hover with detailed node information
• Smart dragging with physics simulation
• State management for navigation history
• Customizable node and link styling
• Multiple layout options (force, circular, hierarchical, grid)
• Filtering and search capabilities

2. Temporal Force Graph

Time-based network visualization:

• Rewind/fast-forward controls for time navigation
• Temporal force fields affecting node positioning
• Ghost trails for historical movement patterns
• Predictive node positioning
• State management for temporal snapshots
• Animation controls for automatic playback

3. Adaptive Treemap Explorer

Dynamic hierarchical data visualization:

• Self-organizing layouts that adapt to focus
• Focus zones that redistribute space
• Context bubbles with additional insights
• Morphing transitions between structures
• Smart zooming capabilities
• Interactive exploration of hierarchical data

Installation

npm install react-d3-innovations d3

Peer Dependencies

This library requires the following peer dependencies:

npm install d3@^7.8.0

The following peer dependencies are optional but recommended for full functionality:

npm install lucide-react@^0.344.0

Usage

Smart Network Navigator

import { SmartNetworkNavigator } from 'react-d3-innovations';
import 'react-d3-innovations/style.css';

// Define nodes and links
const nodes = [
  { id: '1', label: 'Node 1', type: 'server', status: 'active' },
  { id: '2', label: 'Node 2', type: 'database', status: 'warning' },
  { id: '3', label: 'Node 3', type: 'client', status: 'inactive' },
];

const links = [
  { source: '1', target: '2', label: 'Connection 1' },
  { source: '2', target: '3', label: 'Connection 2' },
];

// Use the component
const MyNetwork = () => (
  <SmartNetworkNavigator
    nodes={nodes}
    links={links}
    width={800}
    height={400}
    onNodeClick={(node) => console.log('Clicked node:', node)}
    controls={{
      zoom: true,
      pan: true,
      search: true,
      filters: true,
      layout: true,
      grouping: true,
      theme: true
    }}
  />
);

Temporal Force Graph

import { TemporalForceGraph } from 'react-d3-innovations';
import 'react-d3-innovations/style.css';

// Define initial nodes and links
const initialNodes = [
  { id: '1', label: 'Node 1', color: '#ff7675' },
  { id: '2', label: 'Node 2', color: '#74b9ff' },
  { id: '3', label: 'Node 3', color: '#55efc4' },
];

const initialLinks = [
  { source: '1', target: '2' },
  { source: '2', target: '3' },
  { source: '3', target: '1' },
];

// Use the component
const MyTemporalGraph = () => (
  <TemporalForceGraph
    initialNodes={initialNodes}
    initialLinks={initialLinks}
    width={800}
    height={400}
    timeSteps={10}
  />
);

Adaptive Treemap

import { AdaptiveTreemap } from 'react-d3-innovations';
import 'react-d3-innovations/style.css';

// Define hierarchical data
const data = {
  name: "Root",
  children: [
    {
      name: "Category A",
      value: 100,
      color: "#ff7675",
      insights: "Growing trend",
      children: [
        { name: "A1", value: 40, color: "#fab1a0" },
        { name: "A2", value: 60, color: "#ffeaa7" }
      ]
    },
    {
      name: "Category B",
      value: 80,
      color: "#74b9ff",
      insights: "Stable performance",
      children: [
        { name: "B1", value: 30, color: "#81ecec" },
        { name: "B2", value: 50, color: "#55efc4" }
      ]
    }
  ]
};

// Use the component
const MyTreemap = () => (
  <AdaptiveTreemap
    data={data}
    width={800}
    height={400}
  />
);

Styling

This library includes minimal default styling. You can import the default styles:

import 'react-d3-innovations/style.css';

The components are designed to work with Tailwind CSS, but it's not required. You can customize the appearance using your own CSS.

Advanced Usage

Using Store for State Management

For advanced use cases, you can access the internal state stores:

import { useNetworkStore, SmartNetworkNavigator } from 'react-d3-innovations';

const MyAdvancedNetwork = () => {
  const { state, setLayout, updatePhysics } = useNetworkStore();
  
  // Custom controls for physics settings
  const handleGravityChange = (value) => {
    updatePhysics({ gravity: value });
  };
  
  return (
    <div>
      <div className="controls">
        <label>
          Gravity:
          <input 
            type="range" 
            min="0" 
            max="1" 
            step="0.1" 
            value={state.physics.gravity}
            onChange={(e) => handleGravityChange(parseFloat(e.target.value))}
          />
        </label>
      </div>
      
      <SmartNetworkNavigator
        nodes={nodes}
        links={links}
        width={800}
        height={400}
      />
    </div>
  );
};

API Reference

SmartNetworkNavigator Props

Prop	Type	Description
nodes	NetworkNode[]	Array of nodes to display
links	NetworkLink[]	Array of links between nodes
width	number	Width of the visualization
height	number	Height of the visualization
controls	NetworkControls	Configuration for visible controls
onNodeClick	(node: NetworkNode) => void	Callback when a node is clicked
onNodeHover	(node: NetworkNode | null) => void	Callback when a node is hovered
onLinkClick	(link: NetworkLink) => void	Callback when a link is clicked
onSelectionChange	(nodes: NetworkNode[], links: NetworkLink[]) => void	Callback when selection changes

TemporalForceGraph Props

Prop	Type	Description
initialNodes	NetworkNode[]	Initial array of nodes
initialLinks	NetworkLink[]	Initial array of links
width	number	Width of the visualization
height	number	Height of the visualization
timeSteps	number	Number of time steps to simulate

AdaptiveTreemap Props

Prop	Type	Description
data	TreemapNode	Hierarchical data to visualize
width	number	Width of the visualization
height	number	Height of the visualization

TypeScript Support

This library is written in TypeScript and includes comprehensive type definitions for all components, props, and data structures.

Browser Support

React D3 Innovations supports all modern browsers (Chrome, Firefox, Safari, Edge).

Contributing

Contributions are welcome! Please read our contributing guidelines for details.

Publishing Process

1. Make your changes
2. Run tests: npm test
3. Build the package: npm run build
4. Commit changes using conventional commits format
5. Push to GitHub
6. CircleCI will automatically publish to npm when pushed to main branch

License

MIT