Data Visualization Tools (2023)

[venkatrajam]

In this assignment each group will explore a dataviz tool (download, install, try out, and use it to create something), and present a brief demonstration/overview of the tool to the rest of the class ( max 10 minutes).

The objective is to introduce the tool to the class, and highlight its possibilities & limitations so the audience gets a good overview of the tool.

In your documentation, include links to the resources you used (if any) in your presentations, capturing your personal insights about the tool and related resources.

Observable -- This is a good tool to build interactive exploration and visualization to quickly answer questions and nurture understanding from data. Chart.js -- Simple, flexible JavaScript charts. RAW Graphs -- Copy/paste the relevant data directly from your spreadsheet program into RAW, choose a data visualization type, and set your parameters using a drag-and-drop interface. Each individual parameter or visual metric can be adjusted, and the interface is clean and intuitive, making it ideal for beginners. Tableau Public -- A free platform to explore, create and publicly share data visualizations online. Voyant Tools -- A web-based reading and analysis environment for digital texts. Timeline.js -- This is a powerful free tool developed by Northwestern University’s Knight Lab that helps you create engaging, timeline-based visuals to show off your data. Requires no coding. Circos -- Circos visualizes data in a circular layout which makes it ideal for exploring relationships between objects or positions. . Mapbox -- Powerful geo visualization tool for custom maps Datawrapper -- Powerful tool that requires no coding. Leaflet -- Lightweight open-source JavaScript library for mobile-friendly interactive maps. Google Looker Studio -- Free tool from Google and easy to set up if you have a Gmail account. Tangle -- Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Excellent for instruction design and process explanation projects. P5.js -- P5.js is a JavaScript library that sits on top of the Processing visual programming language. As with most JavaSript libraries, Processing.js is web oriented and lets you bring the Processing power to your web pages. Plotly -- Good suite of visual analytics products. Gephi -- Open source tool for link an network data analysis and visualization. OpenRefine -- Formerly Google Refine, OpenRefine is a powerful tool for working with messy data -- cleaning it; transforming it from one format into another; and extending it with web services and external data.

There are more tools here and here. If you want to pick a tool that is not listed above, discuss with me.

For how to document your work, take a look at what the previous batches did with this assignment (https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/issues/3, https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/issues/5, https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/issues/8, https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/issues/10).

[princeagarwa]

Prince Agarwal | 22M2247 | Interaction Design Manish Verma | 22U130014 | B Des.

Tool: Circos

What is Circos?

Circos is a free and open-source tool for visualizing data in a circular layout ( Chord Diagrams).

Why is it used?

It is ideal for exploring relationships between objects or positions in a dataset.

Where is it used?

It is most commonly used to analyze genome data, and the visualizations are used and featured in many publications. http://circos.ca/intro/genomic_data/

How can I use Circos?

There are three major tools for using Circos

1. Circos: Open-source Software Package
2. Circos Table Viewer: Online Generator
3. Circa: Paid Software

Circos

Installation Guide It's an open-source software package tool that can be used in Visual Studio to generate visualizations. Since plain text configuration files control it, it has no interactive user interface. That is why it is very difficult for a novice user to use.

Circos Table Viewer

It's an online tool with a simple user interface that is easy to use, making creating Chord Visualization easier.

Step 1: Data So we are taking hypothetical data on the participation of students in different events from various departments.

Formatting the Data

• Data values must be non-negative integers.
• No two rows or columns may have the same name.
• Column and row names must begin with a letter.
• Save the file as a tab-separated values format (.tsv).

Step 2: Upload the file Upload the .tcv file and then click on Visualize tool. It will take a few seconds.

Step 3: Results

You can customize the results from the settings.

Step 4: Download

This is a free and easy way to generate Chord Visualization, but this online tool provides fewer customization options than the first one.

Circa

Circa is the best tool to generate a beautiful circus plot without writing a single line of code. But it's paid.

Presentation

[shivaniv25]

Shivani Verma | Interaction Design | 22m2255 Avani Bhagdikar | B.Des Y3 | 21U130032

