Data Visualization Tools (2021)

[venkatrajam]

In this assignment each of you will select one of the following 18 tools, explore it as thoroughly as you can (download, install, tryout, and use it to create something), and do a demonstration/overview of the tool to the rest of the class (20 minutes).

The objective is to introduce the tool to the class, and highlight its possibilities & limitations so the audience can make a well informed choice of available tools. We will do 4 tools per day starting from Thursday onwards. Soumyo will coordinate the assign the tools. This is a credited assignment.

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.

1. Observable -- This is a good tool to build interactive exploration and visualization to quickly answer questions and nurture understanding from data.
2. Chart.js -- Simple, flexible JavaScript charts.
3. 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.
4. dygraphs -- Another fast, flexible open source JavaScript charting library.
5. Palladio -- A good tool to visualize complex historical data which are often qualitative and incomplete in nature, and to build better understanding of the historical material through humanistic inquiry.
6. 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.
7. Circos -- Circos visualizes data in a circular layout which makes it ideal for exploring relationships between objects or positions. .
8. Candela -- Open source suite of interoperable web visualization components..
9. Datawrapper -- Powerful tool that requires no coding.
10. Leaflet -- Lightweight open-source JavaScript library for mobile-friendly interactive maps.
11. Google Data Studio -- Free tool from Google and easy to set up if you have a Gmail account.
12. 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.
13. 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.
14. Plotly -- Good suite of visual analytics products.
15. Gephi -- Open source tool for link an network data analysis and visualization.
16. 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.
17. Orange -- Open source machine learning and data visualization for novice and expert. Interactive data analysis workflows with a large toolbox.
18. R Shiny -- Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, html widgets, and JavaScript actions.

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 (2019, 2020).

[soumyomkhj]

Chart.js

Presentation

Chart js is a very simple Javascript data visualization library. It uses HTML canvas to make simple lightweight charts. Here is a simple reader chart that I made in no time

Source: Health Management Information System, Ministry of Health & Family Welfare 2015-16

---

What you can do?

• Setting up and getting started is also easy
• Shallow learning curve with good documentation
• Make charts easily
  • Line Chart
  • Bar Chart
  • Radar Chart
  • Doughnut and Pie Charts
  • Polar Area Chart
  • Bubble Chart
  • Scatter Chart
  • Area Chart
• Combine these to make charts with mixed types. They have good documentation of all of the charts on their website. Also, we do have even more complex charts available here as plugins.
• Animate easily (Basic animations)
• Responsive charts

What you can not do?

• Customize the charts too much except for basic customization provided by chart.js
• Being canvas based we don't have any control over elements manually
• No GUI makes things a little harder if you haven't coded before
• Its is very simple so you cant expect versatility like other bigger frameworks
• You have to manually set all the data points and titles, the process of setting up huge databases is not optimal

It for you if-

• You have little coding experience and want to include a few simple charts on your website
• It is a one-off thing and you don't want to dynamically change the Visualization over time
• You don't want to do complex visualizations
• You want to work with smaller datasets
• You want to make the chart quickly

[JOHNPAULKUJUR]

Palladio

It is a product of Stanford’s Humanities + Design Lab, a web-based Data Visualization tool for complex humanities data. It's a very simple and easy-to-use tool with minimal Interface to choose from.

Advice: Lots of bugs so need patient handling.

• If you refresh the page or your tab accidentally closes or if you go back you lose everything.
• If you try to upload data. it just loads forever.

Map view

• Coordinates data (Latitude and Longitude) as points on the map
• The connection between the distinct points
• Filters (Street, Satellite, Terrain, etc.)

Graph view

• Relationship b/w any two attributes of data
• Connected nodes
• Nodes can be color-coded and scaled

List view

• Attributes can be arranged to make custom lists.

Gallery view

• Grid setup
• Sort data according to different dimensions

Apart from these four main features, there are three more filters that are very useful to analyze data for visualization.

• Facet
• Timeline
• Timespan

  Facet : Visualizations can be made and analyzed by selecting values of specific or multiple dimensions

