DNSThought visualizations

This project has been created for NLnet Labs and consist of interactive visualizations showing DNSThought data.

Features

• Load and display data for the different SDGs

Link for the visualization (to be updated) https://dnsthought.nlnetlabs.nl/vis/

Global CSS for UI

Link for stylesheets

• https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css (see https://getbootstrap.com/)

Built with

• Svelte: Used as MVC framework.
• Vite: Used to build your code.
• Various D3 Libraries: Used for visualizations, adding interaction and reading the csv data files.
• Sveltestrap: Bootstrap for svelte, css grid used for responsiveness, js.

Installation

This project uses npm. For installation you will need to install node and npm, if you don't already have it. node and npm can be installed from here.

To install the project, simply clone the the repo and them run npm install in the project folder. You can use terminal on Mac and Command Prompt on Windows.

Run the terminal or command prompt and then run the following

git clone https://github.com/RoxanaTorre/DNSThoughtVisWeb
cd DNSThoughtVisWeb
npm install

Local Development

To start the project locally, you can run npm run dev in the project folder in terminal or command prompt.

npm run dev

This will run the app in development mode. Open http://localhost:5173/ to view it in the browser.

The page will reload if you make edits. You will also see any errors in the console.

To build the compiler and all the other modules included in the package:

npm run build

Local data

There's a small dataset available at public/data which is used for testing locally during development. These files can be removed after compiling from the directory dist/data.

Note that the following files should not be removed from the mentioned directory:

• labelsAll.csv
• shortAndLongLabels.csv
• asn.csv

Author

Design and development: Roxana Torre