[karantanna-kt]

Karan Tanna | 22M2246 | MDes Interaction Design Akash Das | 21U130020 | 3rd Year BDes

Tool Explored : Timeline.JS

Presentation : Timeline.JS | 2023 | Karan Tanna | Akash Das

What is Timeline.JS? Timeline.JS was developed by knight lab at Northwestern University in 2012. It allows users to present chronological data in a visually appealing and user-friendly manner. No coding is required to use this tool & it is open source.

We have demonstrated the potential of this tool with an example. For the purposes of this assignment, we have chosen to demonstrate with data set of 'Largest Loss of Lives from Bombings in US'.

Conceptually, Timeline.JS has two components :

1. The Spreadsheet or Google Sheet

A google sheet is used for entering the data. A template is provided in the instructions section of the webpage. Each row in the spreadsheet is an event in the timeline. It contains data like start and end time/date/year,

2. Timeline.JS website

The website serves multiple purposes : a) Downloading Spreadsheet b) Editing options for timeline c) Previewing timelines d ) Share link to timeline e ) Exporting embed code

However, most work is done in the Spreadsheet.

Layout of Timeline :

Primarily, Layout of timeline has two parts :

A. Story Area This area contains : Title | Title of event. Date & time | Time & Date of event. Body | Description of event. Media | Relevant media file for event. Supports : Image, Video, Audio, Tweets, Google Map, and more.

B. Timeline Area This area contains : Title | Title of event. Date & time | Time & Date of event. Body | Description of event. Media | Relevant media file for event. Supports : Image, Video, Audio, Tweets, Google Map, and more.

Interactivity in Timeline :

Navigation : Navigation arrows takes you to next or last event. Zoom In / Out : + or - increases or decreases scale of timeline. Selection : Takes to particular event on clicking event span. Expanding Title : On hover, title expands. Panning : On dragging, you can pan through timeline.

Workflow | Steps to use Timeline.JS :

There are 4 steps to use Timeline.JS.

Step 1 : On the home page click on ‘Get the Spreadsheet Template’. Refer the guidelines to edit the spreadsheet and enter data (ie. date & time, title, media, body, etc).

(*enter data in this sheet only)

Spreadsheet Structure :

Example Dataset | Largest Loss of Lives from Bombings in US :

Source : Syracruse University Archives | Example Spreadsheet

Step 2 : After finishing the entering of data, publish the spreadsheet to the web, and hit ‘Publish' in the popup. (*Ignore URL given in pop-up.)

Close it and copy the URL from the address bar of the browser.

Step 3 : Copy/Paste URL in given box (on website) after publishing spreadsheet. (**You can edit language, font, slide type, dimensions etc using optional settings)

Step 4 : Use generated link of ‘Preview’ button on website to see your generated timeline. You can embed this to your blog or website using ‘embed’ link or share/preview using ‘share link’.

Preview Link : Largest Loss of Lives from Bombings in US | Timeline.JS

Limitations | What Timeline.JS Can't Do? :

1. Limited Visual Design Flexibility : While Timeline.JS is great for presenting chronological events, it may not be the best tool in terms of Visual Design flexibility. The CSS structure is pre-defined. You have to go through complex process to edit the CSS.

2. Limited Narrative Type : While it can visualise linear narrative well, Timeline.JS can not visualise hierarchal data.

3. No Non-linear Story Telling : The navigation is limited to left or right, one can not set non linear narrative.

4. Relies on Internet Connectivity : If internet connectivity is limited, performance may get affected with large data set.

5. Knowledge of Google Sheets Required: Timeline.JS is easy to use for large audience, but for non-tech-savvy users it may get hard to use.

6. Security : Since Timeline.JS relies on external data sources, such as Google Sheets, there might be security concerns on data privacy.

7. Data Synchronisation: Any changes or updates to the Google Sheet data require manual adjustments or re-importing the data.

Conclusion :

