All the reading

Data Visualisation

8 lessons, about 38 minutes. The check's questions come from these.

Using honest scales and colour

3. Use honest axes and scales

5 min

Key point

The honest axis rule

Your axis should make the size of change feel like the real size of change.

If the chart uses bars, start the value axis at zero. If the chart uses lines, you may zoom in, but you must make the range obvious.

Why axes matter

A dashboard chart is often read in 5 seconds. A bad axis can make a small change look huge, or hide a real problem.

For your HackIndia project, the chart should help someone decide something. Do not make your app look better by stretching the scale.

Your to-do

Choose the scale

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Use a linear scale for normal counts, money, marks, bookings, users, and most hackathon metrics.
Use a time scale when the x-axis is dates, weeks, or months.
Use a log scale only when values differ by a lot, such as 10, 100, 1,000, and you clearly label it.
Avoid mixing two y-axes unless you have a strong reason and explain both axes.
Keep units visible, such as ₹, ms, %, users, or submissions.

0 of 5 done

Adding labels and removing clutter

5. Label what matters

5 min

Key point

One job

A chart label should remove guessing. Your viewer should know what is measured, the unit, the time period, and the main takeaway without asking you on a call.

For a hackathon demo, assume a recruiter or judge sees your dashboard for 20 seconds. Labels must carry the story.

What to label

Every useful chart needs a clear title, axis labels, units, and a time range if time is involved. If the chart uses categories, make the category names readable.

If one number matters most, label it directly. Do not make the viewer match colours to a legend when there are only one or two important lines.

Your to-do

Label checklist

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Building and submitting charts

7. Build the chart in code

5 min

Key point

One chart, shipped

Your chart is only part of your project when it runs inside your demo or app. A PNG in your README is useful, but it does not prove your dashboard works.

For this lesson, build one honest chart in code from a small data file or API response. Keep it simple and visible.

Use real project data

Pick data your project already creates or can reasonably store. For a food delivery project, it could be orders per day. For a college event app, it could be registrations by department.

Do not invent numbers just to make the chart look good. If you need sample data for testing, name it clearly as sample data.

Your to-do

Prepare your data

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

10 questions, 7 to pass.

Example

Chart brief example

Before you open React, Python, or a chart library, write a small chart brief. Keep it near your code in a file like dashboard-brief.txt.

This brief becomes your guardrail. Later lessons will use it to pick the chart, labels, colours, and code.

Project: Campus study planner
Dashboard question: How many tasks did the user complete each day in the last 7 days?
Metric: completed tasks
Group: day
Time range: last 7 days
Audience: student using the planner
Decision supported: see which days need a better study routine
Chart promise: show daily completed task counts, without hiding low or zero days

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to improve your dashboard question. Do not ask it to invent your data or decide the goal for you.

Give it your project idea and ask for 5 chart questions. Keep only the one that matches a real user decision and data your app can actually collect.

Prompt:
I am building a hackathon project: [describe your app].
Suggest 5 dashboard questions for one honest chart.
Each question must include a metric, a group or comparison, and a time range.
Do not invent data I cannot collect in the app.

Example

Chart picker file

Keep a tiny chart decision note in your repo. It shows that your chart choice was intentional, not random.

This is useful in hackathon submissions because judges can see what question your dashboard answers.

dashboard-chart-choice.txt

Project question: Which feature gets the most usage in our campus event app?
Data shape: Categories with counts
Chart chosen: Sorted bar chart
Reason: We need to compare feature usage clearly
Avoided: Pie chart, because 6 slices would be harder to compare
Metric shown: Number of clicks per feature
Viewer action: Decide which feature to improve first

Example

Small change, fair view

Your app has weekly active users: 92, 96, 101, 105. A y-axis from 90 to 106 makes growth look steep. That may be okay for a line chart if the axis labels are clear, but not for a bar chart.

Here is a safe Chart.js bar chart setup. The y-axis starts at zero and labels the unit.

const chartConfig = {
  type: 'bar',
  data: {
    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
    datasets: [{
      label: 'Active users',
      data: [92, 96, 101, 105],
      backgroundColor: '#2563eb'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Active users'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Week'
        }
      }
    }
  }
};

