robin
Dataviz sandbox with D3, React, and R datasets.
Installation
- Install the dependencies:
npm ci
- Install the LiveReload extension for Chrome, Firefox, Safari.
Usage
- 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.
- 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 [email protected] react refactor
Resources
Datasets
Data visualisation
Getting started
Further resources
Development
Getting started
TODO
Further resources
CSS and Sass
Learning CSS and Sass
TODO
Further resources
JavaScript
Learning JavaScript
Libraries
Working with data
-
Learn JS Data - Manipulating data with vanilla JavaScript, D3 and Lodash.
Further resources
SVG
Learning SVG
D3
Learning D3
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
Further resources
Redux with React
Learning Redux
Further resources
License
Copyright (c) 2017 Hein Bekker. Licensed under the GNU Affero General Public License, version 3.