Timeline : Used to visualize and analyze how time-dependent attributes can be varied over time.

Timespan : Used to analyze how a specific dimension has changed over a period of time.

When Could Palladio be the right tool for you? If you have structured data If you are interested in time, places, and relationships If your data has many attributes

When Could Palladio not be the right tool for you? If you have unstructured data If you just want to count things If you want to present an interactive data visualization If you want to create complex, fine-tuned maps, and network graphs

Presentation

[kyuubito]

[Shobhit17-Git]

Shobhit Kenath | 206330004 | Interactive Data Visualization | Assignment #3

Tool chosen - Timeline.js

Timeline JS - Shobhit Kenath.pptx Timeline JS - Shobhit Kenath.pdf

What is Timeline.js? As the name suggests, It is a data visualization tool that can be used to tell interactive timeline-based stories. This web-based tool has been developed by knight lab, and is completely free to use.

I have demonstrated the capabilities of this tool with examples. For the purposes of this assignment, I have chosen to tell a story about the events that led to the start of World War II.

How does it function? On the homepage of the tool, one can see a demonstration through an example and read instructions on how to use the tool. It is fairly simple to learn.

Conceptually, the tool has 2 components: A spreadsheet - 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. The website - serves multiple purposes Previewing timelines Instructions on how to make a timeline Sharing link to timeline Exporting embedded code

From the diagram, it is clear that most of the work needs to be done on the spreadsheet. What all can it do? Interactive Timelines Layout There are 2 components to the layout: The storytelling area Title - The main idea you want to convey for a particular event Date & time - The author can choose the granularity which ranges from the year to the exact time something happened Body text - Provides a description of the event being shown Media - You can choose to upload images, videos, audio, tweets and Google map. The supported media types can be viewed here. Timescale - This band at the bottom shows where the event is placed in the timeline. There are 2 types of data that can be shown: Events - Something that occurred at a given point in the timeline Eras - A period of time that signifies something Interactivity Zooming There are 6 levels of zoom that the tool provides. One can choose to get an overall perspective of all events by zooming out OR view exactly when an event occurred by zooming in. The following diagrams show the levels of zoom. Panning - one can pan across the timeline by clicking and dragging Selecting - On clicking the event, the title, date, body and media associated with that particular event are displayed Expanding titles - If the title is too long, one can hover over the banner to see the full title Publish The timeline can be either previewed, shared via link or exported as an embeddable code. Previews The timeline can be previewed in a new window or on the same page, by clicking the appropriate buttons. Shared links A link is generated for your timeline and the same can be shared by copy-pasting. Here’s a link to the timeline I made. Embeddable codes The tool helps generate a code for the timeline, which can simply be copy-pasted into the parent code of your website. Example - Events that led to World War II How can I use this tool? One can follow a simple set of steps to create a timeline out of Timeline.js. The steps are: Create a spreadsheet - Go to the homepage of the tool and click on “get the spreadsheet template”. Note that all data has to be entered only in this template, and not anywhere else. Alternatively, this link can be used to access the template. Within the spreadsheet, enter each event into a row. For events that last for a period of time, the end date & time can also be entered. Note that no rows should be left empty, column headers should not be changed & columns shouldn’t be removed. For each event, a media can be assigned. The media type ranges from images, video, audio to Tweets and Google maps. The media has to be entered into the table in the form of URLs. The spreadsheet will notify you if the URL is invalid. After all the rows have been filled, all that needs to be done is publish. To publish the timeline: Go to file > publish to the web. In the window that appears, change the setting from “entire document” to “od1”. Close the window after this. Copy the URL of the spreadsheet from the browser’s address bar. Now go to the website. Scroll down to step 3. Paste the URL in the bar. There are optional settings that can be used to alter the font combinations, language, default start slide, initial zoom level and some other minor adjustments. Scroll further down. Click on “preview timeline”. The link and embeddable code can be copied as well. What it cannot do Complicated timelines Non-linear narratives need manual navigation. Explore eras Eras are significant to the effectiveness of the storytelling. However, one cannot click on an era to learn more about it. For example, in my visualization “Neville Chamberlain tries to stop the invasion” is something that happened over a span of 15 days. Hence I labeled it as an “era” rather than a “title”. However, the information entered in the table is not shown in the visualization. Only by changing it to “title”, it was visible as an event that spanned over a period of time. The element of interactivity is being underused here. Visual design There are no options for the author to change the style, colours or elements of the visualization. Such a treatment would have enabled an added layer of character to the visualization. Hierarchy in events In a given narrative, there can be events that are directly causing a particular phenomenon to occur. In my example, the event “Britain and France declare war on Germany” holds higher significance than events like “the Locarno Pact”. The tool lacks the ability to convey such hierarchy. Edit the layout There is no means to change the distribution of area between the timescale and story. Conclusion This tool can be utilized for: Creating visually neutral timelines that can be quickly shared and embedded into a parent code Comparing events visually for better comprehension. For example, it is evident that Hitler violated the treaty of Versailles over a period of time and even when he invaded Poland, the Allies did nothing.