Tip

Ask AI to audit

Paste your chart config or screenshot into ChatGPT, Gemini, or Claude and ask for an axis honesty check.

Check the answer yourself. AI may miss the chart type, unit, or whether a zoomed axis is explained.

Prompt:
Review this dashboard chart for honest axes and scales.
Tell me if the y-axis should start at zero, whether the units are clear, and whether the scale could mislead a recruiter or hackathon judge.

4. Make colour accessible

4 min

Key point

One colour rule

Never make colour the only way to understand a chart. Use colour plus a label, icon, pattern, line style, or direct text.

Your dashboard may be opened on a phone, projector, or low-brightness laptop during judging. The meaning should survive all three.

Why this matters

Many people cannot easily tell red from green, or blue from purple. Even users with normal vision struggle when colours are low contrast or too similar.

A recruiter or judge should not need to guess which line is which. If your chart answers a project question, the colour choices must help that answer.

Your to-do

Choose safer colours

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Use one main colour for the most important data series.
Use grey for background or comparison data.
Avoid red-green pairs for status unless you also add text like Paid and Failed.
Use high contrast between text and background.
Limit charts to 3 to 5 meaningful colours unless you have a strong reason.

0 of 5 done

Common mistake

Common colour mistake

Beginners often use bright random colours because the chart looks more active. That can make the chart harder to read.

Do not use colour like decoration. Use it to separate groups, highlight a finding, or show status.

Tip

Check with AI

You can ask ChatGPT, Gemini, or Claude to review your colour plan. Paste your chart labels and colour hex codes.

Check the reply yourself. AI may say a palette is accessible without testing actual contrast. Use a contrast checker for text and important labels.

Example

Accessible chart colours

This small Chart.js example uses blue and orange instead of red and green. It also labels each dataset, so colour is not the only clue.

The dashed line gives another visual difference. This helps when colours look similar.

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      label: 'Successful UPI payments',
      data: [42, 55, 61, 58, 70],
      borderColor: '#0072B2',
      backgroundColor: '#0072B2',
      tension: 0.2
    },
    {
      label: 'Failed UPI payments',
      data: [8, 6, 7, 5, 4],
      borderColor: '#D55E00',
      backgroundColor: '#D55E00',
      borderDash: [6, 4],
      tension: 0.2
    }
  ]
};

Your to-do

Test your chart

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

View the chart on your phone at low brightness.
Convert or preview it in grayscale if your tool supports it.
Check that every colour has a text label or legend.
Ask one friend to explain the chart without your help.
Fix any colour pair that needs guessing.

0 of 5 done

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open the chart you planned for your HackIndia project dashboard.
List what each colour means in one line.
Replace red-green pairs with safer colours or add clear text labels.
Make the most important data series the strongest colour.
Save your colour choices as hex codes for the coding lesson.

0 of 5 done

Example

Before and after

This is the same chart idea with better labels. The second version tells a clearer story in a project dashboard for a campus canteen queue app.

Weak:
Title: Queue
X-axis: Time
Y-axis: Count
Legend: Series 1

Better:
Title: When is the canteen queue longest?
X-axis: Time of day, 9 AM to 5 PM
Y-axis: Students waiting
Direct label: Peak queue: 38 students at 1:15 PM
Note: Data from 42 user check-ins on 12 Feb

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to improve chart labels. Paste your chart question, metric, unit, time period, and audience.

Check the output yourself. AI often makes the title sound too broad, adds claims not in your data, or forgets the unit.

Prompt:
I am making a dashboard chart for a hackathon project.
Question: Are users completing onboarding faster after our change?
Metric: Median onboarding time
Unit: minutes
Time period: 7 days before and 7 days after change
Audience: recruiters and hackathon judges
Suggest a clear chart title, axis labels, and one short note.

Check:
- Does it include minutes?
- Does it mention the before/after period?
- Does it avoid claiming causation if the data only shows a change?

6. Cut clutter and avoid traps

5 min

Key point

One job only

A dashboard chart should answer one project question with the least visual noise possible. If a line, icon, colour, border, or label does not help the reader understand the answer, remove it.

What counts as clutter

