ramnathv

var mobx = require('mobx');
var _ = require('lodash');

/* 

MOBX in VANILLA ES5
Notes are based on Matt Ruby's Open Source North Talk:

Practical React with MobX
https://www.youtube.com/watch?v=XGwuM_u7UeQ

ramnathv

ramnathv

React <-> D3 Resources

This is a incomplete list of resources on how to link react & d3. To my experience, there are as many approaches as there are (enter something numerous here). These approaches mostly differ as to 'who' has control over the dom and does the transitions etc. That distinction either requires the user to know more about react or d3, vice versa. Some of the approaches (like react-d3 or react-d3-components) include prebuilt charts, other just provide frameworks to place your charts in.

The following list tries to summarize some of the approaches, hopefully there will be some convergence to a (set of) standard(s), at one point.

This list is UNSORTED.

ramnathv

This example shows how to implement Ann K. Emery’s technique of placings labels directly on top of a line in D3 4.0 Alpha.

To construct the multi-series line chart, the data is first transformed into separate arrays for each series. (The series names are automatically derived from the columns in the TSV file, thanks to a new dsv.parse feature.)

var series = data.columns.slice(1).map(function(key) {
  return data.map(function(d) {
    return {
      key: key,
 date: d.date,

ramnathv

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

• works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
• interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
• percentages are shown explicitly, to help overcome the distortion of the data that occurs wh

ramnathv

http://jsbin.com/tojeke/1/edit?js,output

1. React.render

Problem: http://jsbin.com/dacoze/4/edit?html,output
Solution: http://jsbin.com/dacoze/3/edit?html,output

2. React.createClass

Problem: http://jsbin.com/bepewoq/2/edit?js,output

ramnathv

React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.

Going Further

• React documentation
• Flux architecture using Reflux (see this blog post for more)
• React routing with react-router
• My other Gist on using React + Reflux + WebSockets

ramnathv

// Get / setter for local storage
function store( key, value ){
	if( arguments.length > 1 ){
		localStorage.setItem( key, JSON.stringify( value ) )

		return value
	}
	// Simultaneous getting / setting is bad.
	// It is wasteful to continuously encode & then decompile JSON and never useful.
	else {

ramnathv

Shooting Signatures were designed to give an at-a-glance view of an NBA player's shooting performance. They were developed by Peter Beshai (@pbesh) as part of Buckets, an interactive NBA shot visualization tool.

Sample Shooting Signature usage

ramnathv

#include <Rcpp.h>
using namespace Rcpp;

// For each row, find which column has the minimum value
// With ties, pick the first
// Result is indexed starting at 1
// [[Rcpp::export]]
IntegerVector whichmin_byrow(const NumericMatrix& x)
{
    const int n = x.rows();