springload/reusable-d3-charts

Name: reusable-d3-charts

Owner: Springload

Description: Reusable charts built with D3. Built on Web standards, fully customisable.

Created: 2016-02-29 14:43:43.0

Updated: 2017-10-08 18:21:13.0

Pushed: 2017-06-14 19:54:38.0

Homepage: https://springload.github.io/reusable-d3-charts/

Size: 1569

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits
Thibaud Colas	2017-06-14 19:51:06.0	55

Other Committers

User	Email	Most Recent Commit	# Commits

README

reusable-d3-charts

Reusable charts built with D3. See them live.

1 ++-----------****-----------+--***-------+------****--++
6 *+          **+  *          +**   *         d3(x)*****++
2 +*         *      *         **     **         *     **++
0 ++*       **       *       **       *       **       *++
4 ++**     *         **     **         *      *         *+
8 ++ **   *     +      *   ** +         *  +**          +*
1 ++--****------+-------***---+----------****-----------++
 2000         2005          2010          2015         2020

Why should I use those instead of <high-level abstraction over D3 of the day>?

TL;DR; D3 allows full customisability, and leverages the web standards you know and love.

First of all, because you want to have the final say on what your charts look like. This is the whole point of using something like D3: we want our graphs to be art-directed, rendering differently across projects and across screen sizes.

Then, because you will have more bangs for your bucks learning and using D3's API, JavaScript, SVG and CSS rather than locking yourself into a particular charting library's configuration options. D3's bundle of web technologies will still be relevant for the years to come, whereas high-level wrappers over it come and go.

So no C3? No NVD3? No D4 either? Not even Victory?!

Those tools all bring value to the table. They make it very easy and quick to put a chart on a page with minimal effort. The reason why they exist is that charting is hard, and D3 is hard. You can have it easy by using those, and that's great ? up to the point where you need to customize the chart further than what the library allows.

So we should all write charts from scratch?

No, not really. D3 has a history of enabling code reuse via examples. There are a lot of examples out there. Look for the one you're after here, then customize it.

There are a number of conventions when writing D3 code that make it easier to reuse charts and chart code.

Here are good reads:

• https://bost.ocks.org/mike/chart/
• https://bocoup.com/weblog/reusability-with-d3
• http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/, and our accompanying https://github.com/springload/react-d3-integration

Reusing one of the charts

Those examples are meant to be copied and pasted into your project's code. You can then update their rendering code so that it suits the precise need of your project.

Most of the examples are divided into two files: a base class and one that inherits from it. If you intend to use multiple charts, they will most likely share some code ? this code should be in the base class.

Contributing

Installation

You first need to clone the project on your computer, and to install Node. This project also uses nvm, and yarn.

From the command-line:

/Development/sites/
clone git@github.com:springload/reusable-d3-charts.git
eusable-d3-charts

To install our dependencies:

install
en, install all project dependencies.
 install
tionally, install the git hooks.
ithooks/deploy

Working on the project

Everything mentioned in the installation process should already be done.

art the server and the development tools.
 run start
ilds for production
 run build
build the styles
 run css
ns tests.
 run test
ns linting.
 run lint

Deploying a new version

To production (gh-pages)

om the project's root.
ke sure your master is up to date.
fetch --all
checkout master
pull
push origin master
en push the new changes
 run deploy