Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/netbek/robin
Dataviz sandbox with D3, React, and R datasets
https://github.com/netbek/robin
d3 dataviz react semiotic victory vx
Last synced: 28 days ago
JSON representation
Dataviz sandbox with D3, React, and R datasets
- Host: GitHub
- URL: https://github.com/netbek/robin
- Owner: netbek
- License: agpl-3.0
- Created: 2017-08-28T17:30:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:58:58.000Z (about 2 years ago)
- Last Synced: 2024-10-27T15:31:43.708Z (3 months ago)
- Topics: d3, dataviz, react, semiotic, victory, vx
- Language: JavaScript
- Homepage:
- Size: 1.52 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# robin
Dataviz sandbox with D3, React, and R datasets.
## Installation
1. Install the dependencies:
```shell
npm ci
```
2. Install the [LiveReload extension for Chrome, Firefox, Safari](http://livereload.com/extensions).
## Usage
1. Build a view and open in a web browser:
```shell
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](https://atom.io).
Plugins can be installed from the command line. To install a few useful ones:
```shell
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
* [@vincentarelbundock/Rdatasets](https://github.com/vincentarelbundock/Rdatasets) - Datasets that were originally distributed alongside R.
* [@awesomedata/awesome-public-datasets](https://github.com/awesomedata/awesome-public-datasets) - Awesome list of public datasets.
### Data visualisation
#### Getting started
* [Fundamentals of Data Visualization - Claus O. Wilke](http://serialmentor.com/dataviz) - Beginner to advanced level.
* [Financial Times Visual Vocabulary](https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary) - Pick a visualisation type based on the data relationship that's most important.
* [IBM Design Language | Data Visualization](https://www.ibm.com/design/language/experience/data-visualization) - Good practices.
#### Further resources
* [@fasouto/awesome-dataviz](https://github.com/fasouto/awesome-dataviz) - Awesome list of visualisation libraries and resources.
* [The Data Visualisation Catalogue](https://datavizcatalogue.com/) - List of visualisation types.
* [Data Viz Project](http://datavizproject.com/) - List of visualisation types.
* [The Python Graph Gallery](https://python-graph-gallery.com/) - List of visualisation types in Matplotlib, Seaborn and other Python libraries.
* [The R Graph Gallery](https://www.r-graph-gallery.com/) - List of visualisation types in ggplot2.
* [Xenographics](https://xeno.graphics/) - List of unusual visualisations.
* A few more: [1](https://twitter.com/jamesscottbrown/status/988123237900013569), [2](https://twitter.com/jamesscottbrown/status/988123321949741056), [3](https://twitter.com/jamesscottbrown/status/988123385111736321), [4](https://twitter.com/jamesscottbrown/status/988123441059463168), [5](https://twitter.com/jamesscottbrown/status/988125066931113984)
* [dataviz.tools](http://dataviz.tools) - List of tools, resources and technologies for visualisation
### Development
#### Getting started
TODO
#### Further resources
* [Can I use... HTML and CSS support table](https://caniuse.com) - Browser support for HTML and CSS features.
* [ECMAScript compatibility table](https://kangax.github.io/compat-table) - Browser support for JavaScript features.
* [HTML5 polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) - Shims, fallbacks and polyfills for HTML5 features.
### CSS and Sass
#### Learning CSS and Sass
TODO
#### Further resources
* [@Famolus/awesome-sass](https://github.com/Famolus/awesome-sass) - Awesome list of frameworks, libraries and resources.
* [Airbnb CSS/Sass Styleguide](https://github.com/airbnb/css) - Code style guide.
* [Sass Guidelines](https://sass-guidelin.es/) - Code style guide.
### JavaScript
#### Learning JavaScript
* [Eloquent JavaScript - Marijn Haverbeke](http://eloquentjavascript.net) - Beginner to advanced level.
* [You Don't Know JS - Kyle Simpson](https://github.com/getify/You-Dont-Know-JS#titles) - Intermediate to advanced level.
#### Libraries
* [jQuery](http://api.jquery.com)
* [Lodash](https://lodash.com/docs)
* [Moment.js](https://momentjs.com/docs)
* [Numeral.js](http://numeraljs.com)
#### Working with data
* [Learn JS Data](http://learnjsdata.com/) - Manipulating data with vanilla JavaScript, D3 and Lodash.
#### Further resources
* [@sorrycc/awesome-javascript](https://github.com/sorrycc/awesome-javascript) - Awesome list of browser-side JavaScript libraries, resources and shiny things.
* [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) - Code style guide.
* [Learning Core Javascript (ES5)](https://github.com/markerikson/react-redux-links#learning-core-javascript-es5) - Books and sites for learning JavaScript.
* [Learning Current Javascript (ES6+)](https://github.com/markerikson/react-redux-links#learning-current-javascript-es6) - Books and sites for learning modern JavaScript features.
### SVG
#### Learning SVG
* [Pocket Guide to Writing SVG](http://svgpocketguide.com/)
### D3
#### Learning D3
* [D3.js in Action, Second Edition - Elijah Meeks](https://www.manning.com/books/d3js-in-action-second-edition) - Beginner to advanced level.
#### Learning D3 with React
TODO
#### Further resources
* [@wbkd/awesome-d3](https://github.com/wbkd/awesome-d3) - Awesome list of D3 libraries and plugins.
* [data-ui](https://williaster.github.io/data-ui) - React framework on top of vx.
* [Semiotic](https://emeeks.github.io/semiotic) - Opinionated React framework.
* [Victory](http://formidable.com/open-source/victory) - Opinionated but easily customisable React components.
* [vx](https://vx-demo.now.sh) - Low-level React components that closely follow D3 conventions.
### React
#### Learning React
* [React docs](https://reactjs.org/docs) - Official docs.
* [@markerikson/react-redux-links](https://github.com/markerikson/react-redux-links) - Quality resources for learning React. Beginner to advanced level.
* [@vasanthk/react-bits](https://github.com/vasanthk/react-bits) - React patterns. Intermediate to advanced level.
#### Further resources
* [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react) - Code style guide.
### Redux with React
#### Learning Redux
* [Redux docs](http://redux.js.org) - Official docs.
* [@markerikson/react-redux-links](https://github.com/markerikson/react-redux-links) - Quality resources for learning React and Redux. Beginner to advanced level.
#### Further resources
* [@ghengeveld/react-redux-styleguide](https://github.com/ghengeveld/react-redux-styleguide) - Code style guide.
* [Redux Best Practices - Kyle Poole](https://medium.com/@kylpo/redux-best-practices-eef55a20cc72) - Best practices in Redux.
* [A Simple Naming Convention for Action Creators in Redux.js](https://decembersoft.com/posts/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.