Seminars

Seminar 5: Interactive Data Visualization with D3 - Part 2

Chyba: Odkazovaný objekt neexistuje nebo nemáte právo jej číst.
https://is.muni.cz/el/fi/podzim2023/PV251/um/seminars/seminar_5/Seminar5.pdf

We will continue with the tutorial on D3, adding interaction to the visualizations created in the previous seminar. You can download the completed version from the previous seminar including the bar chart and heatmap from the study materials.

You can either download the whole project:

Chyba: Odkazovaný objekt neexistuje nebo nemáte právo jej číst.
https://is.muni.cz/el/fi/podzim2023/PV251/um/seminars/seminar_5/D3_tutorial_middle.zip

or just the javascript/D3 code in the file myD3app.js and replace it in your original project:

Chyba: Odkazovaný objekt neexistuje nebo nemáte právo jej číst.
https://is.muni.cz/el/fi/podzim2023/PV251/um/seminars/seminar_4/myD3app.js


Setup notes:

You will need Node.js and npm (Node package manager, which usually comes with Node.js installation) to set up the application with the local server (already installed on school PCs).

On school PCs, save the project on drive J or local drivesdo not use network drives (\\ad.fi.muni...)

To start the application, navigate to the project folder (D3_tutorial_middle) and from the terminal run the following:
  • npm install  (install dependencies)
  • node index.js (start the server)

In the web browser open: localhost:3000

Follow tasks 3-6 in myD3app.js in the project.

Homework

Start working on your project implementation. By the next seminar try to prepare:

  • the basic skeleton of your project (e.g., layout with placeholders)

You don't have to submit anything to IS, but be prepared to show your progress next time.