search

info-design-lab / DE705-Interactive-Data-Visualization

Documentation of the IDC M.Des course Interactive Data Visualization, 3-20 Sep 2019
2 stars 0 forks source link

Data Visualization Tools (2022) #10

Open venkatrajam opened 2 years ago

venkatrajam commented 2 years ago

In this assignment each of you will select a dataviz tool, explore it as thoroughly as you can (download, install, try out, and use it to create something), and do a demonstration/overview of the tool to the rest of the class (15-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 Monday onwards. Abhinav 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. Tableau Public -- A free platform to explore, create and publicly share data visualizations online.
  5. Voyant Tools -- A web-based reading and analysis environment for digital texts.
  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. Mapbox -- Powerful geo visualization tool for custom maps
  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.

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, 2021).

Bishal2288 commented 2 years ago

Bishal Goswami 214134002 PhD, IDC, Batch: Spring 2021

image

Introduction:

Getting started:

Features:

What are map tiles?

Exploration using Leaflet:

Simple exercise: Marking the park locations in Sanjaynagar, Bengaluru

image

Sublime Text download link: https://www.sublimetext.com/3 image

MapTiler Cloud is one of the Leaflet-providers. MapTiler YouTube tutorial for Leaflet: https://www.youtube.com/watch?v=wVnimcQsuwk&list=PLGHe6Moaz52PUNP4DtIshALDogSURIlYB

image image image image image

HTML link: leaflet_assignment1.html

Possibilities with Leaflet: Few examples:

Pros:

Cons:

References:

aliviachaudhuri commented 2 years ago

Alivia Chaudhuri M.Des Sr yr, 216330017

Tool: Datawrapper logo

Link to the presentation

What is Datawrapper? Datawrapper is a user-friendly, open-source, free web tool that you can use to create basic interactive charts. This tool has been created in Germany by a team of 14 people who have previously worked as journalists. It has been licensed under the MIT license.

Quick overview

You can do 3 types of visualizations using Datawrapper:

types of viz Under charts, there are 19 types - simple bar charts, line charts, column charts to arrow charts, area charts, scatterplots, donut charts. Maps are of 3 types- choropleth maps, symbol maps, and locator maps Tables with embedded mini line charts, bar charts, images, markdown

How do you get data into it?

How do you get data out of it? Embed your visualization in HTML code or download your visualizations (.png)

Privacy concern- Once you upload your data, you are placing it on Datawrapper's free hosting service so your data will be accessible to the internet. If you want to use this tool and have sensitive information, then to keep your data safe, it is advisable to install a paid version.

Datawrapper River - We can view previously made charts and adopt them for our own projects (The River). The River is a good discovery tool for people who may have done similar visualizations. datariver

Features at a glance

Here are some of the examples we saw in class:

https://datawrapper.dwcdn.net/yx7mD/2/ yx7mD-richer-the-country-more-the-life-expectancy

ex1 qR0jJ-state-wise-amount-released-as-central-financial-assistance-in-2021-22 bYayR-most-visited-art-museum

Student Discount The DataWrapper free plan offers PNG export, but this might not be enough for us sometimes. They offer PDF and SVG export for students at schools. Get in touch with support@datawrapper.de to set this up

Pros

Cons

Resources that helped me: https://visualisingadvocacy.org/node/673.html https://www.youtube.com/channel/UCGRdsZb9YD3GW35G27g0o0g https://www.gapminder.org/ https://data.gov.in/

shweta-ratanpura commented 2 years ago

Mapbox Studio

Shweta Ratanpura 216330016 M.Des

Highlights

How it works

Mapbox Studio provides tools for converting your data to tilesets and creating styles. It also includes a dataset editor, which you can use to create and edit data before converting to a tileset. Once you create a style, you can display your map using Mapbox GL JS or through Mobile SDKs

Screenshot 2022-08-12 at 1 27 21 PM

3 main tabs of the Mapbox Studio

Steps to create your own Data Viz

1. Upload data as a Dataset

Screenshot 2022-08-12 at 1 33 43 PM

2. Draw & edit data in the Dataset tab

