globeandmail / chart-tool Goto Github PK

View Code? Open in Web Editor NEW

250.0 23.0 35.0 6.52 MB

A responsive charting application

Home Page: http://globeandmail.github.io/chart-tool

License: MIT License

JavaScript 87.71% HTML 0.05% SCSS 12.25%

chart d3 news graphics

chart-tool's Introduction

Chart Tool

Chart Tool is a platform for creating, storing and displaying beautiful, responsive embeddable charts. Designed to fit the needs of a fast-paced mobile and print newsroom, Chart Tool generates charts in several formats:

SVGs that are both responsive and interactive, via an embed code
JPGs and PNGs for use as thumbnails and sharing on social media
PDFs that can be almost immediately dropped into a print content management system

How it works
Features
Examples and demo
Getting started
Tutorials
Version
License
Get in touch

How it works

Chart Tool is made up of two parts:

A back end interface for storing data, creating and exporting charts, and generating a static embed code, powered by Meteor and React. Embed codes are static by design — if your back end goes down, all the charts on your site will still display properly. Try out a demo of the charts interface.

A front-end JavaScript and CSS library that parses embed codes generated by the back end and renders a responsive chart on your website using parts of D3.js. The front-end library also offers an API that can be accessed to modify charts before or after they've been drawn. Check out some example charts on our website.

Features

Searchable database: All charts are stored in a searchable, taggable database for easy retrieval
Simple, straightforward GUI: Easy-to-use (and easy-to-teach!) collaborative interface for editing charts, so multiple people can work on the same chart at once
Asset generation: Easily generate PNGs at any size for use on social media, or PDFs for print use
Fallback images: All charts come with a fallback image in case the library is unable to draw the chart. Fallbacks can be stored on AWS, or bundled as inline Base64 images
Fully responsive: Charts will redraw automatically on window resize
Lots of chart types:
- Line charts
- Area charts
- Stacked area charts
- Column charts
- Stacked column charts
- Bar charts
- Stacked bar charts
- Multiline charts
- Scatterplots
- No pies (sorry)
Annotations: All charts can be annotated with text annotations, pointer arrows, highlighting a range along the x- or y-axis, or highlighting a bar or column.
Highly configurable: Don't want tips to appear for a specific chart, or want to manually set the number of ticks to be displayed? No problem!
"Ordinal-time" scales: Treat time series data as if it were ordinal — this is very useful for visualizing stock price charts, or when you want to skip weekends and holidays
Pre- and post-render hooks: All charts come with several basic custom events via D3's dispatch library, including pre- and post-render hooks for every chart
Zero external dependencies: The Chart Tool library comes bundled with everything it'll need right out of the box
Lightweight libraries: The front-end CSS and JS libraries clock in at a combined 45.536kB minified and gzipped

Examples and demo

Examples of the types of charts Chart Tool can generate can be found here.

For a demo of the back end interface used to generate charts, images and PDFs, check out our demo app.

Getting started

Curious to try out Chart Tool, but don't want to go through the process of setting it up? Try out our hosted demo version.

First, you'll need Node.js 8.11 installed. We recommend using nvm to keep your Node version in sync with what Chart Tool expects. This is important: anything lower and Meteor will fail in spectacular and unexpected ways.

Next, you'll need to install Meteor.

You'll also need Gulp.

$ npm install -g gulp

Then, clone the Chart Tool repo and install your NPM dependencies for both the root project and the backend, which will make sure Gulp is set up and can run your project:

$ git clone [git-repo-url] && cd chart-tool
$ npm install

After that, you'll need to do cd meteor && meteor to get Meteor running for the first time, which provisions the Mongo database and installs all the dependencies it'll need (this might take a minute). Once that's done, you're in business. Stop the Meteor server (CTRL-C on a Mac) and cd back to the parent directory.

Then, all you need to do is:

$ gulp

That's it! You're running your own development copy of Chart Tool! 🎉 🎉 🎉

Tutorials

Now that you've got Chart Tool up and running, here are some tips on how to get rolling.

For starters, you might want to read up on how to make your first chart. A full tutorial, including how to embed it on the web or generate a static image at multiple sizes is available here.

Otherwise, these are some other tutorials you might want to check out:

Version

1.4.2

License

Get in touch

If you've got any questions, feel free to send us an email, or give us a shout on Twitter:


Tom Cardoso @tom_cardoso	Jeremy Agius @j_agius	Michael Pereira @monkeycycle_org	Matt Frehner @mattfrehner

chart-tool's People

Contributors

Stargazers

Watchers

chart-tool's Issues

Chart Tool interface shouldn't choke on quote-wrapped commas in CSVs

I want data to be able to be parsed even if it's in this format:

Type,Percentage
"Larceny, forgery, cybercrime, ID theft",35
Drugs or narcotics,25
"Assault, robbery or burglary",15
Homicide or attempted murder,8
Sex crimes,8
Weapons charge,6
Other,3

Range highlighting

A user should be able to set a highlighted "range" along the x- or y-axis.

Accessible default colour palette

Update colour palette to an accessible colour set.

Streamgraphs not rendering

Login system

Some way to "log in" to the Chart Tool interface, perhaps using Facebook/Twitter and an admin permissioning system?

Thumbnail URL generator returns undefined

Custom ordinal-time axis for non-continuous charts

Need a custom axis (again, likely using a rangePoints scale), perhaps called "ordinal-time", which displays data continuously. For example:
say you have four days of intraday stock market data, each day ranging from 9am to 4pm. With a regular time scale, the period between 4pm and 9am the next day would be mapped far apart (resulting in a long, straight line connecting the two points). With an ordinal-time scale, the two points would be the same distance apart as any other two values.

See #13 for another chart type requiring a similar treatment.

On column charts, after x-axis tick text is wrapped range isn't re-set on the y-axis

multiple tag search on archive page causes sidebar to stretch

Still usable - just not pretty. The sidebar stretches horizontally and covers the grid if to many tags are entered.

Add JS and CSS libs to embed code

Currently, libraries need to be included externally. In an ideal world, everything is included in the embed code. Would likely also require:

replacing webpack with rollup
moving to ES6 imports to slim down D3 library size
rewriting library in ES6

Finish writing documentation

Right now it's terribly inadequate. Need to document all functions, installation process, back- vs. front-end, yadda yadda.

Some interface values falling back on default instead of database values

For instance: if I change the tick formatting on the y-axis from 1,234 to 12.34 then refresh, the formatting will effectively be 12.34 but the interface seems to suggest 1,234 is selected.

I've noticed this also happening with date formatting, so might need to go one by one and check each value…

Download data button in interface

Perhaps in the "Data" tab somewhere?

Bar charts — version with value labels instead of x-axis?

Currently all bar charts have an x-axis, but it'll often get crowded in the mobile view. Perhaps add a values-only labelling style for bars as an option?

social/sharing buttons can overlap source

Mobile style of social/sharing buttons is not being applied

Regression lines for scatterplot charts

Some kind of regression (perhaps LOESS?) for #83.

See https://github.com/jasondavies/science.js/blob/master/examples/loess/loess.js.

Labels instead of x-axis ticks for horizontal bar charts?

Currently, all horizontal bar charts have vertical ticks. Would it be better/cleaner (from a user and aesthetic point of view) to just do labels at the end of each bar instead?

Making data input a little smarter

Currently, when a user drops data with percentage or dollar signs into Chart Tool, the data ingestor removes those characters entirely as they're not useful for data parsing.

It'd be cool if Chart Tool could recognize symbols like $ and % and automatically add them as prefixes or suffixes on the x- or y-axis.

Are there any other small efficiencies we could find in the data entry process? Could we be doing some analysis of the data and providing a guess as to what the date formatting should be? Or what tags to add? Chart type, even? What does that code look like? A set of analysis functions that runs on newly inputted data and returns a bunch of recommendations to the interface/user?

Test chart label / tag / flag

Have a way of tagging a chart as a test chart so that it doesn't pollute the list of all other charts.

Replace Webpack with Rollup

Use Rollup.js as our module bundler going forward, and transpile using Babel/Buble.

Lines along the x- or y-axis

Similar to the ranges annotation ticket described in #80, should be able to add a single line along the x- or y-axis. Or should this be done directly in the data for the chart? 🤔

Ampersands are encoded and rendered as & for legends

Logged in vs. logged out view

Different views for people that aren't logged in vs. people that aren't, likely with enhanced editing functionality for logged in users, etc.

ES6 rewrite

Rewrite core libs in ES6, and use D3v4 using ES6-style imports.

Time-series column charts

Construct a custom ordinal scale for column charts that replicates time-series functionality using rangePoints. Basically, if you have your x axis as:

 "x_axis": {
  "scale": "time",
  "ticks": "auto",
  "orient": "bottom",
  "format": "auto"
}

column chart code should be smart enough to render an entirely different axis and set a proper column width.