Clutter is anything that competes with the data. Common examples are heavy gridlines, thick borders, shadows, gradients, too many colours, repeated labels, and legends that could be direct labels.

A recruiter may spend less than a minute on your demo. A clean chart lets them understand your project result without asking you to explain every design choice.

Common mistake

Avoid these traps

Do not use 3D charts. They make bars, slices, and points harder to compare. Do not use pie charts with many slices. After 4 or 5 categories, comparison becomes slow.

Be careful with dual-axis charts. They can make unrelated trends look connected. If you need two different units, use two small charts with clear titles instead.

Your to-do

Clean the chart

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Keep the chart title as the question or answer, not a vague label.
Remove backgrounds, shadows, gradients, and thick borders.
Use light gridlines only when they help compare values.
Show fewer ticks on the axis, but keep enough to read the scale.
Replace a legend with direct labels when there are only a few series.

0 of 5 done

Tip

Use the squint test

Open your chart on your phone. Squint slightly. The main pattern should still be visible.

If the loudest thing is the grid, legend, border, or colours, the chart is not ready. Make the data marks and key labels the clearest parts.

Example

Cleaner chart config

Here is a Chart.js option block that reduces noise. Use it later when you build the chart in code. The point is not this exact library. The point is the choices: no legend when labels are obvious, light gridlines, clear title, and readable ticks.

const chartOptions = {
  responsive: true,
  plugins: {
    title: {
      display: true,
      text: 'Which feature gets the most student signups?'
    },
    legend: {
      display: false
    },
    tooltip: {
      enabled: true
    }
  },
  scales: {
    x: {
      grid: {
        display: false
      },
      ticks: {
        maxRotation: 0,
        autoSkip: false
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        color: '#e5e7eb'
      },
      ticks: {
        precision: 0
      },
      title: {
        display: true,
        text: 'Signups'
      }
    }
  }
};

Check AI suggestions

If you ask ChatGPT, Gemini, or Claude to improve your dashboard chart, ask for a simpler version, not a prettier version. AI tools often suggest extra colours, icons, cards, animations, or 3D styles because they look impressive in text.

Use this prompt: “Simplify this dashboard chart for a recruiter. Remove decoration. Keep the chart honest, labelled, and accessible. Tell me what to delete and why.” Then check that the answer keeps the scale clear and does not hide important data.

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open the chart you plan to use in your HackIndia project dashboard.
List three things on it that are not data, labels, or scale helpers.
Remove or reduce those three things in your design or code.
Check that the chart still has a clear title, axis labels, and readable values.
View it on your phone and run the squint test.

0 of 5 done

Example

React chart example

This example uses Recharts in a React app. It builds a bar chart for one clear question: Which feature gets the most user clicks?

Install Recharts first, then add the component to the page where your dashboard is shown.

npm install recharts

// FeatureClicksChart.jsx
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Label
} from "recharts";

const data = [
  { feature: "UPI Pay", clicks: 86 },
  { feature: "Order Track", clicks: 64 },
  { feature: "Support", clicks: 28 },
  { feature: "Coupons", clicks: 42 }
];