Screenshot 2022-08-12 at 1 34 01 PM

3. Create a Tileset by exporting the Dataset

Screenshot 2022-08-12 at 1 34 16 PM

4. Choose a template style in the Styles tab

Screenshot 2022-08-12 at 1 34 31 PM

5. Modify style properties in the Styles editor

Screenshot 2022-08-12 at 1 34 42 PM

6. Add your layer containing your Tileset in the Styles editor

Screenshot 2022-08-12 at 1 34 58 PM

7. Style your layer in the Styles editor

Screenshot 2022-08-12 at 1 35 14 PM

8. Publish style in the Styles editor

Screenshot 2022-08-12 at 1 35 33 PM

Possibilities using Mapbox Studio

Slide 16_9 - 4

Futher examples

Link here

Pros of using Mapbox Studio

Cons of using Mapbox Studio

Tejaswinipundge commented 2 years ago

Tejaswini Pundge | 216330012 | Interactive Data Visualization | Assignment 3 Tool chosen - Rawgraphs RAWGraphs_Logo svg ddddd

Link to presentation

Introduction

RAWGraphs is an open source data visualization framework built with the goal of making the visual representation of complex data easy for everyone. RAWgraphs facilitate you to upload/paste data and customize it to create nice graphs. RAWgraPh is basically an open source web based data visualization tool to create non-interactive graphs and charts easily. The tool is extremely useful when you are aware of what kind of graph will be suitable for the particular information and you want to create aesthetic data visualizations quickly. A person needs good knowledge of charts and graphs to use this tool.

Untitled qewfSD

Using RAWgraphs is very easy. Below are the few steps to follow : Step1: Paste/Upload your data set Step2: Select the type of chart you want to use Step3: Mapping of the data on according to axis, size and color parameter Step4: Customize the data visualization Step5: Export the file (.svg, .png, .jpeg, .rawgraphs )

UntitledAFFFEWF

Following are the input options for your data set.

  1. Copy and paste data,
  2. Upload .XLS,
  3. Try out data samples
  4. From URL

UntitledDWDQQD

Following are the type of graphs you can choose from :

  1. Correlations
  2. Proportions
  3. Networks
  4. Distributions
  5. Time series
  6. Time Chunks
  7. Hierarchies

UntitledEFWEFWF

Following are the Mapping parameters :

  1. X axis
  2. Y axis
  3. Size
  4. Ranking
  5. Series
  6. Color
  7. Labels
  8. Hierarchy
  9. Arcs

UntitledBTEEBEB

Following are the customization parameters :

  1. Artboard
  2. Chart
  3. Series
  4. Colors
  5. Labels

UntitledKHUJ

Output: 1 .svg 2 .png 3 .jpeg 4 .rawgraphs

Some important points: 1.There are a bunch of Learning Resources available on the website itself. 2.Raw Graph has a Gallery of work done by the community with excellent examples. You can also publish your work there.

  1. Creating interactive elements is not facilitated by the platform
ApoorvAnurag commented 2 years ago

Apoorv Anurag 216330001 IxD M.Des. 2nd Year

Tool: Circos

Mask Group (1)

Circos is a software package for visualizing data and information. It visualizes data in a circular layout, making Circos ideal for exploring relationships between objects or positions. Circos is ideal for creating publication-quality infographics and illustrations with a high data-to-ink ratio, richly layered data, and pleasant symmetries. You have fine control of each element in the figure to tailor its focus points and detail to your audience.

It was developed by Martin Krzywinski, a genetic scientist and a data viz. enthusiast, in the mid-2000s. He originally conceived it for visualizing genomic data such as alignments and structural variation. He was successful in his attempt as, till now, Circos has been used in over 500 scientific research papers and many of the top science journals.

image

Types of Circos-

Frame 79 (1)

Using Circos

There are two ways of using Circos-

  1. Method 1: Installing the Circos file on the computer and then using - it requires coding
  2. Method 2: Through the online tool- Circos Table Viewer

Method 1

You must install Strawberry Perl on your computer from this link on the website. It is compatible with Windows, Mac OS X, Linux, and UNIX. Then you have to download and install Circos current and tutorial current files from this link on the Circos website.

