Chartbuilder :chart_with_upwards_trend:
Chartbuilder is a front-end charting application that facilitates easy creation of simple beautiful charts.
Chartbuilder is the user and export interface.
Chartbuilder powers all chart creation on Atlas, a
charting platform developed by Quartz.
What's new in Chartbuilder 2.0
- The Chart Grid type. Use it to create small multiples of bars, lines, dots, or columns.
- The app has been rewritten in React.js, making it easier to add new chart types or use
third-party rendering libraries. - Chart edits are automatically saved to localStorage, and a chart can be
recovered by clicking the "load previous chart" button on loading the page. - Data input now accepts csv formatted data as well as tsv formated data
- All UI elements belong to Chartbuilder UI,
a framework of flexible React components that you can use in other projects.
What Chartbuilder is not
- A replacement for Excel
- A replacement for Google Spreadsheet
- A data analysis tool
- A data transformation tool
What Chartbuilder is
Chartbuilder is the final step in charting to create charts in a consistent predefined style. Paste data into it and export the code to draw a mobile friendly responsive chart or a static svg or png chart.
Who is using Chartbuilder
Other than Quartz, customized Chartbuilder created charts have been seen in many publications:
- NPR
- The Wall Street Journal
- CNBC
- The New Yorker
- The Press-Enterprise
- New Hampshire Public Radio
- CFO Magazine
- Australian Broadcasting Corporation
- Digiday
Getting started with Chartbuilder
If you are not interested in customizing the styles of your charts use the hosted version: http://quartz.github.io/Chartbuilder
To work on the Chartbuilder code, first download the project and install
dependencies:
Download via github
- Make sure you have a recent version of node.js (0.12 or above) (or io.js)
- Download source (and unzip or clone using git)
- from the terminal navigate to the source folder (on a Mac:
cd ~/Downloads/Chartbuilder-master/) - Install the dependencies automatically by running
npm install - Start the included web server by running
npm run dev - Point your browser to http://localhost:3000/
- When you're done developing, build and deploy your Chartbuilder!
Making a chart with Charbuilder
- How to make a line chart with time series data
- How to make a bar chart with ranking data
- How to make a column chart with ordinal data
Customizing your Chartbuilder
- Getting to know the Chartbuilder code
- Customizing chartbuilder
- Test things out
- When you're done developing, build and deploy your Chartbuilder!
- Keep your customized version in sync with the master
Documentation
- The Chartbuilder API docs
document most of the React components, classes, and utilities in the code base.