export default function FeatureClicksChart() {
  return (
    <section aria-labelledby="feature-clicks-title">
      <h2 id="feature-clicks-title">Which feature gets the most clicks?</h2>
      <p>Clicks recorded in the demo dataset for this project.</p>

      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} margin={{ top: 20, right: 20, bottom: 40, left: 40 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="feature">
            <Label value="Feature" offset={-25} position="insideBottom" />
          </XAxis>
          <YAxis domain={[0, "dataMax"]}>
            <Label value="Clicks" angle={-90} position="insideLeft" />
          </YAxis>
          <Tooltip />
          <Bar dataKey="clicks" fill="#2563eb" name="Clicks" />
        </BarChart>
      </ResponsiveContainer>
    </section>
  );
}

Tip

Ask AI carefully

AI can help you write the chart component faster. Give it your data shape, chart type, framework, and the exact question the chart must answer.

Check what it returns. Make sure the axis does not hide zero for bar charts, labels are present, colours have contrast, and the chart uses your real fields.

Prompt you can use:

I am building a React dashboard chart using Recharts.
Question: Which feature gets the most clicks?
Data fields: feature as string, clicks as number.
Make a responsive bar chart with a title, axis labels, tooltip, and accessible section label.
Do not use fake fields. Keep the y-axis honest for a bar chart.

8. Submit your dashboard project

5 min

Key point

Prove the chart works

Your chart is only useful if someone can find it, understand it, and verify how it was built.

For submission, make the chart visible in the app or demo, connect it to a real project question, and keep the code public.

What judges need

A good dashboard submission does not need ten charts. One honest, labelled, accessible chart is enough if it answers a real project question.

Think like a busy reviewer. They may open your demo for two minutes. Put the chart where it is easy to reach, not hidden behind login or unfinished navigation.

Your to-do

Submission checklist

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open your app and check that the dashboard loads without local-only data.
Confirm the chart has a clear title, labels, units, and readable colours.
Add one line near the chart that states the project question it answers.
Push the latest code to a public repository.
Record or link a demo where the chart is visible without extra setup.

0 of 5 done

Example

README proof block

Add a small section to your README so a judge or recruiter can check the dashboard quickly. Keep it factual.

Replace the sample text with your own project details.

Project dashboard
Question answered: Which hostel mess items get the most complaints each week?
Chart shown: Weekly complaints by item, grouped by food category
Where to see it: Open the app, go to /dashboard
Demo: The dashboard chart is visible at 01:12 in the demo video
Data source: Sample complaint records in data/complaints.csv
Accessibility check: Chart has title, axis labels, units, and does not rely on colour alone
Run locally:
npm install
npm run dev

Common mistake

Do not submit a screenshot only

A screenshot helps, but it is not enough. Your task is to submit a working project dashboard with a chart visible in the demo or app.

If the app cannot run, the repo should still make the chart code easy to inspect. Do not leave chart logic inside an unnamed test file.

Tip

Use AI for review

Before submitting, paste your README section and a screenshot description into ChatGPT, Gemini, or Claude. Ask it to act like a hackathon judge with two minutes.

Check its feedback yourself. AI may miss broken links, wrong commands, or accessibility issues. You must still click every link and run the project once.

Prompt:
You are reviewing my hackathon project submission.
Check if my dashboard chart is easy to find, honest, labelled, and understandable.
Tell me what is missing for a recruiter or judge.

Project question: [paste your question]
README dashboard section: [paste section]
Screenshot description: [describe what is visible]

Your to-do

Final local test

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Clone your repo into a fresh folder, like a reviewer would.
Install dependencies using only the commands in your README.
Start the app and open the dashboard route.
Check the chart on mobile width and laptop width.
Fix any broken command, missing file, or hidden chart before submitting.

0 of 5 done

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Write the project question above or near your chart.
Add the README proof block with your real route, demo time, and data source.
Push your latest dashboard code to a public repo.
Open your HackIndia submission and confirm the chart is visible in the demo or app.

0 of 4 done

Data Visualisation

1. Start with the question

One chart, one job

What counts here

Shape the question

Avoid vague questions

2. Pick the right chart

One rule

Common chart jobs

Choose by question

3. Use honest axes and scales

The honest axis rule

Why axes matter

Choose the scale

5. Label what matters

One job

What to label

Label checklist

7. Build the chart in code

One chart, shipped

Use real project data

Prepare your data

Chart brief example

Use AI carefully

Test the question

Do this now

Pie chart trap

Sort for speed

Chart picker file

Good defaults

Do this now

Common axis tricks

Small change, fair view

Ask AI to audit

Axis checklist

Do this now

4. Make colour accessible

One colour rule

Why this matters

Choose safer colours

Common colour mistake

Check with AI

Accessible chart colours

Test your chart

Do this now

Weak labels

Before and after

Use AI carefully

Notes are labels too

Do this now

6. Cut clutter and avoid traps

One job only

What counts as clutter

Avoid these traps

Clean the chart

Use the squint test

Cleaner chart config

Check AI suggestions

Do this now

React chart example

Ask AI carefully

Common build mistake

Do this now

8. Submit your dashboard project

Prove the chart works

What judges need

Submission checklist

README proof block

Do not submit a screenshot only

Use AI for review

Final local test

Do this now