Skip to content

Instantly share code, notes, and snippets.

Created November 7, 2016 03:25
Show Gist options
  • Save anonymous/723e2f853653819c2b2fed2417dd1336 to your computer and use it in GitHub Desktop.
Save anonymous/723e2f853653819c2b2fed2417dd1336 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