Data Driven Visualizations
for React Developers

Raw D3 Code, Made

What is <ad3lie/> ?

Key Features

Intuitive and Interactive

Modularized and lightweight library that transforms verbose, imperative, raw D3 code into reusable, fully declarative React components

Data-Driven DOM

User-input data combines the power of D3 with control of React's DOM rendering to dynamically generate visualizations

Ready to Go

Directly export prettier-formatted code and auto-parsed data files into projects in seconds

Application

Real-time User Interface

Generate Code without Touching Code

Adjust chart properties, export finished code, and work with data at ease

Click and slide me to see more!

Core Application
Features

Other libraries exist for React-d3 integration, but ad3lie is your optimized building tool.

Code-Splitting

Programmatic and dynamic imports. lazy() load only the code you need and reduce the amount of code needed on initial load.

Redux Integration

Persist state and manage data with the built-in Redux store. Specify your dataset and inputs once to generate multiple visualizations.

React Router

Dynamic routes, backed by React Router v6, dispatch asynchronous Redux actions on route transitions.

Modularized Components

Minimal and dry codebase streamlined with modular, reusable components.

Built with Electron

Backed by a Node.js runtime, begin designing locally by importing datasets and exporting packages directly to your file system.

Monorepo Architecture

All the benefits of composable development, including instant code-sharing, distributed dependency updates, and incremental builds.

Lightweight Bundles

Source code and dependencies transpiled with webpack, optimized with module bundle analysis and tree-shaking.

Test-Driven Development

Generate unit and E2E tests with Jest and Puppeteer to ensure production code stability.

Learn More

Complex Visualizations Simplified Using `<ad3lie/>`

Choose from an open-source library of charts, refer to the docs on use

Documentation

It's just React.
Making the hard, simple.

ad3lie supercharges components by using d3 as a utility library—wrapped in react's declarative API—abstracting you from the imperative complexities of d3. No more LinkFiberNodecount or enter()/exit()/update(). Take comfort in using the same standard APIs and familiar patterns from any codebase. If you know react, you know ad3lie.

Small, but Mighty

ad3lie is a low-level, unopinionated composable library. Mix and match packages, build a one-off chart or create your own reusable and composable chart library. Keep your bundle sizes down and only use what you need.

Think less, Build more

Under the hood, ad3lie uses d3 to handle the heavy lifting of calculations and math. d3 is the visualization kernal used to supercharge data flow to your components, while react paints the DOM for you. Mixing DOM mental models isn't a good idea, so let ad3lie do the thinking for you.

Build better, Together.

Use the ad3lie charting tool to build in real-time. Directly import custom components and preconfigured data files into projects, or distribute your code with your team. ad3lie ships lightweight, standalone packages, optimized for seamless integration, scalability, and customizability.