Chartbuilder / Gneisschart

Chartbuilder / Gneisschart is a D3.js based front-end charting application that facilitates easy creation of simple beautiful charts.

Chartbuilder is the user and export interface. Gneisschart is the charting framework.

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. Paste data into it and export an svg or png chart in a style that has been predefined.

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

How to use Chartbuilder

###Getting started If you are not interested in customizing the styles of your charts use the hosted version: http://quartz.github.io/Chartbuilder/

Alternatively: ####Download via github

1. Download source (and unzip)
2. from the terminal navigate to the source folder (on a Mac: cd ~/Downloads/Chartbuilder-master/)
3. Start a webserver run python -m SimpleHTTPServer
4. Open Google Chrome, Apple Safari, or Opera and navigate to http://localhost:8000/

Install using bower

1. from the terminal bower install chartbuilder
2. copy the chartbuilder files to the top directory by running cp -r bower_components/chartbuilder/* .
3. compile webfontloader cd bower_components/webfontloader/; rake compile;
4. start a webserver cd ../../; python -m SimpleHTTPServer;
5. Open Google Chrome, Apple Safari, or Opera and navigate to http://localhost:8000/

####Charting time Series Data

1. Find some time series data (may I suggest this)
2. Make sure the first column is your dates, and the heading on the first column is "date"
3. Copy and paste into chart builder

####Charting ordinal series data

1. Find some ordinal series data (may I suggest this)
2. Make sure the first column are your categories, and the heading on the first column isn't "date"
3. Copy and paste into chartbuilder

####Finishing up steps 2-4 are optional

1. Pick your series types
2. Set a title
3. Set your units using the axis prefix and suffix field
4. Adjust your max and min (if you so choose)
5. Add a credit line and/or a source line
6. Click create chart
7. Select to download an svg or png

###Examples of charts made with Chartbuilder ####Line charts

####Column charts

####Bar grids

####Mixed

Deploying Chartbuilder

ChartBuilder is meant to be deployed by an organization and then customized for the design consistency of that organization so that the reporters or other people in that organization can make charts.

###Deploying ChartBuild is an HTML/CSS/JS application. You can easy copy, fork, and install the files wherever. It can be easily put up on Github Pages.

###Configuration Once you deploy it, configuring is either through CSS overrides, custom HTML, or Javascript configuration.

####Chart configuration Chart configuration is handled by passing a configuration object through to ChartBuilder.start().

ChartBuilder.start({
  colors: ["#ff4cf4","#ffb3ff","#e69ce6","#cc87cc","#b373b3","#995f99"],
  creditline: 'NewsPost Inc.'
});

You can see all the configuration options in the Gneisschart.js library.

###Getting started

Why Chartbuilder / Gneisschart

• You're a writer, blogger, reporter who hates the way screenshotted research reports and excel charts look in your stories
• You're a graphic designer or graphics editor spending too much time making simple charts in the same style
• You're a developer at an organization looking to add consistency to employee generated charts

Chartbuilder was created to speed workflow in a newsroom and give reporters more responsibility over their content. It allows someone to create simple graphics quickly within a pre-specified style guide without needing specialized design software.

The output formats are can be used anywhere images and svgs are accepted. There's no need for CMS integration or complex back end systems.

There are fewer excuses to use screenshots from analyst reports or charts in Excel.

More about that here http://yanofsky.info/demos/chartbuilder/slides/

Gneisschart was created to assist in the above as well as establish the starting point for a touch focused responsive charting library.

###Styling the chart Chart styles are contained in css/gneisschart.css. The color palette is defined in the configuration object