and use user key for css shared with dashboard

https://github.com/d3/d3-scale-chromatic#sequential-single-hue

• d3 implementation
• react implementation > styled-component, d3 data binding not needed, easier for linking hover and tooltip over several graphs (called by barchart and provide y() as props)
• store hover state in redux
• make sure no d3 render on hover

could demo it on one of the text input and compare it with the other

• server push real-time updates
• rxjs multiple streams
• local input updates with debounce
• new messages updates with minimal stats calculations (only new message)

https://github.com/STRML/react-grid-layout

use higher-order components

see https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
and http://egorsmirnov.me/2015/09/30/react-and-es6-part4.html

see issue 75 from react-faux-dom

switch the ES6 classes to create components, autobind not necessary when using arrow functions (https://medium.com/komenco/react-autobinding-2261a1092849)

can implement componentDidUpdate to call updateD3 or similar after a shallow/deep prop and state comparison.

can also introduce a resize option when width/height changes

for tooltips (?)

Scatterplot

• scatterplot co-occurence of 2 letters side-by-side (https://bl.ocks.org/mbostock/3887118)
• hook to redux
• colors
• transition on new data
• hover
• tooltip

Pie chart

• partial pie chart for percentage of chars by user (https://bl.ocks.org/mbostock/f098d146315be4d1db52 & http://tributary.io/inlet/5273835)
• enter
• update
• locally managed hover for tooltip
• option to refresh to specific letter on hover (with checkbox to on/off behaviour)

• this.connectFauxDOM('div#d3.d3chart.chart', 'chart') would create a div with id='d3' and class='d3chart chart'
• this.connectFauxDOM('chart') could also default to div with classes faux-dom (static) and chart (the second argument)

a la facebook / slack

maybe use tooltip array index as key to match tooltips when re-rendering

• use them
• create styled div to wrap component instead of style the component

re-render performance: https://robots.thoughtbot.com/react-rendering-misconception

D3 mutates faux dom multiple times during transitions > state changes > render executed multiple time when D3 renders. after that props/state no change > can use PureComponent. Is shallow comparison enough? Is deep compare more expensive than render?

see also: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

can handle hover in styled-component css

• generate new text button
• on keydown
• validate d3 new, remove, etc. (~state reconciliation)
• fork react-faux-dom and fix for update
• add example to fixed fork and post PR
• implement update for grouped look
• rxjs debounce

• latest react version
• switch from createClass to components
• use external proptypes
• do not define event handlers in render, see https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb (method at the end with (value) => e => {...})