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 One

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.

As we are going to be showing off our creations in the web browser, we need to have an understanding of how a web page works. A basic understanding of HTML, CSS and Javascript is what I hope to provide in this Day One tutorial.

HTML 101 First, a super basic HTML page that we can easily use for coding a data visualisation looks like this.

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

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

<body>

</body>

Let’s break this down. It’s quite simple actually. Let’s refer to each of these words enclosed in <> as tags.

The first two lines are not that critical to know. Just know that they are almost always the first two lines of a modern webpage.

The next few lines are important.

And that’s it. You now know HTML (or at least the rudimentary parts of HTML) needed to get things up and running.

The code for this first part is available here.

Now Draw a Circle in SVG

SVG stands for Scalable Vector Graphics. Basically, it’s what we can use to draw things on a webpage. We can also use something called the Canvas to draw, but we will go into that later.

Now that you have your webpage skeleton in place, drawing a circle just takes one line.

<svg width="500" height="500">
	<circle cx="250" cy="250" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

<svg>...</svg> tells the browser that we are creating an SVG object. We first declare a <circle/>. There’s no need for a closing tag here cause of the additional / at the end. With that, it’s a simple matter of declaring the properties of the circle - cx and and cy are its x and y coordinates, r is its radius, stroke, stroke-width and fill the color of its outline stroke, stroke thickness, and fill color respectively.

That’s it! You can now draw things in your browser. The code for this part is available here.

Using SVG to code a chart

Now let’s do things the really hard way first, before we start learning about how to use libraries like D3.js.

Using the HTML skeleton you built earlier, insert the title and the size of the SVG object that we will be creating first between the body tags.

<h4 fill='black'>Barebones Chart</h4>
<svg width = "600" height = "600">
...
</svg>

<h4> is a header tag. There also h1, h2, all the way to h6. The only difference is the size. <svg width='600' height='600'> sets the width and height of the SVG canvas that we will be drawing things in

Now, just copy and paste these lines between the <svg></svg> tags.

For the axis of the line chart -

<g>
<line stroke='steelblue' x1="90" x2="90" y1="5" y2="371">
</line>
</g>

<g>
<line stroke='steelblue' x1="90" x2="705" y1="370" y2="370"></line>
</g>

For the labels -

<g transform='translate(0,10)'>
<text x="100" y="400">2013</text>
<text x="246" y="400">2014</text>
<text x="392" y="400">2015</text>
<text x="538" y="400">2016</text>
<text x="684" y="400">2017</text>
<text x="400" y="440">Dates</text>
</g>

<g transform='translate(-10,0)'>
<text x="80" y="15">60</text>
<text x="80" y="131">40</text>
<text x="80" y="248">20</text>
<text x="80" y="373">0</text>
<text x="40" y="200">Levels</text>
</g>

For the circles showing each datapoint -

<g>
<circle cx="90" cy="192" r="4" fill='steelblue'></circle>
<circle cx="240" cy="141" fill='steelblue' r="4"></circle>
<circle cx="388" cy="179" fill='steelblue' r="4"></circle>
<circle cx="531" cy="200" fill='steelblue' r="4"></circle>
<circle cx="677" cy="104" fill='steelblue' r="4"></circle>
</g>

And the line plotting out the data points -

<polyline
		fill="none"
		stroke="steelblue"
		stroke-width="1"
		points="
		90,192
		240,141
		388,179
		531,200
		677,104"/>

Insert the code step by step and you will see the chart slowly appear, like magic. To understand how the code works, just try changing the numbers and properties and it will become quite clear. This is not the most optimal way of hand coding visualisations so I won’t go into great detail. But it should be fairly obvious.

The code for this part is available here.

This is obviously not the best way to hand code data visualisations. But it’s good to understand how things come together on a webpage. Otherwise, it’s a bit harder to grasp how libraries like D3.js work (which we will cover in the next 2 days).

And that’s it for the first day!


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