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

• HTML

• Map

• Sound

Learning objectives

• Working with alternative ways to present data

Flipped classroom videos

• Leaflet Tutorial #1: Create a map with a marker using JavaScript

• 1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript

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 - pizzicato

Pizzicato.js is a javascript library for generating tones

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/pizzicato/0.6.4/Pizzicato.min.js" integrity="sha512-K+cPWcoDCr2JFFfe912LrvRUQbVJuWNfeWK5r/HrmpDs8ELrsjVib8Fs5oAxzu76fG66ajGhDLvvcxBbeEzl9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

main.js

const sineWave = new Pizzicato.Sound({
    source: 'wave',
    options: {
        frequency: 440
    }
});

document.querySelector("button").addEventListener("click", () => {
    // start the tone
    sineWave.play();
    // after 1 second stop the tone 
    setTimeout(() => sineWave.stop(), 1000)
})

The following will play a 400 hz sinewave tone

Let's try and audialise some data!

const data = [10,11,12,15];
document.querySelector('button').addEventListener('click', () => {
    let delay = 300;

    data.forEach((dataPoint, index) => {
        // create the sinewave with the frequency dependent on the datavalue
        const sineWave = new Pizzicato.Sound({
            source: 'wave',
            options: {
                frequency: dataPoint * 20
            }
        });
        // the release gives the tone a smoother sound
        sineWave.release = 0.4

        // This settimeout create the delay
        setTimeout(() => {
            sineWave.play();
            setTimeout(() => sineWave.stop(), 100)
        }, index * delay)
    });
});

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 2 - level 2

Audialise the inflation in Denmark using the following code

Important!! You should only work in the main.js file!

Steps:

1. Play a tone with the frequency of 200hz using the Tone.js library

2. Play a tone that is played after 1 second

3. Iterate the danishInflationNumbers array in the main.js file

4. Play the 200hz tone for each value in the array. The tones should be delayed with 1 second

5. Now play not just the tone but the tone depending on the inflation number

📝 Exercise 3 - level 3

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

In the main.js file the ufo sightings, and their lat and lng have been logged.

📝 Exercise 4 - level 3 - 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

📝 Start working on your portfolio project 4