robin

Dataviz sandbox with D3, React, and R datasets.

Installation

1. Install the dependencies:

npm ci

2. Install the LiveReload extension for Chrome, Firefox, Safari.

Usage

1. Build a view and open in a web browser:

gulp --view [View]

Views are stored in /src/views. Replace [View] in the aforementioned command with any directory name.

2. Enable the LiveReload extension in the web browser.

Editors

Atom

Available for macOS, Linux, and Microsoft Windows. Open source.

Download from atom.io.

Plugins can be installed from the command line. To install a few useful ones:

apm install asciidoc-preview atom-jinja2 atom-mermaid atom-typescript chary-tree-view docblockr editorconfig git-control highlight-selected js-refactor language-asciidoc language-markdown language-mediawiki language-nunjucks linter linter-eslint linter-htmlhint linter-js-yaml linter-markdown linter-remark linter-sass-lint markdown-table-formatter minimap minimap-autohide minimap-git-diff prettier-atom@0.49.0 react refactor

Resources

Datasets

• @vincentarelbundock/Rdatasets - Datasets that were originally distributed alongside R.
• @awesomedata/awesome-public-datasets - Awesome list of public datasets.

Data visualisation

Getting started

• Fundamentals of Data Visualization - Claus O. Wilke - Beginner to advanced level.
• Financial Times Visual Vocabulary - Pick a visualisation type based on the data relationship that's most important.
• IBM Design Language | Data Visualization - Good practices.

Further resources

• @fasouto/awesome-dataviz - Awesome list of visualisation libraries and resources.
• The Data Visualisation Catalogue - List of visualisation types.
• Data Viz Project - List of visualisation types.
• The Python Graph Gallery - List of visualisation types in Matplotlib, Seaborn and other Python libraries.
• The R Graph Gallery - List of visualisation types in ggplot2.
• Xenographics - List of unusual visualisations.
• A few more: 1, 2, 3, 4, 5
• dataviz.tools - List of tools, resources and technologies for visualisation

Development

Getting started

TODO

Further resources

• Can I use... HTML and CSS support table - Browser support for HTML and CSS features.
• ECMAScript compatibility table - Browser support for JavaScript features.
• HTML5 polyfills - Shims, fallbacks and polyfills for HTML5 features.

CSS and Sass

Learning CSS and Sass

TODO

Further resources

• @Famolus/awesome-sass - Awesome list of frameworks, libraries and resources.
• Airbnb CSS/Sass Styleguide - Code style guide.
• Sass Guidelines - Code style guide.

JavaScript

Learning JavaScript

• Eloquent JavaScript - Marijn Haverbeke - Beginner to advanced level.
• You Don't Know JS - Kyle Simpson - Intermediate to advanced level.

Libraries

• jQuery
• Lodash
• Moment.js
• Numeral.js

Working with data

• Learn JS Data - Manipulating data with vanilla JavaScript, D3 and Lodash.

Further resources

• @sorrycc/awesome-javascript - Awesome list of browser-side JavaScript libraries, resources and shiny things.
• Airbnb JavaScript Style Guide - Code style guide.
• Learning Core Javascript (ES5) - Books and sites for learning JavaScript.
• Learning Current Javascript (ES6+) - Books and sites for learning modern JavaScript features.

SVG

Learning SVG

• Pocket Guide to Writing SVG

D3

Learning D3

• D3.js in Action, Second Edition - Elijah Meeks - Beginner to advanced level.

Learning D3 with React

TODO

Further resources

• @wbkd/awesome-d3 - Awesome list of D3 libraries and plugins.
• data-ui - React framework on top of vx.
• Semiotic - Opinionated React framework.
• Victory - Opinionated but easily customisable React components.
• vx - Low-level React components that closely follow D3 conventions.

React

Learning React

• React docs - Official docs.
• @markerikson/react-redux-links - Quality resources for learning React. Beginner to advanced level.
• @vasanthk/react-bits - React patterns. Intermediate to advanced level.

Further resources

• Airbnb React/JSX Style Guide - Code style guide.

Redux with React

Learning Redux

• Redux docs - Official docs.
• @markerikson/react-redux-links - Quality resources for learning React and Redux. Beginner to advanced level.

Further resources

• @ghengeveld/react-redux-styleguide - Code style guide.
• Redux Best Practices - Kyle Poole - Best practices in Redux.
• A Simple Naming Convention for Action Creators in Redux.js - Naming conventions in Redux.

License

Copyright (c) 2017 Hein Bekker. Licensed under the GNU Affero General Public License, version 3.