info-design-lab / de705-interactive-data-visualization Goto Github PK

Decline of States' Share in Taxes | Meghana

For this assignment, we'll use data stories from The Hindu Data Point.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

• What is the story the author is trying to tell?
• What the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
• How is it encoded, problems with it and how you attempted to improve it.

You may choose to expand or curtail the scope of the data used in the story, or add an additional dataset to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you tell a different, unrelated story.

While you should provide a link to the original story, it might be useful to capture and display inline, appropriate parts of the original visualization, and your own design iterations to produce a coherent documentation.

For reference, take a look at what the previous batches (2019, 2020, 2021) did with this assignment.

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

For this assignment, we'll use data stories from The Hindu Data Point. Use what you have learned in Week 4 & Week 5 for doing this assignment.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

• What is the story the author is trying to tell?
• What the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
• How is it encoded, problems with it and how you attempted to improve it.

You may choose to expand or curtail the scope of the data used in the story, or add an additional dataset to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you tell a different, unrelated story.

While you should provide a link to the original story, it might be useful to capture and display inline, appropriate parts of the original visualization, and your own design iterations to produce a coherent documentation.

For reference, take a look at what the previous batches (2019, 2020, 2021, 2022) did with this assignment.

For this assignment, we'll use data stories from The Hindu Data Point.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

1. What is the story the author is trying to tell?
2. What the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
3. How is it encoded, probelms with it and how you attempted to improve it.

You may choose to expand or curtail the scope of the data used in the story, or add an additional dataset to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you tell a different, unrelated story.

While you should provide a link to the original story, it might be useful to capture and display inline, appropriate parts of the original visualization, and your own design iterations to produce a coherent documentation.

For the first assignment, find a simple, stand-alone, static visualization and write a short critique on: How effective is it at what it aims to do? What works well and what doesn't? What could be better?

You comment should contain:

• Title of the example with one image (add url reference if it is online)
• Short critique (could be in paragraphs or bullet points)

You can edit or update your comment anytime after you post, but do not make multiple comments. If your github username is not your actual name, include it in the comment/comment title.

For this assignment, we'll use data stories from The Hindu Data Point.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

What is the story the author is trying to tell?
What the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
How is it encoded, problems with it and how you attempted to improve it.
You may choose to expand or curtail the scope of the data used in the story, or add an additional dataset to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you tell a different, unrelated story.

While you should provide a link to the original story, it might be useful to capture and display inline, appropriate parts of the original visualization, and your own design iterations to produce a coherent documentation.

For reference, take a look at what the previous batches (2019, 2020) did with this assignment.

For the graded assignment 1, find a simple, stand-alone, static visualization and write a short critique on: How effective is it at what it aims to do? What works well and what doesn't? What could be better? (See Week 1, Part 7 lecture video for a briefing of the assignment)

Make your submission as a comment. It should contain:

• Title of the example with one image (add url reference if it is online)
• Short critique (could be in paragraphs or bullet points)
• You can edit or update your comment up until the submission deadline, but do not make multiple comments. If your github username is not your actual name, include it in the comment/comment title.

Here are samples (sample 1, sample 2) of how this is to be submitted. Use an examples that are not used in the samples.

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. Advait will coordinate and 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. The Jayalalitha Disproportionate Assets Case by one of my students was done using Timeline.js.
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 batch did with this assignment.

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

For this assignment, we'll use data stories from The Hindu Data Point.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

What is the story the author is trying to tell?
What the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
How is it encoded, problems with it and how you attempted to improve it.
You may choose to expand or curtail the scope of the data used in the story, or add an additional dataset to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you tell a different, unrelated story.

While you should provide a link to the original story, it might be useful to capture and display inline, appropriate parts of the original visualization, and your own design iterations to produce a coherent documentation.

For reference, take a look at what the previous batch did with this assignment.

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.
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.
In your comments include links to the resources you used (if any) in your presentations, capturing your personal insights about the tool, and a carefully curated set of 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. The Jayalalitha Disproportionate Assets Case by one of my students was done using Timeline.js.
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.

For this assignment, we'll use data stories from The Hindu Data Point.

Select a story that you like, study it carefully and redesign it. Specifically I want you to focus on understanding the data that powers the story, and how it is visually encoded to tell the intended story. Document your design process, capturing the following:

• What is the story the author is trying to tell?
• What is the data he/she is using to tell the story? Describe its details -- type of data, extent of the data, dimensions of the data, gaps in the data, what data is essential and what is irrelevant.
• How is it encoded, problems with it and how you attempted to improve it.
• You may choose to expand or curtail the scope of the data used in the story, or add new data to tell the story better. But do not deviate from the main intent of the original story. In other words, it is a redesign exercise, and hence I do not want you to tell a different, unrelated story.

Provide a link to the original story, capture and display inline, the appropriate parts of the original visualization with annotations, and your own design iterations to produce a coherent documentation, leading up to the final outcome.

Post your submission as a comment in this issue. Use one comment per student and edit it to update progress.

For reference, take a look at what four batches of IDC students (2019, 2020, 2021, 2022) did with this assignment.

For the first assignment, find a simple, stand-alone, static visualization and write a short critique on: How effective is it at what it aims to do? What works well and what doesn't? What could be better?

You comment should contain:

• Title of the example with one image (add url reference if it is online)
• Short critique (could be in paragraphs or bullet points)

You can edit or update your comment anytime after you post, but do not make multiple comments. If your github username is not your actual name, include it in the comment title.

The data and design brief for the next assignment is here.

For the graded assignment 2, pick your hometown or a city you are familiar with, and create a schematic map. You can find the [slides from our class here].

The audience can be tourists (general, or specific type of attractions like pilgrimage, lakes etc.), or a specific use case (such as cycling, educational institutes etc.).

You can follow the following steps for your schematic map:

1. Scale, Audience & Purpose
2. Mental model sketch
3. Tracing relevant aspects from OSM
4. Abstraction: Grids & geometric shapes
5. Simplification Vs Minimal
6. Elements of the city
7. Visual hierarchy
8. Details: Icons, Typography, Legend, Context

You can see some of the previous schematic map exercises for reference.