Chart Deconstruction & Redesign (2025)

[venkatrajam]

Assignment 2: Chart Deconstruction & Redesign

Choose a simple chart and deconstruct it. Deconstructing a chart amounts to a deeper version of the self-sufficiency test. It helps us understand what parts of the chart are doing what, and what cues certain parts send to readers. In better dataviz, every part of the chart is doing something useful, it's free of redundant parts that take up cognitive processing time for no reason, and the cues to readers move them towards the intended message, not away from it.

Analyse:

• If the visual structure maps to the data structure.
• If the arrangement of graphical elements exploits conventional wisdom of how we read, interpret & make meaning.
• If the range/scale of data is appropriately selected, units are represented accurately, and the chosen axis are suitable.
• If annotations (text labels, numbers, explanatory text, and legend) are purposeful.
• If the chart contains visual aids​ (grid lines, orientation, fonts, font size, zoom level etc.) to improve legibility.

Redesign:

• Fix the above problems and create a better version of the chart.
• For the purpose of this exercise, we'll not change the chart type or the data it represents.
• The redesign is only about rearranging the graphical elements. You may change visual properties of graphical elements such as type, texture, position, shape, size, orientation, colours; or axis, units, range, labels, explanatory text, grids, and legend; but not the chart type.
• Choose a chart that you fully understand and is simple enough that you can redraw with the tools you know & skill level you have.

Post your submission as a comment with your name & roll number included.

[ranjabatis]

Source

Deconstructing the chart

Chart Archetype : Parliamentary (semicircular) diagram, commonly shows the distribution of seats in a legislative body like a Parliament, with each dot or segment representing a single elected official or a unit of representation. This type of diagram takes a semicircular or semi-donut shape to mimic the hemicycle (semicircular arrangement) of actual parliamentary chambers.

The chart is part of an article on The Hindu, published June 9, 2014. It is trying to show that significant percentage of MPs in the current Lok Sabha are from politically connected families.

Issues

1. Critical data is not visualized
   Total Lok Sabha size (543 seats) is absent, leaving "130" without proper scale. While dots represent all 543 parliamentary seats, there is not visual encoding to distinguish the 130 dynastic members within the semicircle. Readers must mentally cross-reference numbers above the arc with colored segments below.

2. Hierarchy

• Dynastic counts float in a semicircular arc above the diagram while party totals appear in the bottom legend, forcing readers to scan vertically between unrelated information layers
• Gestalt groupings are confusing, along with the legend being hard to understand.
• Conventional top-to-bottom scanning follows headline → dynastic counts → arc → party legend, which is not a logical information sequence.

3. Color, Legibility, Accessibility

• Eight similar mid-tone hues toward the right make smaller parties indistinguishable.
• No color-blind considerations or secondary visual cues, especially for a newspaper that goes out to the masses.
• Color key sits far from the arc, increasing cognitive load for party identification.

Edited Version

• Have put all relevant data of each party together, arranged in order of importance
• Seats are now divided into arcs to make understanding of the area easier
• Implied politically connected seats are shown in the visual.

[vaishnavi-nagarkar]

Vaishnavi Nagarkar-24m2274

Issues:

• Countries are placed in a clustered “map-like” bubble layout, but not according to actual geography or sorted order; misleading to assumption of geographical locations
• Difficult to sort according to age (variable)
• Have to look at the legend always to understand the category.
• Sorting mentally takes extra effort.
• Colour dependancy only -for sorting
• Since there are no axis, it is difficult to compare across countries

Redesign:

[hexboxlabs]

Karthik SS | IxD | 24m2241

Src: https://www.mckinsey.com/featured-insights/india/indias-turning-point-an-economic-agenda-to-spur-growth-and-jobs

Initial thoughts with just the graph:
This looks like a bar graph that is changing over time. It also looks like a comparison graph between 3 different graphs of 3 different values.