I found a helpful youtube tutorial that can help you for installing the tool. Link.

The installation also requires a terminal like Command prompt and Visual Studio Code (or VS Code) to make the visualization. You can input the values and customize the chart's attributes through Visual Studio Code. Through Command Prompt, you run the code created in VS Studio to get your desired output as SVG or PNG file.

Pain Points:

  1. Pretty hard to install and use the software for a novice user
  2. Very complex instructions provided on the website for using the tool
  3. Not much info or tutorial on open web

Method 2 - Circos Table Viewer

This online tool is provided on the same website, which makes creating Circos visualizations easier. The website looks something like this- image

We just have to create a Tabular Separated Value (TSV) file of our data. Upload it on the website here- image

And hit 'Visualize Table'!

After a few seconds, another webpage loads, which creates the circos chart.

Example: Frame 86 (1) I have used this data to visualize circos chart.

I wrote tabular separated values inside notepad and saved it as a txt file. image

Then I uploaded it to the website. I got the following visualization.

image

I can go into the settings tab from here to edit some attributes. It has a lot of simple customization options available, which are enough for a novice user. The bad part is you will have to upload the file again and wait for the page to load every time.

The settings page looks something like this- ezgif com-gif-maker (22)

After visualizing the chart, you can download it as png or SVG from the option provided just above the generated chart on the website. image

The final output that we got -

circos-table-sonfnhz-large

Negatives of this tool:

  1. This online tool provides lesser customizing options compared to the previous one
  2. Maximum row + column total is 100 — if exceeded, rows and columns are limited to 50

Positives: Much easier than Method 1.

P.S.- This was just a simple data sample I took for demo purposes and easy understanding. One can make visualization with much more complex data also.

image

Reference Links:

  1. Circos Website
  2. Downloading files
  3. Table Viewer site
  4. Installation Youtube turorial
  5. Some basics for Method 1

Presentation Slides

Press 'F' to make it fullscreen :)

Abhinavbansal20 commented 2 years ago

Observable

Name: Abhinav Bansal 216330003, M.Des

Presentation Link:

Tool: Observable

About Observable: It is a Data Visualization Tool that is completely web-based. You do not need an IDE to work on this tool, nor do you need to install any external software. It works through several libraries of Javascript (Vega-Lite, D3, P5 etc.). Overall, a very powerful tool to customize the visualizations. Beginners can also explore the community to find suitable visualizations; find and change its data set and create their own Visualizations.

Some Basics:

Syntax: With every language, it is important to understand the syntax. This is also the case with Observable. One needs to understand the encoding format, and the basic syntax before they can start editing/ writing their codes for visualizations.

Getting Started

While getting started, the user needs to understand 'Cells', Input Language, and the basic functions available in the interface. Cell Cell 2

Cell: A strip which runs independently in the overall workflow. It has two fields- input field and the output field. Always define call with a unique variable (eg. A, B, myCell, myCell2 etc.)

Pin: Pin is used to 'pin' the input field of a cell. The input field contains the code which one writes. The output field shows the out of the code which has been input.

Run Button: Clicking on the run button (far right of a strip), will run the code that has been input. Any error is highlighted.

Input Options: There are 3 types of input options- Javascript, Markdown and HTML.

Features: These are located on the right side of the screen. These include Attaching Files, Viewing History, Sharing, Forking, Search, Publish

Example 1: Understanding the Basics

Here, variables a,b and total are defined and given a numeric value. These are written in separate cells altogether. Example 1

Example 2: Addition

Here, a function called Addition has been defined. Syntax to note:

Example 2

Example 3: Using Vega-Lite Library (link)

  1. Access the Vega Lite Library
  2. Import the api as per the syntax (import {vl} from '@vega/vega-lite-api-v5')
  3. Import the Data from Data-Set Library (or attach a file from your system)
  4. Encode Data (vl.markPoint( ).data( ).encode( ).render( ))

This is how it looks after importing api and data-sets Imports

Verifying the Data-Set using printTable(data.slice(0,rows));

