We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

Simplot

An new chart plotting software with node based editor. Plot chart in a completely new way effectively.

Comment

Inspiration

The world of data visualization is evolving at an incredible pace. Gone are the days of static, outdated charts. Today, we require something more modern and professional. When we think about plotting charts, our first thought often turns to spreadsheets. While spreadsheets are useful, we frequently struggle to achieve our desired look in the charts. Moreover, even when we successfully create a chart, it can be challenging to integrate it into a workflow. Each time we receive new data, we often have to start from scratch and redo almost everything. You may have seen some charts created through coding that look impressive and can be generated automatically hundreds of times a day. But the problem is... not everyone know how to code... What if there is a way to bridge the gap between spreadsheet programs and coding? Enter Simplot—a node-based editor designed specifically for chart plotting.

What it does

Simplot is stand for simple-plot. Imagine creating stunning charts without writing a single line of code! With Simplot, you can do just that by simply dragging, dropping, and adjusting parameters to design the chart of your dreams. This innovative approach separates design from data, allowing you to build a workflow that plots charts with different datasets.

Node-based editors have proven themselves in content creation software like Davinci Resolve (video editing), Blender (modelling), and Unity (game creation). These tools empower professionals to create stunning content by letting them focus on their ideas rather than coding. Simplot is the first software to apply this concept to chart plotting, making it a game-changer for data visualization.

The current version of Simplot supports a range of chart types, including line charts, scatter charts, pie charts, donut charts, area charts, and bar charts. You can combine these chart types to create complex visualizations that tell compelling stories.

Customization is key in Simplot, with options for background, color, margin, font size, and aspect ratio allowing you to tailor your charts to fit your needs.

To get started, a comprehensive guide is available to help you learn the ins and outs of Simplot. And when you're ready to share your creations with others, public project sets can be shared via links, enabling real-time collaboration. This feature is made possible by Convex's real-time capabilities. To try it out, simply check the box at the top right corner and share the link in another account.

How I built it

The frontend of this project is made with react and tailwind CSS. I have used react flow as node based editor tools, react-spreadsheet for data set management, and rechart for chart creation. The backend is built with convex with clerk as authentication provider. I have deployed the website on netlify. I have used typescript in both frontend and convex backend part.

Challenges I ran into

The most significant challenge I faced was creating the node-based editor system on the frontend. It required a tremendous amount of effort to design and implement an intuitive interface that allows users to create charts.

I'm thrilled to say that Convex proved to be a game-changer in this regard. By leveraging its features, I was able to save a considerable amount of time and focus on building the application rather than configuring infrastructure and databases like I would have had to do with AWS or Firebase.

In particular, Convex's streamlined approach to authorization, functions, and database management allowed me to concentrate on developing the Simplot application itself.

Accomplishments that I'am proud of

The idea for Simplot had been simmering in my mind for almost a year, but it wasn't until I participated in a hackathon that I finally found the motivation to bring it to life. The theme and constraints of the hackathon perfectly aligned with my concept, and Convex's features proved to be the perfect catalyst.

As I reflected on the idea, I realized its potential to revolutionize the way content creators work with data. By providing a simple, intuitive interface for plotting charts, Simplot could empower creatives to focus on their artistic vision rather than getting bogged down in technical details.

I'm thrilled that the hackathon provided the push I needed to take my idea from concept to reality. With Convex's support, I was able to turn my vision into a functional application.

What we learned

Throughout the development process, I had the opportunity to learn and grow as a developer. The main areas where I gained new skills were in node-based editing and Convex.

While Convex was the primary theme of this hackathon, I didn't have to spend an excessive amount of time learning it, as it proved to be quite straightforward to use.

What's next for Simplot

As it stands, Simplot is primarily showcasing the potential and possibilities of using node-based editors to plot charts. However, this project has far-reaching ambitions and will require significant development to reach its full potential.

In the future, I plan to continue working on Simplot to incorporate several key features that will further enhance its capabilities and user experience. These features include...

More data import Simplot will add support in more file like xlsx and be able to connect to google sheet. It should also support the huge data import while keeping good performance.

More plot Simplot will add more plot type like the heatmap, funnel chart, etc. I would also want to add some 3d chart. 3d chart is good in show-casing some data in bar chart, surface chart, pie chart, scatter chart, etc... With the 3d chart, Simplot can be completely separated from the spreadsheet cause I think it is really hard to customized a 3d chart in spreadsheet. With node based editor, even the shader, viewport, lighting can be configured as a style property to customize a 3d chart.

More style Simplot will be even more customizable than now. It is challenging to balance the ease of use and functionality. I don't want to just simply put 100 button or sliders on the panel which will make the application become very confusing for casual user and beginner. I will create way to let the casual user use the application easily and the perfectionism to customize everything they want.

More functioning node Simplot will have more node like condition check node to determine whether a data can pass depend on certain condition, a grouped node which is combined by several node defined by the user, data processing node so that the user can perform some statistical analysis in Simplot, a cross project node library so that the user can create some node and use in several project directly.

Switch to d3 Simplot will switch to d3 to provide more customization option and more type of chart support.

Code Export The current output of Simplot is am image file only. I think it can also support exporting the code based on common chart library like d3, chart.js, echart, rechart. This is a good feature for team with designer and programmer. The designer can first design the style on Simplot and then export the code for the programmer for subsequence use.

Built With

Share this project:

Updates