Timeline.JS is good for visualising simple timeline based data-narratives. It can be used for telling linear, embeddable, interactive, timelines and temporal data without coding skills.

However, It is not a good tool for non-linear, complex, hierarchal data. It can’t be used for commercial use due to privacy concern.

[MansiKhedekar]

Mansi Khedekar | 22M2253 | MDes Interaction Design Abhishek Kshirsagar | 21U130030 | 3rd Year BDes

Tool Explored : p5.js

Presentation : p5.js | 2023

What is p5.js? p5.js is a JavaScript library for creative coding, focusing on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! It is free and open-source.

What do you need for p5.js?

1. Prior knowledge of coding!
2. A Web Editor or Using a hosted version (CDN)

The basic code layout for the p5.js

How do you import data?

A few examples of possibilities

1. The intensity of Earthquakes around the world.

2. Movement of boxers

   

3. Interactive flight movement from Airports around the world

The same data is visualized differently,

4. A personal project exploring my expenditure by categories.

Some personal insights,

• p5.js is a good tool for creating custom visualisations that are tailored to your specific needs and requirements.
• It is especially a great tool for making interactive and simulative visualisations.
• The documentation and community for p5.js is beneficial for learning and troubleshooting.
• One of the main limitations of using p5.js for data visualization is its lack of built-in support for different chart types it is hence not for beginners.
• Everything needs to be created from scratch using lines and shapes.
• Visualisations may not perform optimally on mobile phones and old browsers.

[anniketmohalik]

Anniket Mohalik | B.Des | 21U130008 Deva Harsha Reddy | MDes Interaction Design | 22M2243

Tool Explored : RAWGraphs PPT : RAWMaps_Deva&Anniket.pdf

About the tool

• The idea behind RAWGraphs is to provide a way to easily explore your data and create visualization without coding skills.

• RAWGraphs is an open source data visualization framework built with the goal of making the visual representation of complex data easy for everyone.

• Primarily conceived as a tool for designers and vis geeks, RAWGraphs aims at providing a missing link between spreadsheet applications (e.g. Microsoft Excel, Apple Numbers, OpenRefine) and vector graphics editors (e.g. Adobe Illustrator, Inkscape, Figma).

• The project, led and maintained by the DensityDesign Research Lab (Politecnico di Milano) was released publicly in 2013 and is regarded by many as one of the most important tools in the field of data visualization.

Main Features

• Open source
• A wide range of charts
• Your data is safe
• Export and go anywhere

How to use

Step 1- Loading the Data

1. Paste from a table
2. Load a file in tabular format
3. From a URL
4. From a SPARQL query
5. From one of the data sample
6. Opening a .rawgraphs project

Step 2- Choosing a Chart

Step 3- Mapping the data dimensions to the visual variables of the chart

1. In this step you will map the data to the visual variables of the selected chart.
2. We just have to drag the green rectangles, aka your data dimensions, and drop them inside the box under the name of the variables.
3. The variables vary for different charts. If the variable doesn't accept the data type of the dimension you dropped, the rectangle become red and the chart can't be created.

Step 4- Tuning the visualization and export (Final step)

1. Artboard
2. Chart
3. Series - A small multiple (sometimes called trellis chart, lattice chart, grid chart, or panel chart) is a series of similar graphs or charts using the same scale and axes, allowing them to be easily compared. It uses multiple views to show different partitions of a dataset.
4. Color scales - Color is a key element in data visualization and it can used for different purposes. According to the data type of the dimension dropped in "Color" different options become available.
5. .svg .png .jpg .rawgraphs

Pros:

• Ease of Use: The tool is relatively easy to use, especially for those familiar with data visualization concepts. It doesn't require extensive coding skills, making it accessible to a wider range of users.

• Open Source: RawGraphs is an open-source project, which means it's free to use and open for contributions from the community. This fosters collaboration and allows for continuous improvement of the tool.

• Data Privacy: RawGraphs operates locally on the user's machine, which can enhance data privacy and security since sensitive data doesn't need to be uploaded to a remote server.