This command is used to verify whether the Data Set you added is loaded. Further, the attributes are also checked using this function. VL

Example 4: Modifying Data using Curated Data Sets

Here, we need to understand the syntax effectively. Every syntax follows the same pattern: vl.markPoint(or markBar, markLine) .data(name-of-data-set) .encode(define the code here) .render( )

Example 4

example 5

Example 5: Interactive Scatter Plot

Here, we use the feature called tooltip example 6

Example 6: Advanced Visualizations

On Exploring the community, very high level visualizations can be found. Although, one can also code these complex visualizations from scratch, one needs to be very efficient with coding to be able to do so. Hence, an easy way is to find these in the community, fork them, and edit their data. (After understanding the kind of data it wants!). Below are the links to some visualizations I created by exploring the community and slightly modifying the datasets.

Text Analysis:

Original Edited

image

Sankey Diagram:

Original Edited : I made a visualization mapping Virat Kohli's type of dismissals against the various oppositions he has played against.

image

Overall: Pros

Overall: Cons

Some Useful Links (Note: These were added and working as on Aug 13, 2022)

rubayatahmed commented 2 years ago

Rubayat Ahmed 216330013 M.Des 2nd Year (Interaction Design)

Tool chosen : p5.js p5.js Official Documentation : https://p5js.org/ Presentation Link : presentation.pdf

Introduction : p5.js is a JavaScript library for creative coding. The term creative coding refers to graphical approach of coding, where a beginner can learn programming with graphical output and shape their ideas on their own. It is a powerful tool for artists, designers and programmers with a gentle learning curve that’s easily achievable. The only limit to what one can create with p5.js is your imagination. It is an open-source library developed in 2014 and derived from Processing – a flexible software sketchbook specifically aimed at teaching the novice how to use code to create visual artwork. Till that point it has grown as a medium of expressing creativity through programming.

Key usage of p5.js : The capability and range of functions that p5.js provides is huge, largely they can be grouped as...

  1. Interactive Data Visualization
  2. Instructional Design
  3. Big Data Visualization
  4. Animation
  5. Small Interactive game
  6. Data manipulation
  7. 2D/3D simulation and many more...

Some Examples are :

Prerequisite : Being a completely coding based tool, a good understanding of algorithm/programing with some experience of HTML/CSS/JavaScript will be needed. JavaScript is preferred as the library is build on top of it.

Code Editor : To create real websites using p5.js one can use any standard code editor like VS Code, Sublime text, Notepad ++ etc. But for learning and exploration purpose there is an online code editor available on the official website, where one can write the p5.js JavaScript code and run it in one go to see the instant graphical output. This can't be exported anywhere, but can be copied to your project file easily.

The online code editor as shown in below has two main panels, left panel is where we write the JS codes, and on the right hand side we see the output in a canvas. Menu bar at the top gives you option to save and open new files. To run a code one need to click on the play button, but auto-refresh could be enabled so that you don't need to refresh each time you edit a piece of code.

Screenshot (151)

Syntax : The syntax to write a p5.js code is same as writing any JavaScript code. Where functions are the main component that executes code written inside them.

In the case of p5.js, there are two main predefined functions that are sufficient to write most of the programs. Which are :

  1. setup(): It executes once when the program begins. createCanvas must be the first statement, which create the empty area for you to draw your content. In the screenshot below, the parameter you see inside the parenthesis are the height and width of the canvas.
  2. draw() : It is the function where you write your code that will be displayed in the canvas. The statements in the draw() function are executed in sequence.

Screenshot (145)

SO WHAT CAN YOU DO WITH P5.JS? HOW? p5.js has a wide range of functions and extended libraries spread across all the verticals of graphic elements that gives it enormous capability to create anything from scratch. There are function for 3D, Color, Data, Environment, Events, Foundation, IO, Image, Math, Rendering, Shape, Structure, Transform, Typography and much more. Using the base library developers also developed specific extended libraries that covers specific areas like sound, graph, live media, machine learning and so on. By going through the documentations and examples of the above mentioned topics anyone can create a p5.js project.

Let's write a simple code to draw a circle in the center of the canvas.

