Data Driven Visualizations
for React Developers
Raw D3 Code, Made |
Intuitive and Interactive
Modularized and lightweight library that transforms verbose, imperative, raw D3 code into reusable, fully declarative React components
User-input data combines the power of D3 with control of React's DOM rendering to dynamically generate visualizations
Ready to Go
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!
Other libraries exist for React-d3 integration, but
ad3lie is your optimized building tool.
Programmatic and dynamic imports.
lazy() load only the code you need and reduce the amount of code needed on initial load.
Persist state and manage data with the built-in Redux store. Specify your dataset and inputs once to generate multiple visualizations.
Dynamic routes, backed by React Router v6, dispatch asynchronous Redux actions on route transitions.
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.
All the benefits of composable development, including instant code-sharing, distributed dependency updates, and incremental builds.
Source code and dependencies transpiled with webpack, optimized with module bundle analysis and tree-shaking.
Generate unit and E2E tests with Jest and Puppeteer to ensure production code stability.
Complex Visualizations Simplified Using
Choose from an open-source library of charts, refer to the docs on useDocumentation
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
update(). Take comfort in using the same standard APIs and familiar patterns from any codebase. If you know
react, you know
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,
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.
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
Stay up to date with our development and tech blog!