Chartbuilder 📈

Chartbuilder is a front-end charting application that facilitates easy creation of simple beautiful charts.

Chartbuilder is the user and export interface. D4 is the default charting framework. 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, like we are with D4.
• 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/build

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

Documentation

• The Chartbuilder API docs document most of the React components, classes, and utilities in the code base.

Documentation for Chartbuilder's dependencies:

• D3
• D4
• React

Tests

Run the full test suite with npm test (requires phantomjs 2.0 or greater). Fore more output, or if you don't have phantomjs 2+ handy, you may run npm run test-js-browser and/or npm run test-jsx-browser and open the URL that testling gives you.