pbeshai

  componentDidMount() {
    // use d3's events so we get to use the handy d3.mouse function to get x,y in svg coords
    const handleMouseMove = this._handleMouseMove;
    d3.select(React.findDOMNode(this.refs.svg)).on('mousemove', function mouseMoveHandler() {
      handleMouseMove(d3.mouse(this));
    }).on('mouseleave', function mouseOutHandler() {
      handleMouseMove([null, null]);
    });
  },

pbeshai

import d3 from 'd3';

/**
 * Like d3.bisect but chooses the closest element, not always the left or right
 * That is, finds the element in the array closest to the value through the use of accessor
 */
export function findClosest(array, value, accessor) {
  if (!array || !array.length) {
    return null;
  }

pbeshai

.line-chart .highlight-mark {
  fill: #FA7F9F;
  stroke: #891836;
  stroke-width: 1px;
}

pbeshai

.radial-heatmap circle.highlight {
  stroke: #FA7F9F;
}

pbeshai

import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';

class LineChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: null
    };

pbeshai

import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';

class LineChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: null
    };

pbeshai

import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';

class LineChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: null
    };

pbeshai

import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';

class RadialHeatmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: null
    };

pbeshai

/**
 * Helper function to compute the contiguous segments of the data
 * 
 * Derived from https://github.com/pbeshai/d3-line-chunked/blob/master/src/lineChunked.js
 * 
 * @param {Array} lineData the line data
 * @param {Function} defined function that takes a data point and returns true if
 *    it is defined, false otherwise
 * @param {Function} isNext function that takes the previous data point and the
 *    current one and returns true if the current point is the expected one to

pbeshai

license: mit
height: 500
border: no