pbeshai

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

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

  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

_handleHover(d) {
  // send an action indicating which data point to highlight
  ChartActions.highlight(d);
}

pbeshai

import React from 'react';
import Reflux from 'reflux';

import LineChart from './LineChart';
import RadialHeatmap from './RadialHeatmap';
import ChartStore from '../stores/ChartStore';

// CSS via webpack
require('normalize.css');
require('../styles/main.css');

pbeshai

import Reflux from 'reflux';

const ChartActions = Reflux.createActions([
  /**
   * Sets a point to be higlighted in charts
   * @param point {Object} - the data point to be highlighted
   */
  'highlight'
]);

pbeshai

.radial-heatmap circle {
  fill: none;
}

pbeshai

.line-chart .series {
  fill: none;
  stroke: #5357a1;
  stroke-width: 2px;
}

pbeshai

import React from 'react';
import d3 from 'd3';

// CSS via webpack
require('styles/LineChart.css');

const LineChart = React.createClass({
  propTypes: {
    data: React.PropTypes.array.isRequired,
    height: React.PropTypes.number.isRequired,

pbeshai

import React from 'react';
import LineChart from './LineChart';
import RadialHeatmap from './RadialHeatmap';

// CSS via webpack
require('normalize.css');
require('../styles/main.css');

const LinkedHighlightingApp = React.createClass({
  getInitialState() {