Jun 16, 2022
Bridging the Gap between Devs and D3.js with this One Tool
Why ad3lie?
D3.js is a JavaScript library that allows React developers to create beautiful graphics and charts with a relatively small amount of code. It can bring an application to life, catching the attention of any user. D3.js however, is not meant to provide out of the box graphics. It has a steep learning curve and requires some serious dedication for any developer to get a solid understanding of how and why it works.
A normal example of how a D3.js bar chart svg would be created
barChartData = {
const xScale = d3.scaleTime().range([0, width])
const yScale = d3.scaleLinear().range([height, 0])
const colorScale = d3.scaleSequential(d3.interpolateSpectral)
const timeDomain = d3.extent(data, d => d.date);
const tempMax = d3.max(data, d => d.high);
const [minAvg, maxAvg] = d3.extent(data, d => d.avg);
xScale.domain(timeDomain);
yScale.domain([0, tempMax]);
colorScale.domain([maxAvg, minAvg]);// calculate x and y for each rectangle
return data.map(d => {
const y1 = yScale(d.high);
const y2 = yScale(d.low);
return {
x: xScale(d.date),
y: y1,
height: y2 - y1,
fill: colorScale(d.avg),
}
});
}
ad3lie was developed to help solve this exact issue.
Designed to simplify the creation process, ad3lie is an open source tool that assimilates best practices to combine an intuitive application and an NPM package. This makes the data visualization side of D3.js approachable and easy for any React developer to use. The barrier to entry has become a lot smaller.
With ad3lie, a component file would look something like
import { data } from 'MyBarChartData.js'
import { BarChart } from 'ad3lie'
const MyBarChart = ({ data }) => (
<BarChart
data={data}
xKey="species"
yKey="body_mass_g"
xAxisLabel="Species"
yAxisLabel="Body Mass"
height={1000}
width={1000}
/>
)What is ad3lie?
ad3lie is a simple GUI (graphical user interface) application that allows users to quickly transform a stream of stringified data into a dynamic interactive data visualization through declaratively using the Data-Driven Document (D3 library) and React. Users can export the React chart and import it into their own applications.
How Does It Work?
ad3lie comes in two parts and focuses on the developers’ workflow. First, download our ad3lie application here and launch the app. On the home page, there are multiple options for the user to pick from. Don’t know which graph to use? Each graph has a brief explanation of what the graph is meant to be used for and what data is expected to generate the graph.
When ready, click on the graph type to be created.
From the chart page, enter the stringified data into the DATA input field. Then, select the attributes from the drop-down menus as the chart’s attributes (e.g. the x-axis or y-axis data). This will populate the chart automatically.
Change the name of the axes and the size of the chart to be exported. Both width and height can be changed separately. (The default size of the chart is 500px x 500px).
Click the export button and voilà! A React component and the data file has been generated! You can transfer this over to your project directory.
After downloading the related npm package as a dependency, users can then simply go to their application, import the component, and render it on their application. (See the related documentation here!)
And there you have it. Pretty simple right?
Summary
D3.js is an expansive library that requires dedication and time to get the most out of it, this learning curve often prevents developers from implementing it in their projects. But with ad3lie, D3.js is simplified and allows developers the ability to utilize the library, making any frontend project stand out and grab the user’s attention.
ad3lie is an easy to use tool that is focused on the user and their day to day workflow. With this tool, D3.js is no longer inaccessible to developers.
Get Involved!
ad3lie is a new open-source project that has created a well-documented application and website that shows all the under-the-hood technology, so contributing and generating reusable graphs for other users will be simple!
Please head over to our LinkedIn, GitHub, or ad3lie.dev for more information.
Coming Soon…
Please note that ad3lie is currently within its Beta phase. However, the team has several features currently in the works and planned for future releases. Some of these features include
- New chart types that allow for further customization
- Tool-tip functionality for more detailed graphs
- More customizable attributes for each chart
- Import functionality for user data
Team:
Ju Kim
Github: https://github.com/jukim98
LinkedIn: https://www.linkedin.com/in/ju-kim/
Sophia Chiao
Github: https://github.com/ssdrsv
LinkedIn: http://www.linkedin.com/in/sophia-chiao
Kat Athay
Github: https://github.com/KatAthay
LinkedIn: https://www.linkedin.com/in/katathay/
Michael Teifel
Github: https://github.com/Michael-Teifel
LinkedIn: http://www.linkedin.com/in/michaelteifel
Antonio Ayala
Github: https://github.com/antonioclimbs