[krishnamalji]

Krishna Malji | 206330013 | Interactive Data Visualization | Assignment 3

Tool chosen - Datawrapper Presentation

Introduction Datawrapper is a user-friendly, open-source web tool that you can use to create basic interactive charts. By loading your CSV dataset into Datawrapper you can make a chart or a map that can be embedded onto a website. Among others, you can generate pie charts, line charts, bar charts (horizontal and vertical) and maps.

What is it? An opensource data visualization tool to create interactive charts, tables and maps easily.

When to use it?
When you want to create aesthetic visualizations quickly, without spending much time in learning the tool. The tool has a very low entry barrier.

Who can use it? A person with or without coding knowledge and a little bit knowledge about data and type of charts.

How to use it? Using Datawrapper is fairly easy. It is a web based tool. Follow the steps to create a visualization: Step1: Visit the website and chose the type of viz. you want from charts, maps and tables. step2: Input the dataset. step3: Varify the data step4: Choose type of chart, detail it, Annotate and choose a layout. step5: Publish the chart After this you will be able to download Png and also get embed link of the chart. SVG and PDF option is for paid versions.

Input: 1.copy and paste data,

2. Input .XLS,
3. Input spreadsheet, 4.Input external data

Types of viz.: 1.Charts, 2.Tables, 3.Maps

Customization:

1. Fonts,
2. colors,
3. Size,
   4. Labels,
4. annotations

Output: Png Embed link SVG, PDF (Paid)

Some importnt points: 1.Once published, the data is accessible to others, so confidential data can not be published. 2.Need to change source code for customization.

3. DatawrapperRiver is a gallary of work done by community where you can also put your work 4.Has some glitches like legends dont work properly.

References: https://www.youtube.com/watch?v=QcIExEOE3UA&list=PLY-dbT7YLWMb9GNZC092WK47qhVcdKLO3 https://academy.datawrapper.de/

[lokeshkumar1996]

Lokesh kumar | 206330003 | Interactive Data Visualization | Assignment #3 Tool: ORANGE

My Presentation

About the Tool Orange is an open-source component-based visual programming software. This is a very powerful tool and it is like the one-stop solution for pre-processing the data, visualizing the dataset using graphs, all inbuilt machine learning algorithms, test and score features for measuring the accuracy of the algorithm on different datasets.

used for :

• data visualization
• machine learning
• data mining
• data analysis

How it works

• Mainly focused on “visual programming” (No coding), but you can add scripts to do detailed analysis.
• Uses Widgets and Flows
• Drag and drop based

Basic usage:

• Data
• Visualize
• Text mining
• Image analytics
• Networks
• Geo data
• Time series

Advance User

• Training data models supervised &Unsupervised
• Evaluate models
• Bioinformatics
• Single cell
• Spectroscopy

Data types you can handle in Orange:

• Files ( data sets, Database, SQL datas)
• Numeric ( .tab, .csv, google sheet, .xlxs, excel formats)
• Texts (word, google doc, pdfs, txt)
• Images ( jpg, png, svg)
• Class ( objects data)
• Spectral data ( frequencies )

Output Formats Can export the visualizations as an image ( PNG, SVG ) and PDF report.

Has very less customization options

### Text processing

Visualization options available

Pros:

• Both novice and expert users can easily use.
• Open-source software package
• Visual programming, No coding.
• Support wide range of data formats.
• Does not require coding skills but python scripting can be used for data mining and analysis.
• Can see dynamic analysis by altering specific subsets.
• Can build predictive models
• Provides preprocessing
• Has all documentation and support & examples in website.
• Can export the visualizations as an image ( PNG, SVG, PDF).

Cons

• Lots of options, can be confusing for simple data visualization task.
• Not enormously robust for working with large datasets.
• Best suited for smaller projects, exploratory data analysis or pedagogical purposes,
• Meager customization Option, not aesthetically pleasing.

Example workflows in the Websites, which you can use as a reference

Works of few people

[StutiPK]

Tool: Tangle

Tangle – Explorable explanations made easy

The Tangle library was developed by Bret Victor in the year 2011, so it has been quite a while and has not been extensively used. Although the idea of tangling focusses on active reading, that is, representing concepts and data in a text in an interactive manner allowing active reading. To get Tangling, you need to know how to use HTML, some CSS and JavaScript as there is very little documentation around how to really use Tangle. To begin, you must download: • The Tangle.js lightweight library with no dependencies • The TangleKit which is a collection if UI components that can be used as a part of reactive documents that help user interact with text and graphics. This uses MooTools, sprintf, and BVTouchable which is available with the download package • The Tangle Template is an easy way that can help you understand a basic Tangle, although may not be enough for people unfamiliar with coding

To understand tangle better, read ‘Ten Brighter Ideas?’ - An Explorable Explanation by Bret Victor (March 29, 2010)

Not a lot can be found about the library online, but if you look, you could see a few people trying out the library for various use cases such as education and ideating around new dynamic reading interactions here

What you can do with reactive documents:

1. Text is embedded with sections where users can interact with equations, graphs, charts, text to manipulate outcomes that help explain a concept an author is trying to put forth
2. Attempts to provide unique insights to users
3. Encourages readers to think critically, ask questions and explore
4. Other libraries such as D3.js can be used to create the visualizations
5. The TangleKit has different kinds of UI interactions, so if you know JS, you could easily explore with those and add more classes

Below is the basic HTML and JS syntax that is used to create a tangle where the user can calculate the number of calories in a specific number of cookies. The user can drag right or left to increase or decreases the number respectively. This interaction is not very intuitive, but can be worked upon to provide better css styling and cues.

HTML attributes inclued:

• class
• data-var
• data-format

JavaScript API:

• new Tangle (rootElement, model)
• tangle.setModel(model)
• tangle.getValue(variable)
• tangle.setValue(variable, value)
• tangle.setValues({ variable:value, variable:value })

Thanks, Stuti

[anjalisohal]

Tool: Circos

[jribh]

Name: Jribh Shandilya, 206330010

Tool: P5.js

What is P5.js?

P5.js is a JavaScript library that allows for beginner friendly creative coding by making interactive web pages.

Every interactive web page you see on the internet is made up of 3 main components, HTML (which contains the content), CSS (which defines the visual guidelines) and JavaScript (which defines how things run and execute). JavaScript has a lot of libraries made by organisations and individuals which help in making the lives of coders easier. Libraries are basically collections of predefined functions which do a certain task, so that the coder doesn't need to define said functions again.

There are various types of libraries- machine learning libraries like Tensorflow.js, UI libraries like react.js, creative visualisation libraries like P5.js, chart.js, D3.js and many more.

Furthermore, P5.js also has its own supported libraries which include core libraries like P5.sound and P5.accessibility, and community libraries like P5.ble and P5.bots.

What all can P5 do?