Cons:

• Limited Interactivity: While RawGraphs can generate static visualizations, it might lack advanced interactivity and animations that some other data visualization tools offer. This could limit the user's ability to create dynamic and engaging visualizations.

• Performance Limitations: Handling large datasets might be challenging for RawGraphs, potentially leading to performance issues or sluggish behavior when creating visualizations with a significant amount of data.

• Limited Advanced Features: RawGraphs might lack some of the advanced features and functionalities found in more specialized data visualization tools. Users with specific or complex visualization requirements might find the tool's capabilities somewhat limited.

[lakshrajpal1803]

Laksh Rajpal | 21u130028 | BDes 3rd Year Rajdeep | 22m2251 | MDes Interaction Design

[Yash2412kothari]

[JuneSardar]

[Anshika1105]

Anshika Gangwar - 21U130027 Vinay Kumar - 22M2250

1. What is Leaflet.js?

Leaflet.js is a JavaScript library for creating interactive maps that can be embedded into web applications. It provides an easy-to-use and lightweight solution for displaying geographic data on web pages.

2. Purpose of Leaflet.js

The main purpose of Leaflet.js is to simplify the integration of maps into web applications. It enables developers to add interactive maps and visualizations to their websites with minimal effort.

3. Different Features

Marker and Popup: Display custom markers on the map with associated popups for additional information. Tile Layers: Overlay different map layers like street maps, satellite imagery, or custom map sources. Zoom and Pan: Allow users to zoom in and out and pan across the map for easy navigation. GeoJSON Support: Easily display and style geographic data stored in the GeoJSON format on the map. Events Handling: React to user interactions like clicks, hovers, and drags on the map.

How to set-up with leaflet.js?

• Download Visual Studio code from https://code.visualstudio.com/download
• Download Leaflet.js from the official website: https://leafletjs.com/
• Refer to documentation for installation and configuration details.

Examples

• Choropleth map
• Distortable video
• Types of Maps
• Covid Data Sync
• Data Source

Pros

• Lightweight and fast: Leaflet is lightweight and designed to be fast, making it an excellent choice for creating responsive and efficient interactive maps on various devices.
• Cross-platform compatibility: It works seamlessly across different platforms and browsers, providing consistent performance and functionality.
• Easy to use: Leaflet's simple and intuitive API makes it accessible to developers with varying levels of expertise, enabling them to quickly integrate maps into their projects.
• Mobile-friendly: Leaflet is optimized for mobile devices, ensuring a smooth user experience on smartphones and tablets.
• Customizable: It provides extensive options for customizing map styles, markers, popups, and interactions, allowing developers to tailor the map's appearance and behavior to suit their needs.
• Plugin ecosystem: Leaflet has a rich ecosystem of plugins contributed by the community, enabling developers to add a wide range of additional features and functionalities.
• Geolocation support: Leaflet facilitates the integration of geolocation services, enabling users to display their current location on the map.
• Active community: The project has an active and engaged community of developers, providing ongoing support, updates, and contributions to the library.
• Open-source: Leaflet is open-source, meaning it is free to use, modify, and distribute, making it accessible to a broad range of projects and developers.
• Flexibility: Leaflet can be used in conjunction with other libraries and frameworks, making it easy to integrate into existing projects.

Cons

• Limited 3D support: Leaflet is primarily designed for 2D mapping and lacks native support for complex 3D visualizations.
• Performance with large datasets: Handling large datasets can cause performance issues, especially on older devices or browsers.
• Limited built-in functionality: While Leaflet provides essential mapping features, more advanced functionalities may require additional plugins or custom development.
• Difficult for people who don’t know coding.

[kashyapine]

Anmol Kashyap 22M2241 Dhairyasheel Sanjay Pawar (@Dhairya0802) 21U130037

Link to Presentation _https://docs.google.com/presentation_

Tools Review DataWrangler & ColorBrewer 2.0

What is DataWrangler?