Going one by one. There are 3 level changes between the 1st and the 2nd bar. There is a single level change between the 2nd and the 3rd bar. The level changes seems to be the differences between the 2 bars. But what is the 3rd level change doing?

The 3rd level change seems to be doing nothing. It's only repeating the 2nd level change bar.
It's not clear that the 2nd and 3rd bars belong to the same year 2030.
Is it necessary to have multiple spaces for the level changes? It seem to only confuse what's happening in the graph.

redesign

Level change 2 in dark blue is not clear that the non farm jobs are increasing by conversion.

[manasimadan7]

Manasi Madan 23b3618

1. The glasses with drinks are drawn at different fill levels, which intuitively makes it seem like the height of liquid represents the percentage.

• the height of the glass correlates with the percentage rather than level of liquid ( too many variables)

2.The large, detailed illustrations of cocktails, beer, and wine dominate the graphic ; take attention away from the actual percentages.

3. Since there is no axis, the only way to compare is by reading the numbers.

• The visualization doesn’t help users visually perceive differences (e.g., 64% vs 57%)

4. Repetition of drink categories without grouping:

• “Cocktails/Long drinks” appears twice (21–29, 30–39 age groups).

• “Beer” appears twice (40–49, 50–59).

5. Grouping seems to be done with color coding of drinks , which may end up being confusing or adding to the cognitive load

Changes implied;

• Added a y axis
• Using shapes for bar graph instead of the pictorials , for sake of clarity
• added a "whole" to show out of hundred ; eg 64/100
• Gridline in the background to help user follow the axis
• Added grouping in the labeling of drink names
• Picture reference within the bar ( of the graph )

[designatedotaku]

Anoushka Shome

24m2245
Mdes Ixd

Initial analysis of silhouette

1. Colours indicate the comparison of 2 types of data
2. The two colour bars appear in pairs with the shorter in front and the longer at the back - it seems like an attempt to solve the issue that stacked bar charts have when presented in circular form - a rose chart.
3. Data seems to be cyclic in nature, due to it being presented in a circle.
4. The relationship between the centre circle and the rest of the graph is not apparent - if the two semicircles split the top and bottom of the graph or not.
5. Since the length of the arc around the starting edge is same for all the pairs, this diagram is comparing only lengths and has no relationship with area - tho this is not apparent on first view.
6. the reason for the gap is not apparent - missing data? or something else?

Conclusion -

1. Two entities are being compared.
2. Comparison is on 1 category that fluctuates through a cycle.
3. Discrepancy - the start and end of the cycle do not coincide.

China v the US: how the countries match up. Illustration: Mark McCormick for the Guardian (2011)
https://www.theguardian.com/news/datablog/2011/jan/19/china-social-media

Based on the hypothesis -

• Two entities are being compared.
• Comparison is on 1 category that fluctuates through a cycle. (false)
• Discrepancy - the start and end of the cycle do not coincide.

Actual data representation

1. 2 entities are being compared across various categorical data.
2. the year of the data is also not consistent
3. it is not cyclic in nature
4. Base line is not clear, the Y axis of all the bars are not the same. Data like GDP, GDP per capita, unemployment and population are related and that is not established.
5. The heights of the data don’t mean anything, its the difference between the data 2 countries that that counts.
6. One of the data points - Government bank account - is not even represented visually due its Y axis difference within the category itself.

Improved Graphics

1. Changed from a rose chart to a bar chart for more clarity
2. Base line and top line are kept constant as it essentially is the comparision with the data.
3. Grouping of categories so that similar or closer themes can be related for better understanding
4. Graphs with similar values are grouped and tried to be plotted wrt a similar Y axis distribution
5. Negetative value is represented with -Y axis plotting.

They Updated the chart with new data and more categories while keeping the chart type similar.
https://www.theguardian.com/news/datablog/2013/jun/07/china-us-how-superpowers-compare-datablog#data

[Sajana-ali]

SAJANA (24D1325, Ph.D)

Source: https://www.mospi.gov.in/sites/default/files/publication_reports/FlashReport_July_2025.pdf

