# 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](https://behu-kea.github.io/data-viz-examples/html/index.html)
* [Map](https://behu-kea.github.io/data-viz-examples/map/map.html)
* [Sound](https://behu-kea.github.io/data-viz-examples/sound/sound.html)

## Learning objectives

* Working with alternative ways to present data

## Flipped classroom videos

* [Leaflet Tutorial #1: Create a map with a marker using JavaScript](https://www.youtube.com/watch?v=wVnimcQsuwk)
* [1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript](https://www.youtube.com/watch?v=nZaZ2dB6pow)

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

```javascript
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](https://github.com/nicklasdean/ITA22F/blob/master/webteknologi/visualisation-2/map/simple-map.js), [simple-map.html](https://github.com/nicklasdean/ITA22F/blob/master/webteknologi/visualisation-2/map/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](https://github.com/nicklasdean/ITA22F/blob/master/webteknologi/visualisation-2/map/map.js), [map.html](https://github.com/nicklasdean/ITA22F/blob/master/webteknologi/visualisation-2/map/map.html)

## Sound - pizzicato

[Pizzicato.js](https://alemangui.github.io/pizzicato/#sound-from-waveform) is a javascript library for generating tones

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

```html
<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**

```javascript
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!

```javascript
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](https://github.com/nicklasdean/ITA22F/tree/master/webteknologi/visualisation-2/sound)

## HTML

You can just straight up create a visualisation using js and html. Fx in [this project](https://benna100.github.io/53-milliarder/) 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](https://p5js.org/) 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](https://github.com/nicklasdean/ITA22F/tree/master/webteknologi/visualisation-2/danish-inflation)

**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](https://github.com/nicklasdean/ITA22F/tree/master/webteknologi/visualisation-2/ufo-sightings)

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](https://github.com/nicklasdean/ITA22F/tree/master/webteknologi/visualisation-2/spotify-data) 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