Screenshot (158)

There are three parameters inside the circle function which decides the location and size of the circle in the canvas. Here in this example the x and y coordinates of the center of the circle are equal to half of height and weight of the canvas, basically means the center location of the canvas. The third parameter is of radius which is given 200 in this example. Thus one can draw ant graphical objects in the canvas using its properties.

BIG DATA VISUALIZATION?

p5.js is not suitable for big data visualization, as it is purely code based. One need to write code from scratch to do anything in p5.js, on the other hand there are more efficient tools like D3(https://d3js.org/) javascript library to do the job. Still because of the flexibility of p5.js in terms of creating whatever you want gives you freedom to create some unique data visualization.

PROS

DRAWBACKS

Thanks! Rubayat Ahmed

ghost commented 2 years ago

Mithun Murali Mdes 216330008

Tool: Tableau Public Presentation: TableauPublic_Aug_2022.pdf

Tableau Public is a free platform to explore, create, and publicly share data visualizations. Tableau Public is a free edition of the Desktop product. With this edition, data can only be published to the Tableau public website and does not allow work to be saved or exported locally. It connects to various data sources for combining disparate data sources without coding. It provides tools for discovering patterns and insights, data calculations, forecasts, statistical summaries, and visual storytelling. Tableau Server allows Tableau Desktop users to publish dashboards to a central server to be shared across their organizations. The product is designed to facilitate collaboration across the organization. It can be deployed on a server in the data center, or it can be deployed on a public cloud. The most common users of Tableau Public are Enterprises, freelancers, and students.

Tableau offers different types of products for different industries: Screenshot 2022-08-28 161620

Installation option for Tableau Public: Screenshot 2022-08-28 161632

The landing screen of Tableau Public: Screenshot 2022-08-28 161646

This is a simple data viz created from a spreadsheet data: Screenshot 2022-08-28 161721

Here is a sample dashboard created in Tableau Public. This dashboard is in its raw form; no visual customization has yet been done. Screenshot 2022-08-28 161708

Pros & Cons Screenshot 2022-08-28 161604

(Please go through the presentation for more details)

ankitgit-hub commented 2 years ago

Voyant tools

Ankit Anand

M.Des 216330007

Tool: Voyant Tools

image

What is Voyant Tools?

Voyant Tools is an open-source, web-based tool used for the analysis of textual data. It is primarily used for statistical analysis, and data mining of scholarly texts to gain a deeper understanding through pattern recognition, word frequency, frequency distribution plots, and analyzing words in context.

How to do text analysis with Voyant Tools?

This chart shows some of the American president's vocabulary by Grade Level. Donald trump scores the lowest with a 4.6 grade.

image

image

I wanted to verify if this was indeed the case by analyzing Trump’s entire tweet archive. I downloaded all the tweets sent from Trump’s account from 2009 to 2021 and converted them into .txt format.

On the homepage, you will see a textbox that prompts users to type, open, or upload text files.

image

After the tweets are uploaded, Voyant tools show this dashboard with the default visualizations. These visualizations can be further customized to filter the results (ex - to exclude certain words from the analysis)

image

This is a Terms counter which gives an absolute count of the no of times a word has been used in a document. Here we can see that the most used words for Trump are often overused words like “great”, “president”, “thank”, and “just”. The second most used by trump is “Trump” which is not surprising.

image

This Cirrus tool shows the same data in a fun visualization.

image

Visualization types

Voyant tools offer an extensive range of visualization options. Some of them are shown below:

Cirrus - It is a word cloud that visualizes the top-frequency words of a corpus or document. image

Terms counter - It gives an absolute count of the no of times a word has been used in a document. image

Terms berry - The TermsBerry tool provides a way of exploring high-frequency terms and their collocates (words that occur in proximity). image

Trends - Trends show a line graph depicting the distribution of a word’s occurrence across a corpus or document. image

Knots - Knots is a creative visualization that represents terms in a single document as a series of twisted lines. image

Examples

Voyant tools maintain a list of open-source analyses done by researchers from various fields. These examples are great when looking for inspiration on what kinds of analysis are possible. https://voyant-tools.org/docs/#!/guide/gallery

Pros

Cons

Resources

https://library.villanova.edu/application/files/9815/8739/5480/VoyantToolsParadiseLostTutorial.pdf An in-depth guide to Voyant Tools created by Villanova University.

zuhaasif commented 2 years ago

Tangle

Zuha Asif P M.Des. Interaction Design 216330014

Slide

Data Visualisation Tool: Tangle

What is Tangle? It is a JavaScript library for creating reactive documents. It was released by Bret Victor / March 10, 2011 for creating an explorable Document - Ten Brighter Ideas

How to get started with tangle?

Example of what a reactive document 4

In the above example, if you click and drag 3 cookies, you can see the calories also changing accordingly. For this you simple reaction tangle gives you a JavaScript library which includes different classes with sub functions which can be utilised to build interesting reactions. Here the scroll is defined by a class named "TKAdustableNumber" and the value of calories are stored by a variable named "calories". The function has to be defined and updated in the Javascript.(How calories are calculated)

HTML attributes includes:

Advantages of Tangle

To Being with 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

JaanhaviSP commented 2 years ago

Tool :Timeline JS

The tool uses a spreadsheet template from Google Sheets to create a media rich timeline that can be used to show

It was created by Northwestern University Knight Lab, a community of designers, developers, students, and educators working on experiments designed to push journalism into new spaces.

Few of their other creations:

This tool helps us in making an engaging and interactive timeline for the internet. It can be viewed by Embedded into websites or shared online

This is how the timeline will look: 11

You can zoom in and zoom out of the timeline 12

You can hover over the various points in the timeline and you’ll be directed there 13

Requirements to create timeline in Timeline JS: -A Google Account and login -A copy of the Google Sheets template used to create TimelineJS events -Links to images, videos, and other media accessed through the internet

Link to the website - https://timeline.knightlab.com/

1.Go to their website and click “make a timeline” 1

2.It will take you down the website to this part where you will have to click “Get the spreadsheet template” and a google sheet template will open 2

3.This is the template where you’ll have to fill the data of your timeline. One will have to the a. Time b. Headline c. Sub-text d. Link of the media that you want to be displayed - TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more e. Media captions f. Background colour 3

An example of the spread sheet with filled details 4

4.Once you fill all the details, you’ll have to publish the document to web. File < Share < publish to web < publish. Copy the URL in your browser’s bar. You’ll use this in the next step. 5 6

7

5.After you copy, go to the website and Paste the URL here 8

6.Once you paste you can either copy the link and share or copy the embedded code and paste in the coding of the website where you want this timeline to be displayed 9

One can use some of the HTML codes to enhance the timeline •To add website link Text you want to turn into a link ... •Italics Lorem ipsum ... •Bold Loreum ipsum ... •Paragraphs Lorem ipsum ...
Lorem ipsum ...

Here are few good examples of timelines created •https://timeline.knightlab.com/examples/user-interface/index.html •https://vinepair.com/wine-colonized-world-wine-history/#0

Limitations •TimelineJS uses the modern Western calendar, any other systems need to be converted to be usable. •Timelines can only be viewed left to right; stories can only be told in one direction. •Images has to be uploaded online

amitkumarram95 commented 2 years ago

Plotly-logo

Tool : Plotly

What is Plotly? Plotly provides online graphing, analytics, and statistics tools for individuals and collaboration, as well as scientific graphing libraries for Python, R, MATLAB, Perl, Julia, Arduino, and REST.

Which coding softwares can I use Plotly with? Plotly can be used as a library with a variety of coding languages, so that a user can fulfil their data visualization, graphing and analytics needs without the need to learn new coding languages. plotly and coding softwares

Link to all Plotly integrations Link if you want to use Plotly with JavaScript Link if you want to use plotly with Python

Overview of Plotly with Python In this example, I am using Plotly with Python. I am using Jupyter Notebook, which is an industry standard IDE for coding, analyzing and visualizing data simultaneously. I am running Jupyter Notebook within the Anaconda environment, which makes things much easier if you are using a Windows system.

So the steps would be as follows -

  1. Download Anaconda from their website. There are options to download the right version of Anaconda depending on the OS you are using (Windows or Mac or Linux etc.)

  2. Launch Anaconda Navigator and you will be able to see different IDEs, softwares etc. which are all a part of this environment, as the image shown below. Anaconda Navigator

  3. Alternatively you can find the instructions to install Jupyter Notebook directly from their website. However, doing this through Anaconda is more convenient and hassle-free. Here is a very helpful guide for installing Jupyter Notebook on Windows.. This link also contains a video walkthrough of the whole process.

Why should I use Plotly with Python?

  1. The plotly Python library is interactive and open-source
  2. It supports over 40 unique chart types covering a wide range of statistical, financial, geographic, scientific, and 3-dimensional use-cases.
  3. Plotly enables Python users to create beautiful interactive web-based visualizations that can be displayed in Jupyter notebooks, saved to standalone HTML files, or served as part of pure Python-built web applications using Dash.
  4. Python has a large developer community, which means that there is a lot of support available online to help you debug any errors or find solutions to any issues. Developers also create further plug-ins or libraries that are usually open-source and add onto existing data analysis and visualization capabilities.
  5. There are many tutorials, video walkthroughs etc. available online to help new users get started.

Here is how you can get started with using Plotly Python library.

What kind of visualizations can I create using Plotly's Python library? This list is huge, and contains everything from basic charts to maps, 3D projections etc. You can go through every use-case in detail by following this link.

Python plotly 6

Python plotly 7

Python plotly 1

Python plotly 2

Python plotly 3

Python plotly 4

Python plotly 5

Now, the exciting thing is that - clicking on any of these visualization types takes you to a page with sample codes and the resulting visualizations. Example, clicking on 3D Scatter plot from the above list takes you to a page that looks like this - Screenshot (401)

My short tutorial on this subject :

  1. To start with let's launch Jupyter Notebook. The interface launches on the browser and looks something like this. Jupyter 1

  2. Click on the project you want to open. Rest of the steps require some basic knowledge of Python coding. Jupyter 2

Here are some resources that can help you get started with Python - Datacamp, w3schools, Codeacademy.

  1. Import the necessary libraries. The libraries we require are pandas, numpy, Plotly, and Cufflinks.

Cufflinks is also a python library that connects plotly with pandas so that we can create charts directly on data frames. It basically acts as a plugin. Pandas is a Python library used for data manipulation and analysis. In particular, it offers data structures and operations for manipulating numerical tables and time series. NumPy is a Python library, adding support for large, multi-dimensional arrays and matrices, along with a large collection of high-level mathematical functions to operate on these arrays.

  1. Then copy paste the code for any kind of visualization you want to create, from the plotly site mentioned above.

For the first exploration, I am using a publicly available dataset that essentially contains information about different countries such as total population, GDP per capita and Life expectancy. It is interesting to see how these parameters vary from country to country, and whether population has any effect on life expectancy and GDP per capita.

0

The first graph shows the relation between life expectancy and GDP per capita through a scatter plot. The dot sizes are reflective of the country's population. It seems that higher the GDP per capita, higher the life expectancy.

1

Checking if there is any similar trend that can be noticed when we consider population and life expectancy. It seems there is not much correlation between the two. 2 3

Next, drawing a trend line to check how life expectancy increases when GDP per capita increases. The graph seems to be comparable to a Logarithmic graph. 4

Changing the properties of the graph, such as line opacity, background color, line color etc. All these different elements of any visualization can be customized by making slight modifications to the code.

5

Adding one graph on top of another : 6

Having fun by playing around with 3D visualizations created using the famous Iris dataset. 7 8

Apart from these, the visualizations are themselves interactive. Users can pan around the visualization, zoom, select a particular section using lasso tool, rotate the graphs and also download the graphs as PNG.

I have uploaded my code as a notebook file (.ipynb), as well as a Python file (.py) in [this link](). Please feel free to go through the code if required.

Finally, ending with some Cons of Plotly

So that's all !! Thanks !!

Amit Kumar Ram Roll No. 216330005

shivanginegii commented 2 years ago

Tool : Open Refine

PPT link: https://docs.google.com/presentation/d/1rWaccRKhK4iT-1X6fyYnW6U-LK089m2SsMkDzXMnuuw/edit?usp=sharing

What is Open Refine? OpenRefine is a powerful tool for working with messy data. Data Analysis Tool: data cleaning, editing data, analysing data, transforming, organising the data It is not designed to replace other tools, but to complement them.

  1. Download the platform from - https://openrefine.org/download.html
  2. Download plugins from - https://docs.openrefine.org/manual/jythonclojure
  3. Resource link - https://www.youtube.com/watch?v=yTJ6x6zEQmI http://davidhuynh.net/spaces/nicar2011/tutorial.pdf

Slide1 Slide2 Slide3 Slide4 Slide5 Slide6 Slide7 Slide8 Slide9 Slide10 Slide11 Slide12

Shivangi Negi Roll No. 216330018

IndubhusanRoy commented 2 years ago

Name: Indubhusan Roy Tool: Google Data Studio Roll no: 216330002

What is Google Data Studio?

https://datastudio.google.com/

Google Data Studio is an online tool for converting data into customizable informative reports and dashboards introduced by Google on March 15, 2016 as part of the enterprise Google Analytics 360 suite. This is a tool which is used by many companies for business analytics. Apart from functioning as a data visualization tool 'GDS' also functions with the help of connectors which provide live data which tracks user behavior. This mechanism is very useful for businesses to keep a track of their performance

Slide 16_9 - 1

What Google data studio basically does is. Connectors are an important aspect of Google data studio

Slide 16_9 - 2

Google like to advertise it in this way Slide 16_9 - 11

What it Promises to the users Slide 16_9 - 12

Google provides simple tutorials for users to make use of Data Studio

Tutorial

As mentioned earlier the primary user group is niche

Slide 16_9 - 10

The following slides demonstrates the interface.

Slide 16_9 - 8 Slide 16_9 - 9

Various Sample reports are available for users to edit and make it their own

Sample report 1

Data Studio provides various visual styles that can be used. Some of the samples provided can also be used to add personal data World data

Now Taking an example of a sales data set Sample sales data

This data set can be used to set several variables like regions of sale or date ranges or even sales of particular products over a period of time

Sample practice

Date range

Changing the variables leading to different reports which can be used to check performance across variables

Practice 2

Pros and Cons

Slide 16_9 - 6

Slide 16_9 - 7

Thank You.

Anngarime commented 1 year ago

Annapurna Garimella

dsanika commented 1 year ago

Name: Sanika Deshpande Tool: Gephi - Makes graphs handy Roll no: 216330011

Download Gephi Learn How to Use Gephi

What is Gephi?

  1. A open source tool for link an network data analysis and visualization.
  2. Its a tool to help data analysts make hypothesis, intuitively discover patterns, isolate structure singularities or faults during data sourcing.
  3. It deals with networks and complex systems which include dynamic and hierarchical graphs
  4. Gephi lets users interact with the representational network- they can manipulate the structure, size and colours of the network to reveal hidden properties
  5. It is a complementary tool to traditional statistics, as visual thinking with interactive interfaces is now recognized to facilitate reasoning.

Examples Right Picture-1 Right Picture

Features Explored Features Guide

  1. Importing the File
  2. Layout the graph
  3. Adjusting the layout
  4. Ranking (Adjusting color)
  5. Metrics
  6. Ranking (Size)
  7. Show Labels
  8. Filter
  9. Partition
  10. Exporting the File

Pros

  1. It makes large network understanding easier
  2. Anamoly identification becomes easier
  3. Gephi was able to handle large datasets. Networks up to 100,000 nodes and 1,000,000 edges
  4. Layout options were really effective and a great way to visualize the dataset to get more insights
  5. Plugins as options to expand the capability of the software

Cons

  1. If the network is too complex it becomes difficult to identify at times
  2. The graph is not dynamic
  3. Limited more towards Graph/network visualization
  4. The interface is not as intuitive. The user needs to spend time and get used to the interface and operations.