Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save fmcat/95dd6cfc33bee2fac8efad9736a431f1 to your computer and use it in GitHub Desktop.
Save fmcat/95dd6cfc33bee2fac8efad9736a431f1 to your computer and use it in GitHub Desktop.
D3 Hello World Machine ES6
<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>
//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);
<script src="http://d3js.org/d3.v3.min.js"></script>
svg.d3-hello-world-chart {
width: 500px;
height: 500px;
border: 1px #ddd solid;
background: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment