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/soundarrow-up-right

Learning objectives

  • Working with alternative ways to present data

Teacher instruction

  • Portefølje 1 feedback

    • Nogle projekter ligner at de er kopieret via en tutorial fra youtube eller online. Det er vi lidt ærgelige over

      • Når det er eksamensprojekt skal i altså være obs på plagiat! Det bliver problematisk når i ikke nævner at i har taget noget online. For så ser det ud som om det er jeres og så er vi ovre i plagiat sag

      • Det man afleverer skal der man vide hvad gør. Det indgår jo i en mundtlig eksamen

    • I skal til at have styr på git! Det første i gør med sådan et projekt er et github repo og deployer det! Commit dagligt

    • Virkelig fede projekter i har lavet!

    • Sindsygt gode variabelnavne!

    • I må gerne til at bruge funktioner til at opdele jeres kode

      • Der er mange af jer der er ret god her

      • function greyOutText(element) {
            element.style.color = '#00000050';
        }
      • // Function that buys a multiplier and makes the counter go up at a faster rate
            function buyMultiplier() {
                if (clicks >= multiplierPrice) {
                    clicks -= multiplierPrice;
                    multiplier += 1;
                    multiplierPrice = Math.ceil(multiplierPrice * 50);
                    multiplierCountElement.innerHTML = `Multipliers: ${multiplier}`;
                    document.getElementById('buyMultiplier').innerText = `Buy Multiplier (${multiplierPrice} cookies)`;
                    counterElement.innerHTML = clicks;
                }
            }
    • Fedt med alt det querySelector!

      • Ikke document.getElementById

    • Brug DOM så lidt som muligt. QuerySelector fx

    • Vær konsistente i jeres navngivning computerScore_span

    • I gør ikke meget brug af kommentarer

    • Josef må jeg gennemgå din aflevering? https://github.com/Josef-TL/lethal-dose/blob/master/main.js

Flipped classroom videos

Maps - Leaflet.js

https://leafletjs.com/arrow-up-right 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

See the code for it here: simple-map.jsarrow-up-right, simple-map.htmlarrow-up-right

Displaying municipality data

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

See the code for it here: map.jsarrow-up-right, map.htmlarrow-up-right

Sound - Tone.js

Tone.js is a libraryarrow-up-right to generate tones.

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

index.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

The following will play a tone for an 8th note

Let's try and audialise some data!

See the code herearrow-up-right

HTML

You can just straight up create a visualisation using js and html. Fx in this projectarrow-up-right 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/htmlarrow-up-right

Canvas - P5.js

Using P5.jsarrow-up-right we can draw circles, squares, points etc.

📝 Exercises

Todays exercises will also be about data conversion!

📝 Exercise 1 - level 2

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

  1. Pharmaceuticals: US$19.4 billion (15.6% of total exports)

  2. Machinery including computers: $16.6 billion (13.3%)

  3. Electrical machinery, equipment: $9.6 billion (7.6%)

  4. Mineral fuels including oil: $6.1 billion (4.9%)

  5. Optical, technical, medical apparatus: $4.7 billion (3.8%)

  6. Meat: $4.3 billion (3.4%)

  7. Furniture, bedding, lighting , signs, prefab buildings: $3.9 billion (3.1%)

  8. Vehicles: $3.8 billion (3%)

  9. Fish: $3.6 billion (2.8%)

  10. Plastics, plastic articles: $3.1 billion (2.5%)

📝 Exercise 2 - level 2

Audialise the inflation in Denmark using the following codearrow-up-right

📝 Exercise 3 - level 3

Using leaflet.js visualise all the ufo sightings in Denmark in 2021 using the following codearrow-up-right

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

📝 Exercise 4 - optional - level 3

I have found data about spotify plays

Using the following boilerplatearrow-up-right 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

Last updated