Chartbuilder 📈

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

1. Make sure you have a recent version of node.js (0.12 or above) (or io.js)
2. Download source (and unzip or clone using git)
3. from the terminal navigate to the source folder (on a Mac: cd ~/Downloads/Chartbuilder-master/)
4. Install the dependencies automatically by running npm install
5. Start the included web server by running npm run dev
6. Point your browser to http://localhost:3000/
7. 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.

Documentation for Chartbuilder's dependencies:

• D3
• React