Javascript - Visualising data using tones, maps, html and canvas

There are multiple ways of visualising data. Here are some different ways that will hopefully open your mind a bit. Check the the code for the examples out here: https://github.com/behu-kea/data-viz-examples/tree/main/sound

Learning objectives

Working with alternative ways to present data

Teacher instruction

Tværfaglig i næste uge
Aflevering søndag portfolio 2. Deadline er striks!

Flipped classroom videos

Maps - Leaflet.js

https://leafletjs.com/ is a open source javascript library for creating maps. It is quite powerful and versatile.

You can fx

Create routes
Put circles or points on a map
Color different sections of a map after some data

Adding a circle to Leaflet.js

Add a circle to a map on the point: latitude: 56.8033777 and longitude: 9.5168986

const map = L.map("map").setView([56, 11.6], 6);

const tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
L.circle([56.8033777, 9.5168986]).addTo(map);

See the code for it here: simple-map.js, simple-map.html

Displaying municipality data

Check an example here where i add some kommune data to leaflet:

See the code for it here: map.js, map.html

Sound - Tone.js

Tone.js is a library to generate tones.

To import the library put the following in your head tag:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.42/Tone.js" integrity="sha512-jP8QvBXowc1rZhRvIR8Byb1ozO1xd41D3qwCCqgLObgPd4XXXh6Bws0gthw94jq0F8PWyGwIe+PaP0WJVihHZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Guess My Number!</title>
</head>
<body>

<main>
    <button>Play audio</button>
</main>
<script src="main.js"></script>
</body>
</html>

To play any music we need the user to click something on our page. Therefore there is a button in the html

main.js

document.querySelector('button').addEventListener('click', () => {
    //create a synth and connect it to the main output (your speakers)
    const synth = new Tone.Synth().toDestination();
    //play a tone with 200 hz for an 8th notes time
    synth.triggerAttackRelease(200, "8n");
  	// after 3 seconds play 400 hz
    synth.triggerAttackRelease(400, "8n", 3000);
});

The following will play a tone for an 8th note

Let's try and audialise some data!

const data = [10,11,12,15];
document.querySelector('button').addEventListener('click', () => {
    let delay = 300;
  	for(let i = 0; i < data.length; i++) {
      const dataPoint = data[i];
      const synth = new Tone.Synth().toDestination();
      const now = Tone.now();
      // play a tone based on data for the duration of a 12th note every second
      const timeBetweenNotesInSeconds = 0.2;
      synth.triggerAttackRelease(dataPoint * 100, "12n", now + (i * timeBetweenNotesInSeconds));
    }
});

See the code here

HTML

You can just straight up create a visualisation using js and html. Fx in this project i visualised how much Danske bank money laundered for by just adding images of houses, boats and so on.

Here is an example of a site that just renders 10.000 spandauers https://github.com/behu-kea/data-viz-examples/tree/main/html

Canvas - P5.js

Using P5.js we can draw circles, squares, points etc.

📝 Exercises

Todays exercises will also be about data conversion!

📝 Exercise 1

Using leaflet.js visualise all the ufo sightings in Denmark in 2021 using the following code

In the main.js file the ufo sightings have been logged.

📝 Exercise 2

Audialise the inflation in Denmark using the following code

📝 Exercise 3

Visualiser top 10 eksportede kategorier fra danmark kun med brug af html!

Pharmaceuticals: US$19.4 billion (15.6% of total exports)
Machinery including computers: $16.6 billion (13.3%)
Electrical machinery, equipment: $9.6 billion (7.6%)
Mineral fuels including oil: $6.1 billion (4.9%)
Optical, technical, medical apparatus: $4.7 billion (3.8%)
Meat: $4.3 billion (3.4%)
Furniture, bedding, lighting , signs, prefab buildings: $3.9 billion (3.1%)
Vehicles: $3.8 billion (3%)
Fish: $3.6 billion (2.8%)
Plastics, plastic articles: $3.1 billion (2.5%)

📝 Exercise 4 - optional

I have found data about spotify plays

Using the following boilerplate we want to create a data visualisation that tells the following story:

For old people in the age of 60 - 80
We want to say that Eminem is one of the most popular Spotify artists ever

You have to create a suitable online visualisation that tell the story above. It is up to you what tool to use and how to visualise the point

PreviousJavascript - Visualizing data using chart.js NextGetting data from workbench to javascript

Last updated 3 years ago

hashtagLearning objectives

hashtagTeacher instruction

hashtagFlipped classroom videos

hashtagMaps - Leaflet.js

hashtagAdding a circle to Leaflet.js

hashtagDisplaying municipality data

hashtagSound - Tone.js

hashtagHTML

hashtagCanvas - P5.js

hashtag📝 Exercises

hashtag📝 Exercise 1

hashtag📝 Exercise 2

hashtag📝 Exercise 3

hashtag📝 Exercise 4 - optional