P5 can be used to make static 2D & 3D, animated 2D and 3D, interactive elements and basic force simulation. These objects are drawn on an HTML element called canvas. P5 specifically refers to them as sketches.

Where can P5 be used?

Although P5 is a jack of all, it is an excellent tool for instructional data visualisations, just because of its ability to handle a wide range of 2D and 3D elements.

Although P5 can also handle big data, it's not very intuitive and I feel there are definitely better tools for that.

Basic syntax rules

So P5 uses 2 basic functions, setup() and draw(). Setup contains code that's going to run once, like createCanvas() and background(). Draw contains code that runs repeatedly, 60 times a second to be precise.

Example demonstration

I made a simple flood simulator that shows how P5 can be used to quickly make instructional visualisations in very less lines of code. The simulator can be accessed from here.

So what's happening in the code is this-

1. A scene is set up for the 3D environment.
2. A terrain model is loaded as an obj file
3. A cuboid that mimics water is placed in the canvas.
4. An interactive slider is made, and it's value is mapped with the Y-axis value of the water cuboid.
5. Now, whenever a user drags the slider, the water cuboid moves up, giving a perception of which areas are going to flood the earliest in the uploaded terrain.

Some stellar examples

Some amazing work has been done using P5, some of which are explained below. The whole showcase of works can be accessed here.

- All Goals of Esteban Paredes - Transport Flow Map for Santiago, CL

Positive aspects of P5

1. P5 is a jack of all trades, being able to handle 2D, 3D, animations and interactions.
2. It's easy to use, shortens code a lot, and easy to share results, as it can be run in any modern web browsers.
3. It has very extensive documentation, which is available here.
4. P5 has provided an online editor which is very convenient for quick sketches.

Negative aspects of P5

1. If you run into some specific problems, online support isn’t as extensive as vanilla JS.
2. Doesn’t specialise in anything (Eg. you can use three.js for 3D, matter.js for simulating forces, etc.)
3. Error recognition in the browser console is a bit unfriendly. Takes time to figure out what went wrong.
4. Not as data driven as D3.js (Although it doesn’t claim to be. Big data can be processed using variables and loops)

Some of my tips

1. The origin of every 2D canvas lies at top left by default
2. The origin of 3D canvas lies at the center by default
3. In 3-D space, follow the left hand rule to get axes directions. Remember that Y goes positive in the downward direction.

The link for my detailed presentation is available here.

That's it for P5, Jribh

PS. If you like it, consider supporting P5.js. It's amazing and it's open-source.

[arshiyagahlot]

Name : Arshiya Gahlot, 206330011 Tool : R Shiny Presentation here

About the Tool : Shiny is a library in R Studio which helps in building interactive web based applications using R Programming. R is an open source programming language that is widely used for statistical and data analytics and is quite popular amongst data scientists. It has a very good documentation of step by step approach of learning R and R shiny for building interface based visualizations.

Where it can be used? R Shiny can handle really big datasets and easily visualise them with quick and responsive web based interfaces. It allows a variety of functions that can be used to create custom UI functions according to the kind of inputs/ interactions that we want to present to the users. There are a bunch of visualization libraries that are available in R Studio which can be used according to the kind of charts to be visualized and presented to the audience. Its highly customisable and responsive. It can be used to create 2D or 3D visualizations, animations and interactions all highly responsive and reactive.

Basic Framework of code for Shiny R : -Defining the libraries -Defining the UI elements function -Defining server logic which enables real time input and reflects it in the output -Function for running the application

Demonstration of basic code (plotting random numbers from 1 to 100) in R Shiny :

Some examples to understand R Shiny here

1. Google Charts using R Shiny
2. Movie Explorer timeline based visualization

Pros : -Really good at handling big and complex datasets -Offers a variety of visualizations that can be customised through code -Higly flexible in terms of customising the visual design and appearance of the visualization -Higly flexible and has lot of predefined functions and libraries for visualising different kinds of interactions, animations etc. -Has highly responsive and reactive web based interfaces for visualization

Cons : -Requires coding skills and some experience in R programming to make full use of the tool -Requires you to have awareness about the kind of chart/visualization to be used