Deconstruction:
The chart shows the no. of projects within different ministries, fund allocation, and utilization for these projects.
The bar chart (grouped bar chart) aligns with the 3 fund-related data attributes - expenditure, original allocation, and revised allocation of funds. Distinct colours are used for each bar.
The scale for both cost and project count is appropriate.
Issue:
The 3 bars within the ministries can be read as subcategories/departments.
A red (trend) line is used to show the project counts of each ministry/department.
The dual axis is not clearly linked by gridlines or labelling. Labels are only shown for the bars.
Gridlines will clutter the graph as the scales are different.

Redesign 1

The orientation makes the reading of labels (ministries) easier.
The project count is made into another graph with gridlines. The importance of the line is reduced by adding dots for individual counts.

Redesign 2

Since expenditure, revised, and actual costs are 3 states of the same data, these are presented together - the expenditure is shown with value variation and an arrow to show decrease/increase in revised cost. This way, the underutilization of the allotted fund is much more evident.

[shreyy-2005]

Shrestha Sharma
23B3629

What can we do personally to reduce emissions?
https://informationisbeautiful.net/visualizations/what-can-we-do-personally-to-reduce-emissions/

Analyze

Strengths

Clear headline and hierarchy.

Icons help users quickly understand actions.

Horizontal bars work well with long titles.

Color contrast makes the chart easy to spot.

Big impactful actions are clearly shown at the top.

Weaknesses

Top line direction feels wrong - graph moves right (more emissions) instead of left (less/target).

Angled bar ends make it hard to see the exact value.

Same icons repeated for different car-related impactful, causing confusion.

Pink color palette doesn’t connect with the topic of carbon emissions or environment.

Some text is too small and requires effort to read.

Smaller impactful lose attention because big ones dominate.

REDESIGNING

This is the redesigned version of the same infographics chart.

[karthikayagrawal]

Karthikay (23B3614)

This is a line chart that attempts to link the price of 1GB mobile data against the percentage of smartphone-owning population, in order to show that the reduce in data prices has led to an increase in people buying smartphones.

This graph has no visible Y-axis. Readers can’t see what range the data is plotted against.
The scales are mismatched. Smartphone usage (%) and data cost (₹) are numerically unrelated, but shown on the same implicit grid. This could mislead viewers into thinking they are directly comparable.

Even the data on each of the individual lines isn’t to scale. 268.9 would have been much, much higher if they plotted it accurately, and 15% would have been much lower on the Y-axis. This is strange, because it would have only added to the strength of their graphic if they plotted it correctly. The difference would have been much larger.

The chart is quite cluttered, because they have had to label each point in the graph. The massive images of the farmer and of the PM are distracting too.

I have tried two solutions.
The first was to add 2 Y axes, and map both sets of data onto it.

But this still felt a little cluttered, and I couldn't decide what the scale of the percentage should be. The entire graph was majorly affected by the max value picked. 100%? 80%? 66%? So I mapped them separately.

[pradumnsorte]

Gaming Revenue By Nation

Source - https://www.facebook.com/photo/?fbid=1161804109318515&set=a.353575520141382

Analysis

Deconstruction

1. The core structure is two values per country (2025 and 2030). The chart uses two coloured dots per row, which is an appropriate form for side-by-side comparison.
2. But the positions of the dots don’t sit on a visible quantitative axis. The viewer ultimately depends on the printed numbers at the far right to read values. That means the text, not the dots, carries the data, which fails the self-sufficiency expectation from an info graph.
3. Placing the countries from top to bottom based on the biggest market aids quick ranking without looking at the values.
4. However, flags and country names are redundant for comprehension, flags just add an extra visual element, which in turn adds the scanning cost without adding new meaning.
5. There is no way to find the change in revenue other than manually calculating the values.
6. Units are mentioned clearly and at the top, which is good.
7. There’s no explicit x-axis, ticks, or gridlines, so the spacing of dots is visually ambiguous. I can’t estimate how far 141.8 is from 199.3 visually. This weakens quantitative reading (which is the point of a two-year comparison).
8. The two numeric columns at right act as both labels and a legend, but they force the eye to shuttle from dots to numbers and back to dots, increasing the cognitive load rather than just the ability to be scannable.
9. High-contrast gridlines would improve reading without clutter.
10. Use of different colour circles for both 2025 data and 2030 data is not so accessible for colour blind people.

