Data Driven Visualizations
for React Developers
Raw D3 Code, Made |


<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

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.
Complex Visualizations Simplified Using <ad3lie/>
Choose from an open-source library of charts, refer to the docs on use
DocumentationIt'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 LinkFiberNode
count 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.
Sign Up for
Future Updates
Stay up to date with our development and tech blog!
Receive ad3lie
Updates
Make Your Data Come to Life!