Other explorations : -RStudio in itself a powerful Data Visualization and analysis tool which is quite scalable. -You can also run machine learning and AI codes on RStudio

Thanks!

[nehabala]

Name : Neha Balasundaram Tool : Google Data studio Presentation here

What is data studio?

Google data studio is a data visualization tool that lets you build interactive dashboards, and customized, beautiful reporting. Setup is simple, all you need is a google account. It is used widely to analyze and present marketing statistics from other google data sources like Google ads, Youtube, etc.

Capabilities

• Can connect to multiple data sources (Analytics, Google ads, Google sheets)
• Transform data into usable and readable formats (Functions and explorer for ad-hoc querying)
• Visualise data (Shapes and images, Visualisations, dynamic data controls)
• Sharing and Collaboration (Real time collaboration, Sharing similar to google drive)

What can you make with Data Studio?

Dashboards

• Visualize live data with aesthetic, customizable, and readable graphs and charts
• Highlight & understand key performance indicators for your organization
• Dynamically pull in data, maintain a live connection, data is updated in real time and minute to minute changes shown.
• [Sample: Google Ads Geographic Performance
• ](https://datastudio.google.com/u/0/reporting/f5553bd7-b70a-415f-986f-100c17ba8f4d/page/azjBB/preview)

Reports

Reports

• Reports are static documents organized to highlight specific raw numbers or relevant data sets. Data isn’t live.
• Allow the creator to build full narratives with data and optimize its presentation
• Can show more detail compared to dashboards - Sample Report: Makeover Monday 2018 W32: Global Investment in R&D (google.com)

Community visualizations

• Charts/Dashboards created by third-party developers that work with your data.
• Creating one involves writing your own code and uploading to data studio
• Configuration similar to Data Studio's default charts. Can display data from your data source.
• Sample: DSCV Chord Diagram

Demonstration

I used a agriculture crop production dataset from Kaggle (link) We will make a

• Donut chart indicating how much money goes into producing each crop
• Column chart indicating how much each state spends on production of crops

• A choropleth indicating total yields of all crops

  Using formulas will also be explained

Here is the data studio report: link

Here is what was created during the demo

[anurag27k]

https://observablehq.com/

PDF Link here

• Explore, visualize, and analyze data.
• Collaborate with the community.
• Learn and be inspired.
• Share insights with the world.

What is the tool about?

• Brings code, data, context and teams together
• Live and interactive canvas gives real-time feedback.
• Share, collaborate and iterate, right in the browser.
• Data, dashboards, and context all together

Who is it for

1. Interaction designers
2. Programmers
3. Data scientists
4. Anyone who wishes to visualize data

Note: We need not master the entire tool. Just learn how much you can make use of it. Later cater to your needs.

What is required?

Structure

• Its a web based application.

• Each project is in the form of a notebook.

• Each notebook contains cells which can be moved up or down based on the convenience.

• On the left you see Attachments and Snippets.

How it works

• Expand to find the code.

• Pin the code to always see the code.

• Run the code to see the effect in the block above.

• Add another cell

• Share the notebook to show or get review to others.

What can you do more?

1. An HR diagram plots the relationship between stars’ absolute magnitudes (brighter going up) and temperatures (warmer going left). Link for the source

2. A phylogenetic tree inspired by a figure from Nature and Jason Davies. Link for the source

Other features it offers

• Select presets (Snippets) from left panel
• Publish the notebook or share it to specific people
• Choose from several libraries from the community.
• Easy addition of file attachments.
• Non linear flow.
• Instant automation updation

When to use

• When you need to have lots of visualizations to show
• When you wish to work with huge data
• When you want fast processing
• When you want to tinker the visualization
• When you want to share/publish quickly to others

When not to use

• When you are in hurry and have no coding experience
• When you want default templates to work with
• When you don’t wish to explore a lot of libraries

That's all folks! Anurag Kumar Singh, 206330009 M.Des IxD 2020-22, IDC IIT Bombay