Redesign

1. Provided a quantitative X-axis so that the reader has a direct understanding of the comparison between the countries and an idea of the scale without looking at the data table.
2. Using different shapes for marking distinct years, to make it more accessible.
3. Making it interactive to visualise the growth for each country and the exact value more intuitively.
4. Adding gridlines for better mapping.

Added Interactivity to avoid visual clutter on the chart and then you can go in depth for added information.

Screen.Recording.2025-09-11.at.1.48.21.AM.mov

Scale adjustment to give an in-depth view of the markers that are too close to each other.

Screen.Recording.2025-09-11.at.1.49.52.AM.mov

[seaw88d]

Report card of humanity

suvid

Orignal

Analysis:

• The first thing that I see is the earth visual. It grabs the attention of the viewers, distracting the viewer without contributing much to the data viz.
• The legend is hard to read.
• The units of the graphs change but there are no visual cues for that. Maybe the units should be more prominent
• Having a graph and then a big number seems like the number would be directly related to the graph but it doesn't seems like the case for all the graphs here
• Graphs for tuberculosis, Deforestation, renewable energy, malaria, investment in renewables, internet access, methane emissions, wind power, etc shows multiple units in the same graph i.e. the y axis shows one unit and the number shows another.
• How are the grades decided?
• Polios chart shows a steep jump in the reported cases but it was grayed out as the data was incomplete. But graying it out completely does not seem appropriate as it still shows a concerning trend in the reported cases of polio.
• Some of the data points lack normalisation even when its necessary

Redesign:

• Reducing the size of the earth visual
• Increasing the legends opacity
• Making the units clearer
• Making the graph represent what the number shows

redesigned version.

[kushbaranwal]

Source - https://informationisbeautiful.net/visualizations/scale-of-devastation/

Chart Archetype: Proportional Area Visualization

This is an area chart using rounded squares to represent devastation scales across different disaster types. Each square's area directly corresponds to the affected area in square kilometres. The chart attempts to show relative scale through squares and area covered, with colours seemingly representing disaster categories but spatial positioning looks arbitrary.

Analysis
No meaningful grouping by type, time, or geography
Random scatter prevents pattern recognition and comparative analysis - Increases cognitive load
No logical flow for Western left-to-right, top-to-bottom scanning
Comparison lacks scale comparisons to state equivalents.

Redesign

Redesign 2 -

[anantaasingh]

Ananta Singh | Sr. CD | 24M2273

Orignal: https://www.flickr.com/photos/densitydesign/8089719679/in/photostream/

Analysis:

• It is a Sankey diagram
• The color choice is poor. Red feels danger and yellow feels safer but it is just different zones depicting population
• The arrangement of circles is hard to follow through. It is a visual comparison between circles with population of different zones. It is hard to have a scale to compare
• The lines connecting zone and age group gets lost and hard to track
• Text is too small and not readable
• The contrast between colours of text and shapes is poor
• Hierarchy of information is off

Redesigned Version:

[kushagrasinghh0704-sys]

Kushagra Singh, 23B3616

1. Writing the percentage is coming in the way of the actual 'visualisation', which defeats the purpose of the visualisation.
2. There's inconsistency in the way the number is written, sometimes in blocks, and then without on the green area
3. Comparision isn't easy and intuitive

REDESIGN -

1) Removal of percentage and adding axis with range of 0-100 2) Utilising the nature of the bar chart where the sum equals the same whole, so putting them closer and giving them flat color makes the comparision much more intuitive 3) Bigger legend color boxes