D3 Hello World Machine ES6

d3-hello-world-machine-es6.markdown

D3 Hello World Machine ES6

A Pen by Connor MacDonald on CodePen.

License.

index.html

<div class="container">
<div class="row">
  <div class="col-md-12">
    <div class="alert alert-success" role="alert">
      <p>
        <strong>Random Bokeh Generator</strong> | November 6, 2016
      </p>
      <p>
         This is just a sample #codevember project I am working on using the d3 framework. Never used it before. So many libraries... so little time. Maybe I'll add React to it to control the state. Totally spaghetti code at this point, please be kind.
      </p>
      <ul>
        <li><a href="https://twitter.com/fmcat">Twitter Me</a></li>
        <li><a href="https://www.linkedin.com/in/connormacdonald">LinkedIn Me</a></li>
        <li><a href="http://flickr.com/photos/fmcat">Flickr Me</a></li>
      </ul>

    </div>

  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <svg class="d3-hello-world-chart">
    </svg>
  </div>
  <div class="col-md-4">
    <h2>Bokeh Control</h2>
    <div class="btn-group">
        <button type="button" class="btn btn-success" id="js-start">
          Start BOKEH!
        </button>

        <button type="button" class="btn btn-danger" id="js-stop">
          Stop BOKEH!
        </button>
      
        <button type="button" class="btn btn-warning" id="js-reset">
          Reset BOKEH!
        </button>

    </div>
  </div>
</div>
</div>

script.babel

//import d3 from 'd3';

const initialAppParameters = {
    startStatus: false,
    circleMaxWidth: 100,
    circleMinWidth: 10,
    timeout: 100
};

const appChart = d3.select('svg.d3-hello-world-chart');

class HelloWorldChart {
  constructor(svgElement, appParameters) {
    // Set properties
    this.svgElement = svgElement;
    this.appParameters = appParameters;
    
    this.registerEventHandlers();
  }
  
  /**
   * Regsiter event handlers for the app.
   * TODO: Arguably this shouldn't be done this way. React?
   */
  registerEventHandlers() {
    document.getElementById('js-start')
      .addEventListener('click', (e) => {
        this.appParameters.startStatus = true; 
        this.startLoop();
      });
    document.getElementById('js-stop')
      .addEventListener('click', (e) => {
        this.appParameters.startStatus = false;
      });
    document.getElementById('js-reset')
      .addEventListener('click', (e) => {
        this.svgElement.selectAll("*").remove();
      });
  }
  
  /**
   * Generate a random circle using d3 and plot it.
   */
  generateRandomCircle(params) {
    if ( params.startStatus ){
      let randomSize =  this.generateRandomArbitrary(params.circleMinWidth,params.circleMaxWidth);
      let randomColor = this.generateRandomColor(),
          randomX = this.generateRandomArbitrary(0+20, 500-20),
          randomY = this.generateRandomArbitrary(0+20, 500-20),
          randomOpacity = this.generateRandomArbitrary(0.1, 0.9);
      
      this.svgElement.append('circle')
        .attr({'r': randomSize, 'cx': randomX, 'cy': randomY})
        .style('fill', randomColor)
        .style('fill-opacity', randomOpacity);
      setTimeout(this.startLoop.bind(this), 100);  
    }
  }
  
  /**
   * Start looping and showing the bokeh
   */
  startLoop() {
    setTimeout(() => { this.generateRandomCircle(this.appParameters) }, 1000); 
  }
  
  /**
   * Generate a random hex color
   * @see https://www.paulirish.com/2009/random-hex-color-code-snippets/
   */
  generateRandomColor() {
    return '#'+Math.floor(Math.random()*16777215).toString(16);
  }
  /**
   * Returns a random number between min (inclusive) and max (exclusive)
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
   */
  generateRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }
}

const app = new HelloWorldChart(appChart, initialAppParameters);

scripts

<script src="http://d3js.org/d3.v3.min.js"></script>

style.css

svg.d3-hello-world-chart {
  width: 500px;
  height: 500px;
  border: 1px #ddd solid;
  background: #eee;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />