JSFiddle - React, Tailwind, and code Playground

by jasperspeicher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://rawgit.com/palantir/svg-typewriter/develop/svgtypewriter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/openmhealth/web-visualizations/master/dist/omh-web-visualizations-all.min.css">
<script src="https://rawgit.com/openmhealth/web-visualizations/master/dist/omh-web-visualizations-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.css">
<body>
  <div class="page">
    <div class="chart-data-selector">
      <h1>Open mHealth Web Visualization Library: Charts</h1>
      <p>
        This demo shows a chart with Open mHealth's default display settings for several supported measures. Try choosing a measure from the menu below and clicking update. If you would like to test a data file, enter the url before updating.
      </p>

      <p>
        <span class="label">Data URL:</span>
        <input class="update-url" type="text" value="https://gist.githubusercontent.com/jasperSpeicher/3a6af8226182880d75d2/raw/1yr.json">
        <button class="update-button">update</button>
      </p>
      <p>
        <span class="label">Measure:</span>
        <select name="measures" class="measure-select">
          <option value="body_weight">Body weight</option>
          <option value="heart_rate">Heart rate</option>
          <option value="systolic_blood_pressure, diastolic_blood_pressure" selected>Blood pressure</option>
          <option value="minutes_moderate_activity, step_count">Physical activity</option>
          <option value="step_count">Just step count</option>
          <option value="distance">Distance</option>
    ...

CSS

body {
          font-family: 'Open Sans', Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #7B7B7B;
          background-color: #fff;
        }
        
        * {
          box-sizing: border-box;
        }
        
        .page {
          max-width: 900px;
          margin: 0 auto;
        }
        
        .label {
          display: inline-block;
          width: 70px;
        }
        
        input[type=text] {
          width: 500px;
        }
        
        .chart-data-selector {
          border-bottom: 1px solid #eee;
          padding-top: 20px;
          padding-bottom: 20px;
        }
        
        .demo-chart {
          width: 100%;
          height: 300px;
          margin-top: 20px;
        }
        
        .demo-chart .table {
          margin-bottom: 0;
        }
        
        .additional-information {
          padding-bottom: 40px;
          margin-bottom: 40px;
        }
        
        .datapoint-details {
          padding: 10px;
          white-space: pre;
          width: 100%;
          margin: 0 auto;
          text-align: left;
          border: 1px solid #eee;
          font-family: Courier;
          overflow-x: auto;
        }
        
        .datapoint-details h3 {
          font-family: 'Open Sans', Helvetica, Arial, sans-serif;
          display: block;
          padding-bottom: 5px;
          margin-top: 0;
          font-weight: normal;
          border-bottom: 1px solid #eee;
        }
        
        .datapoint-details hr {
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          height: 1px;
          background-color: #eee;
          color: #eee;
          border: 0 none;
        }
        
        .loading-message {
          font-style: italic;
          padding-top: 150px;
          padding-bottom: 150px;
          text-align: center;
        }
        
        .loading-message.hidden,
        svg.plottable.hidden {
          display: none;
 ...

JavaScript

/*=================================================================
 =            Variable definitions and initializations            =
 =================================================================*/

var chart = null;

//data is reused if url is not changed
var currentData;
var currentUrl = '';

var loadingMessage = d3.select('.loading-message');
var datapointDetails = d3.select('.datapoint-details');
var clickInteraction = null;
var clickInteractionComponent = null;

//an example of some settings for custom chart appearance
var settings = {
  'interface': {
    'axes': {
      'yAxis': {
        'visible': true
      },
      'xAxis': {
        'visible': true
      }
    },
    'tooltips': {
      'decimalPlaces': 4
    }
  },
  'measures': {
    'distance': {
      'seriesName': 'Distance',
      'yAxis': {
        'range': {
          'min': 0,
          'max': 200000
        },
        'label': 'm'
      },
      'data': {
        'yValuePath': 'body.distance.value',
        'xValueQuantization': {
          'period': OMHWebVisualizations.DataParser.QUANTIZE_MONTH,
          'aggregator': OMHWebVisualizations.DataParser.aggregators.sum
        }
      },
      'chart': {
        'type': 'clustered_bar',
        'daysShownOnTimeline': {
          'min': 90,
          'max': 365
        },
        'styles': [{
          'name': 'default',
          'plotType': 'ClusteredBar',
          'attributes': {
            'fill': '#e8ac4e'
          },
          'filters': [function(d) {
            return d.x.getMonth() == 5;
          }]
        }]
      }
    },
    'heart_rate': {
      'chart': {
        'styles': [{
          'name': 'blue-lines',
          'plotType': 'Line',
          'attributes': {
            'stroke': '#4a90e2'
          }
        }]
      }
    },
    'body_weight': {
      'data': {
        'xValueQuantization': {
          'period': OMHWebVisualizations.DataParser.QUANTIZE_MONTH,
          'aggregator':...