Code Monkey home page Code Monkey logo

chartbuilder's Introduction

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:

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:

  1. Download source (and unzip)
  2. from the terminal navigate to the source folder (on a Mac: cd ~/Downloads/Chartbuilder-master/)
  3. run python -m SimpleHTTPServer
  4. 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

chartbuilder's People

Contributors

dannguyen avatar donohoe avatar fitnr avatar jbenton avatar martignoni avatar mihi-tr avatar petermlm avatar yanofsky avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.