quaintitative

I write about my quantitative explorations in visualisation, data science, machine and deep learning here, as well as other random musings.

For more about me and my other interests, visit playgrd or socials below


Categories
Subscribe

3 Days of Hand Coding Visualisations - Day Two

All code used in this set of tutorials is available at this github link. You can either download the entire repo, or just use the direct links to the files that I will provide at each step.

Yesterday, we literally hand coded a visualisation. We measured and placed lines, circles and text to form a basic chart. The good thing is that we now know any chart is simply a collection of shapes. The bad thing is that this is not how we want to spend our lives!

And that is really why libraries exist. So that we can build on what someone else has already spent a lot of time on.

Languages and Libraries The endgame is to code a chart in d3.js. But before we get into how to code a chart in d3.js, it’s probably good to know what else there is first.

What else is there? Certainly not the focus of this series, but for the curious, I have put together a series of examples on coding visualisations in:

Let’s start! Let’s do quick recap of HTML and CSS by going through the code of this basic page available here.

There really is no need to retype out these things everytime. Just use this as the base.

<!DOCTYPE html>
<meta charset="utf-8">
<head>

<style>
.redtext{
background-color: red;
}
</style>
</head>

<body>

<h1 class='redtext'>This is a webpage title</h1>
<h1> This is another title </h1>

<div><p>This is a para</p></div>
<h2 class='redtext' id='titleid'>This is big text</h2>
<h6 class='redtext' >This is big text</h6>

<script>
</script>
</body>

Next, from this basic template, we move on to see how to use the d3.js, as well as the p5.js libraries. The code that we will be referring to can be found here.

You will also need the libs found here if you need to run the code.

First, let’s take a look at how we import the libraries that we need.

<head>
<!-- Bootstrap used for the positioning divs -->
<!-- CSS -->
<link rel="stylesheet" href="./lib/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="./lib/css/font-awesome.min.css">

<!-- JavaScript - Local -->
<script src="./lib/jquery/jquery-3.2.1.min.js"></script>
<script src="./lib/bootstrap3/js/bootstrap.min.js"></script>
<script src="./lib/d3/d3.min.js"></script>

<!-- JavaScript - CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

We can import libraries from a location on your computer (local); or from the interwebs (usually using a CDN - content delivery network). Here we show how we can do both.

<script src="./lib/d3/d3.min.js"></script>

This just means that we go up one level (from where this code is, under the src folder), and look for the lib folder and access the d3.min.js file inside the d3 folder. Once we do this, we have access to all the functions in the d3.js library. Here we are using the minified library (which is faster to load).

We do this for all the other libraries and stylesheets. Here we use Bootstrap (which we can cover in another post) as well, so we import those as well, along with the jQuery library (which is needed for Bootstrap).

For the styling of the page, we just add a few lines to allow for the div sections to be entered and sized automatically.

<style>
/*To center (horizontally and vertically) the contents of the div*/
div {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>

d3.js Next we set out two sections and give them each a unique ID. One will be for the d3.js visualisation, and the other will be for the p5.js one.

<div class="col-sm-12" id='tom'>
// Our d3.js visualisation will go here.
</div>

<div class="col-sm-4" id = 'p5canvas'>
// Our p5.js visualisation will go here.
</div>

And now for d3.js. What we will do first declare the width and height variables and set them to values of 400.

Then we select the section div with the id of ‘tom’, and append an SVG element to it, and set its width and height with this line.

var width = 400, height = 400;
var svg = d3.select('#tom')
		.append('svg')
		.attr('width', width)
		.attr('height', height);

Next we append a circle to this SVG canvas. We also set it’s properties.

var vectorcircle = svg.append('circle')
				.attr('cx', width/2)
				.attr('cy', height/2)
				.attr('r', 100)
				.style('fill', 'orange')
				.style('stroke', 'blue')
				.style('stroke-width', '3px')

When you refresh the page, you should now see a circle:

And there, you have produced your first element in d3.js.

p5.js It’s a lot simpler in p5.js. p5.js was designed for artists to code their creations, but it can easily be used for visualising data as well.

Every p5.js code (or sketch as it is usually called), has a setup and a draw function:

In the setup function, we first create a canvas with the same height and width as the SVG canvas, and give it a background color of white.

function setup() {
	var canvas = createCanvas(width, height);
	canvas.parent('p5canvas');
	background('white');
}

And then we draw a circle, by stating that it’s fill should orange, and that it should have no stroke outline.

function draw(){
	fill('orange');
	noStroke();
	ellipse(width/2, height/2, 100, 100);
}

And that’s it! You are now able to create stuff in a browser using the d3.js and p5.js libraries.


Articles

AI and UIs
Listing NFTs
Extracting and Processing Wikidata datasets
Extracting and Processing Google Trends data
Extracting and Processing Reddit datasets from PushShift
Extracting and Processing GDELT GKG datasets from BigQuery
Some notes relating to Machine Learning
Some notes relating to Python
Using CCapture.js library with p5.js and three.js
Introduction to PoseNet with three.js
Topic Modelling
Three.js Series - Manipulating vertices in three.js
Three.js Series - Music and three.js
Three.js Series - Simple primer on three.js
HTML Scraping 101
(Almost) The Simplest Server Ever
Tweening in p5.js
Logistic Regression Classification in plain ole Javascript
Introduction to Machine Learning Right Inside the Browser
Nature and Math - Particle Swarm Optimisation
Growing a network garden in D3
Data Analytics with Blender
The Nature of Code Ported to Three.js
Primer on Generative Art in Blender
How normal are you? Checking distributional assumptions.
Monte Carlo Simulation of Value at Risk in Python
Measuring Expected Shortfall in Python
Style Transfer X Generative Art
Measuring Market Risk in Python
Simple charts | crossfilter.js and dc.js
d3.js vs. p5.js for visualisation
Portfolio Optimisation with Tensorflow and D3 Dashboard
Setting Up a Data Lab Environment - Part 6
Setting Up a Data Lab Environment - Part 5
Setting Up a Data Lab Environment - Part 4
Setting Up a Data Lab Environment - Part 3
Setting Up a Data Lab Environment - Part 2
Setting Up a Data Lab Environment - Part 1
Generating a Strange Attractor in three.js
(Almost) All the Most Common Machine Learning Algorithms in Javascript
3 Days of Hand Coding Visualisations - Day 3
3 Days of Hand Coding Visualisations - Day 2
3 Days of Hand Coding Visualisations - Day 1
3 Days of Hand Coding Visualisations - Introduction