• Wrangler is an interactive tool for data cleaning and transformation.
• Wrangler allows interactive transformation of messy, real-world data into the data tables for analysis tools. It exports data for use in Excel, Tableau, Protovis etc.
• The tool is a research output of Sean Kandel, Andreas Paepcke, Joseph Hellerstein and Jeffrey Heer from the Stanford University.

Source: http://vis.stanford.edu/wrangler

What Wrangler does?

Example in the above image, we can observe an unorganized data sourced from certain Government websites, which generally is available in such formats.

Steps:

• Go to http://vis.stanford.edu/wrangler/app/
• Paste your data
• Hit ‘Wrangle’

• Wrangler suddenly sorts the data for you!

Export data from Wrangler

• Export script easily in all forms for further visualization

Limitations of Wrangler

• Wrangler helps in ‘sorting’ the data but does not create beautiful visualizations like other tools.
• It’s a tool meant to use alongside other Data Visualization tools.
• It is a Beta version and a research project output thus has its own limitations.
• Support for Wrangler is long stopped and a more refined paid commercial version of the tool is made available by the researchers known as Trifacta, which they developed after completion of the Wrangler project.

To know more about DataWrangler, a research paper can be found on the following link http://vis.stanford.edu/papers/wrangler

About ColorBrewer

ColorBrewer is a web-based tool designed to help people create visually appealing color schemes for maps, graphs, and charts. It was created by Cynthia Brewer, a professor of geography at Pennsylvania State University, and is widely used by designers, cartographers, and data scientists.

Checkout ColorBrewer https://colorbrewer2.org/

How does it work?

ColorBrewer uses principles of color theory and perception to create visually distinct color schemes that are easy to interpret. The tool takes into account factors such as the number of categories or data values being represented, and then the type of data being displayed (e.g. nominal, ordinal, or quantitative).

Key Features

• ColorBrewer web-based interface is user-friendly and intuitive, making it easy for users to select and customize color schemes.

• It helps to choose good color schemes which are colorblind safe, print friendly and photocopy safe.
• It has features to add elements on the map like roads and city names to adjust good color contrast and checking readability.
• Users can also use terrain as their background and adjust the transparency to attain desirable contrast and readability.

• ColorBrewer also shows the color code for the users to use the accurate colors to use in other softwares.
• It also shows a wide range of color schemes which consist of vibrant and eye catching colors.

Some Exploratory Examples

It's Limitations

• Limited number of color schemes available. Users may want to adjust the brightness, saturation, or hue of the colors to better suit their needs. It lacks these functions.
• May not be suitable for all types of data and visualizations.
• In addition, some color palettes may not be appropriate for certain types of visualizations, such as heat maps or scatter plots.

Thank you!

Link to Presentation _https://docs.google.com/presentation_

[sparshGupta24]

Sparsh Gupta | M.Des 2nd Year | Interaction Design Mukul Naresh Mahajan | B.Des 3rd Year

Tangle

A tool by Bret Victor

https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/assets/42835809/e6f8ced6-5f2c-4ba0-85b1-ff63567362b5

Applications

Contextual Information

https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/assets/42835809/7492314f-e62c-40bc-a8da-5193ff154d76

Explorable example

https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/assets/42835809/4f0dcd1b-d093-4959-9be2-52c7aaaf3a37

Reactive Document

https://github.com/info-design-lab/DE705-Interactive-Data-Visualization/assets/42835809/9b21d419-b92f-49af-bffb-ba4be1265817

[AnujsAmbhore1]

Amruta Bailke | 22M2254 | Interaction Design | M.Des Anuj Ambhore | 21U130031 | B.des

---

Plotly

Examples

Clinical patient dashboard Medical Provider Charges Dashboard 3D Materials Visualization Uber Rides Geospatial Data Plotly on-site examples

[Ketaki007]

Raghav Samodia 21u130019 Ketaki Kshirsagar 22M2245

[AditiChintey]

Aditi Chintey | 21u130026 | B.Des 3rd Year Pabboju Vaishnavi

Datawrapper