svg on S Anand

Editing images with code and AI

Sat, 06 Jun 2026 11:32:47 +0530

Andreessen Horowitz published an interesting article titled The Next Frontier of Visual AI Is Code. Here’s the summary.

A lot of our work is visual: ads, slides, dashboards, logos, videos, architecture, etc.

We can generate visual output either as:

Pixels (like Nano Banana a photo), or as
Code (like Claude generating an SVG)

Code is more powerful: AI can inspect the output and improve fast in a loop: Code > Render > Inspect > Revise.

For 2D and UI: AI can generate SVG logos, HTML/CSS pages, Figma layers, app, etc. For animation and 3D: AI can generate Lottie JSON, Blender scripts, USD scene graphs, shader code, or 3D programs.

This means design, marketing, and product teams are immediate prospects. Instead of static mockups, they’ll get editable logos, landing pages, design prototypes, motion graphics, onboarding animations, etc.

Emerging industries are robotics, manufacturing, architecture, gaming companies. Agents can build 3D chairs, machine, room, or robot with the right materials, joints and constraints.

I’ve seen some examples of this approach. Pavan used Blender MCP to build an entire building campus solely by prompting Claude. Also to design a mug from scratch. His approach is called VIGA: Vision-as-Inverse-Graphics Agent.

If you see anyone creating visual assets of any form - manually, or with AI as pixels - please remember this approach.

Using SVG favicons with Unicode

Thu, 01 Jan 2026 13:00:00 +0000

Browsers support SVG favicons as data: URLs.

For example, this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#2563eb"/>
  <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/>
</svg>

… can be:

Compressed via svgomg
Converted to a data: URL via svgviewer
Inserted into HTML like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%232563eb%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16%207%202%207%207%202-7%202-2%207-2-7-7-2%207-2Z%22%2F%3E%3C%2Fsvg%3E"/>

The fun part is that you can use text inside the SVG, styled as you wish:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40" font-weight="800" fill="white">DS</text>
</svg>

… or even use Unicode characters:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40">🌈</text>
</svg>

That can be converted into a HTML link like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%232563eb%22%20rx%3D%2210%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2235%22%20dominant-baseline%3D%22middle%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%3E%F0%9F%8C%88%3C%2Ftext%3E%3C%2Fsvg%3E"/>

The variety is endless!

What makes this powerful is that:

You can create entire families of favicons using typography, Unicode characters, and colors.
The favicons are tiny (a few hundred bytes).
They’re easy to edit and maintain (just edit the SVG text).

Creating a favicon from SVG

Thu, 01 Jan 2026 02:03:52 +0000

I use a tiny SVG favicon.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#2563eb"/>
  <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/>
</svg>

It’s small enough that I usually inline it in HTML:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='%232563eb'/><path fill='%23fff' d='m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z'/></svg>">

But sometimes I need a /favicon.ico because I don’t want to change the HTML (e.g. generated content, others’ code, too many files to change) and /favicon.ico is the default browsers look for.

Most online favicon SVG to ICO generators produce bloated favicons with uncompressed BMP entries that are over 100KB. But ICO files support PNG compression

ICO files support multiple files sizes, e.g. 4 layers of size 16, 32, 48, 256. But you don’t need all. A 32x32 for tabs and 256x256 for desktop is common.

Here’s how I created a small (4.6K) favicon.ico from my SVG:

# Convert SVG to PNGs of various sizes. You can pick any set of sizes you want
for s in 32 128; do
  magick -background none -density 512 favicon.svg -resize ${s}x${s} -strip PNG32:icon-${s}.png
done

# oxipng is great for lossess PNG compression.
# I use mise but you can use oxipng any other way.
mise x oxipng -- oxipng -o6 --strip all icon-*.png

# Build favicon.ico with PNG-compressed entries
# Install icoutils if required, e.g. sudo apt-get install icoutils
icotool -c -o favicon.ico --raw=icon-128.png --raw=icon-32.png

PS: I discovered another technique - throwaway web pages to create featured images. This featured image was generated via initially on Claude Code, then on Codex:

Create a simple page that displays all the .png files in this page along with the file size and image dimensions. These are part of a favicon. I want the user to, at a glance, understand the impact of resolution and file size trade-offs. Therefore, render all the images at the same visual size, e.g. icon-*.png could be rendered all at 128x128 for comparability of sizes.

Things I Learned - 19 Oct 2025

Sun, 19 Oct 2025 00:00:00 +0000

This week, I learned:

⭐ “… most engineers don’t have public commits. Senior engineers at large tech companies don’t work on open-source projects for the most part.” Why AI Can’t Do Hiring
Cloudflare’s Sandbox feature in their Workers looks impressive. It supports streaming, web access to the container, and long-running processes. So we can spawn off a task and have it run a server (at least for a while) or a scraper.
Gemini API has a Google Maps tool that it can refer to - like Google Search. Maps Grounding
Earlier we needed humans to label data for RLHF. Now we don’t since AI can simulate it. This is a pattern. Once AI learns from a human, that human skill can be automated. How GPT-5 Thinks — OpenAI VP of Research Jerry Tworek
The <output> element has a for= attribute indicating which <input> elements it is linked to and a form= attribute indicating which form it belongs to. This works well with screen readers. A good reason to use it more. Examples.
Meta built a Code World Model. Basically an LLM that acts like a Python interpreter!
sudo apt install moreutils installs a set of useful packages:
1. chronic. Runs a command quietly (suppressing output) unless it fails — good for cron jobs where you only want noise on errors. chronic backup.sh
2. combine. Combines lines from two input streams/files using boolean operations (AND, OR, XOR). combine AND fileA fileB
3. errno. Look up symbolic names, numeric codes, and descriptions for standard errno values. errno -l; errno ENOENT; errno 2
4. ifdata. Query network interface properties (IP, byte counts, errors) in a script-friendly format. ifdata -sip eth0; ifdata -bops eth0
5. ifne. Run a command only if stdin is not empty, passing the input through. find . -name core | ifne mail -s "Core files found" admin
6. isutf8. Check whether a file or stdin is valid UTF-8. isutf8 somefile.txt
7. lckdo. Run a command while holding an exclusive lock to prevent concurrent runs. lckdo /var/run/mylockfile.cmd myscript.sh
8. mispipe. Pipe two commands, but return the exit status of the first one (useful in pipelines). cmd1 mispipe cmd2
9. parallel. Run multiple commands in parallel, reading them from stdin or arguments. parallel < jobs.txt
10. pee. Like tee, but sends stdin to multiple commands in parallel. echo "foo" | pee cmd1 cmd2
11. ⭐ sponge. Soak up all input before writing to output — enables in-place edits safely. sort file | sponge file
12. ⭐ ts. Prefix each input line with a timestamp. tail -f logfile | ts
13. vidir. Edit a directory listing in your editor to rename, move, or delete files in bulk. vidir ~/myfolder
14. vipe. Insert a text editor into a pipeline to manually edit streamed input before output. cat file | vipe | wc -l
15. zrun. Transparently decompress compressed files before passing them to a command. zrun cat file.gz
Despite 20 years of SVG experience, I learnt new things from A Friendly Introduction to SVG and A Friendly Introduction to Paths
- Setting a <rect> width/height or a <circle> radius to zero removes the element instead of drawing a point.
- There’s no option to draw the stroke on the inside or outside of a shape/path. Only the center.
- You can override a path’s pathLength attribute to create a new internal scale for its length. It’s unclear where I can use this.
- <path> arcs have this syntax: A [rx],[ry] [rotation] [large-arc-flag] [sweep-flag] [end-x],[end-y]. SVG first fits an ellipse to these parameters and then draws the arc.
  - If rx and ry of an arc is too small to connect the points, the SVG spec scales up rx and ry.
  - [large-arc-flag]=1 literally uses the larger arc of the fitting ellipse. This is less common.
  - [sweep-flag]=1 its the ellipse to make the connecting arc go clockwise. 0 is anti-clockwise.
  - [rotation] is rarely used because we usually draw arcs and then rotate them.
- stroke-linejoin automatically flips from miter (sharp) to bevel (cut) if the sharp edge protrudes too long (e.g. small angles). Increasing stroke-miterlimit increases the cutoff (default: 4)
⭐ Always include a thoughtful gallery of examples with tools / libraries. This does more than showing what a tool can do.
- It’s use-case / domain transfer: showing what it’s useful for in real life - opening ideas, suggesting workflows.
- It’s style transfer: showing how to use it.
⭐ Here’s what expert AI coders increasingly focus on. Thomas Dohmke
- Delegation: context engineering agents for success; parallelizing.
- Verification: efficiently reviewing and testing code/output; setting stop-points.
- Expanding scope: instead of time saved as the metric.
- Education: teaching AI-based coding, debugging, reviewing/testing.
- Product management: combining requirements + UI design + architecture + engineering + deployment.
- Cross-discipline: blending code with design, governance, finance, marketing, … (“computational creators”).
Notes from Taylor’s How I’m using coding agents: October 2025
- Left monitor: 2-4 desktops (e.g. work, side-project). Right monitor: things I always want available
- Plan next task while first executes.
- Use plan mode to write to a plan file.
- Don’t start big tasks if you have meetings scheduled soon.
Recent open source package hack methods seem to work more because of people/process than systems (Filippo):
1. Phishing the author
2. Pull requests running unsafe code in CI
3. Taking over expired domain / user ID
4. Stealing long-lived tokens
uv run --python 3.14 --isolated --with-editable '.[test]' pytest runs pytest on a local project with a specific Python version. Simon Willison
Notes from the State of AI Report 2025:
- Reasoning models are more fragile. Irrelevant phrases make reasoning models spend FAR more tokens and get wrong answers #21
- AI systems are able to teach experts new concepts #41
- An environment providing feedback / rewards enables continuous learning #52
  - E.g. Multi-robot chemical labs at U.Liverpool and NCSU #60
- RLHF has a fundamental flaw: humans reward sycophancy #71
- We can read what people are typing from brain signals outside the skull #73
- Model intelligence-to-price ratio doubles every ~6 months #94
- The AI companies’ valuations are also roughly doubling every ~6 months #181
- OpenAI is offering Governments giga-watt campuses to run OpenAI models for citizens #122
- A 1GW clusters costs $50bn capex and $11bn per annum #130
- China has added ~10X the energy capacity as the US in 2024 #146
- NVIDIA challengers are still far away #161
- LLMs can “read between the lines” even if training data is censored #268
- LLMs can pass information via hidden signals #270
- Prediction: A major retailer reports >5% of online sales from agentic checkout. AI agent advertising spend hits $5B. #304
OpenAI’s leadership guide says:
- Align
  - Explain WHY AI thoughtfully.
  - Set a goal, e.g. everyone uses ChatGPT 20 times/day (Moderna).
  - Use it yourself. Show how.
  - Have business leaders run AI sessions
- Activate
  - Launch an AI skills proram
  - Set up an AI champions network
  - Encourage experimentation (dedicated time, workshops, hackathons, …)
  - Link to performance evaluations
- Amplify
  - Create an AI knowledge base
  - Share success stories (weekly)
  - Create internal groups (Teams, Slack, …)
  - Celebrate AI wins
- Accelerate
  - Unblock AI tools and data access
  - Simplify project selection. Quick feedback, clear priorities
  - Unblock projects with a cross-functional council
  - Give resources to successful teams
- Govern
  - Publish a responsible AI playbook (what’s safe to try)
  - Audit AI practices quarterly

Fri, 23 Apr 2021 16:12:55 +0000

I’ve a theory. PowerPoint can do anything. (Excel too).

Shape operations are especially powerful. In this tutorial, I create an address card icon and export it as SVG.

I don’t need Sketch / Illustrator for this. They’re great. But no, thanks. I’m pretty good with PowerPoint 😄

Have you seen PowerPoint do anything that made you go “Wow! This is cool!”? Do share. I’d love to hear about it.

http://www.s-anand.net/blog/designing-complex-shapes-in-powerpoint/

Designing Complex Shapes in PowerPoint

Sun, 18 Apr 2021 04:26:11 +0000

I use PowerPoint instead of Adobe Illustrator or Sketch. I’m familiar with it, and it does everything I need.

One of the features I’m really excited by in PowerPoint is the ability to manipulate shapes.

Let’s say you have a rectangle and a circle. You can select both of these shapes and in the Shape Format > Merge Shapes dropdown, you can:

merge them with a union
combine them (like an XOR operation in Boolean algebra)
fragment them, which breaks them up into pieces
intersect them
subtract them

This is so powerful that you can create any kind of shape. Let’s take an icon from Font Awesome at random – say an address card – and create it.

Here’s the video of the process. I’ll explain it step-by-step below.

First, let’s take a screenshot of this and copy it into PowerPoint.

Now let’s draw over this. So we’ll start with a rounded rectangular box with the same color as the address card. We can use the eyedropper to pick the right color. Remove the outline. Then match the edges as closely as you can. (Add a bit of transparency so you can see through it – that helps match edges closely.)

Move this card boundary to a new page.

Now, on top of the original image we copy-pasted from Font Awesome, trace 3 rounded rectangles for the address lines. Trace a circle over the head. Fill them white. Remove the outline. It should look like these.

Next, let’s create the body. We’ll create a rounded rectangle that matches the bottom half of the body, another that matches the top half of the body, and intersect them, like this:

Then, draw a large circle around the head and subtract it from the body, like this:

Finally, copy all these shapes over the card boundary on the next page. Select the card boundary first. Then select these copied shapes (3 address lines, head, and bust). Select Shape Format > Merge Shapes > Subtract.

With that, we have a single shape that contains the entire address card. The white areas are transparent.

You can download the Merge-Shapes.pptx file below with each of the steps.

Merge-Shapes (Download)

Like I said, I don’t bother with Adobe Illustrator or Sketch. PowerPoint does it all for me 😊.

Create SVG with PowerPoint

Mon, 21 Dec 2020 16:24:00 +0000

With Office 365, PowerPoint supports SVG editing. This is really powerful. It means you can draw in PowerPoint and render it on the web – including as interactive or animated visuals.

For example, the SVG in this simulator was created just with PowerPoint.

The process is simple. Draw anything. Select any shapes and right-click. Select Save As Picture… and choose SVG.

For example, you can use PowerPoint to create Smart Art, export it as SVG, and embed it into a page. See this example on CodePen.

See the Pen Smart Art SVG by S Anand (@sanand0) on CodePen.

The SVG is fairly well structured and easy to edit. The code generated for these 2 simple shapes:

… is quite straight-forward – just two SVG shapes.

<rect x="125.5" y="185.5" width="107" height="107" stroke="#2F528F" stroke-width="1.33333" stroke-miterlimit="8" fill="#4472C4"/>
<path d="M243.5 292.5 297 185.5 350.5 292.5Z" stroke="#2F528F" stroke-width="1.33333" stroke-miterlimit="8" fill="#4472C4" fill-rule="evenodd"/>

I was worried about the lack of SVG authoring tools in Windows. (InkScape is not usable, and Adobe’s tools are complex and expensive.) PowerPoint fits perfectly.

India district map

Thu, 21 Jul 2011 16:50:33 +0000

I put together a district map of India in SVG this weekend.

So what?

You can now plot data available at a district level on a map, like the temperature in India over the last century (via IndiaWaterPortal). The rows are years (1901, 1911, … 2001) and the columns are months (Jan, Feb, … Dec). Red is hot, green is cold.

(Yeah, the west coast is a great place to live in, but I probably need to look into the rainfall.)

districts.svg has has 640 districts (I’ve no idea what the 641st looks like) and is tagged with the State and District names as titles:

<g title="Madhya Pradesh">
  <path title="Alirajpur" d="..." />
  <path title="Jhabua" d="..." />
  ...
</g>

How?

I made it from the 2011 census map (0.4MB PDF). I opened it in Inkscape, removed the labels, added a layer for the districts, and used the paint bucket to fill each district’s area. I then saved the districts layer, cleaning it up a big. Then I labelled each district with a title. (Seemed like the easiest way to get this done.)

Thanks to @planemad, @gkjohn, @arjunram for inputs. Play around. Feedback welcome.

Comments

Thejesh GN 22 Jul 2011 9:27 am: Thanks for the map. Very useful. Btw you can cname map your bitbucket account. Its free.
S Anand 23 Jul 2011 9:39 am: @Thej – AHA! Didn’t know about the CNAMEing bitbucket. Thanks.
Rishi 23 Jul 2011 9:15 am: Wonderful stuff Anand!!! I would say - upload this on Wikipedia - but then we would have several flamewars with our dear neighbours on the borders shown.
Arulalan.T 29 Dec 2011 10:17 am: Thanks a lot for the India District Map in pdf and svg. From this post I got few ideas to generate shape (shp) files. I edited the India map in CDAT [1] shape files by generate the lat,lon points by hand itself [2]. I want to develop the India district shape file by automatic. Your project and code lights in my way. Thanks a lot. [1] http://www2-pcmdi.llnl.gov/cdat [2] http://tuxworld.wordpress.com/2010/02/13/how-to-edit-world-map-in-cdat-documentation/
Dibyo 11 Aug 2011 4:29 am: Awesome - I’ve struggled with this for a while now.
Minh 12 Dec 2012 8:11 pm: Thanks a lot. Do you have the shapefiles for your svg data? I could not find the new district level (2011 census) anywhere? Can you share with me? Many thanks.
mahir 19 Dec 2012 6:11 am: Dear Anand, Great work. I have made a tool to translate these location names using wikipedia’s toolserver. people can translate these svg maps from http://toolserver.org/~mahir/ I have successfully translated India political map from english to tamil for tamil wikipedia. http://ta.wikipedia.org/wiki/படிமம்:Ta_India_National_Highway_17.png Please try once. thanks
Arijit Upadhyay 26 Dec 2013 3:37 am: Some district names have changed since you posted this. Do you have an update for this map. Or how to edit them. Linkscape destroys the XML tags.
Prakash 18 Jan 2014 10:43 am: Dear Friend would it be possible to get shp and dbf file of indian state with undivided bihar, up and mp.

Visualising student performance 2

Mon, 03 Jan 2011 16:02:49 +0000

This earlier visualisation was revised based feedback from teachers. It’s split into two parts: one focused on performance by subject, and another on performance of each student.

Students’ performance by subject

This is fairly simple. Under each subject, we have a list of students, sorted by marks and grouped by grade. The primary use of this is to identify top performers and bottom performers at a glance. It also gives an indication of the grade distribution.

For example, here’s mathematics.

Grades are colour-coded intuitively, like rainbow colours. Violet is high, Red is low.

The little graphs on the left show the performance in individual exams, and can be used to identify trends. For example, from the graph to the left of Karen’s score:

… you can see that she’d have been an A1 student (the first two bars are coloured A1) but for the dip in the last exam (which is coloured A2).

Finally, there’s a histogram showing the grades within the subject.

Incidentally, while the names are fictitious, the data is not. This graph shows a bimodal distribution and may indicate cheating.

Students’ performance

This is useful when you want to take a closer look at a single student. On the left are the total scores across subjects.

Because of the colour coding, it’s easy to get a visual sense of a performance across subjects. For example, in the first row, Kristina is having some trouble with Mathematics. And on the last row, Elsie is doing quite well.

To give a better sense of the performance, the next visualisation plots the relative performance of each student.

From this, it’s easy to see that Kristina is the the bottom quarter of the class in English and Science, and isn’t doing to well in Mathematics either. Gretchen and Elsie, on the other hand, are consistently doing well. Patrick may need some help with Mathematics as well. (Incidentally, the colours have no meaning. They just make it overlaps less confusing.)

Next to that is the break-up of each subject’s score.

The first number in each subject is the total score. The colour indicates the grade. The graph next to it, as before, is the trend in marks across exams. The same scores are shown alongside as numbers inside circles. The colour of the circle is the grade for that exam.

In some ways, this visualisation is less information-dense than the earlier visualisation. But this is intentional. Redundancy can help with speed of interpretation, and a reduced information density is also less intimidating to first-time readers.

Comments

Venkatesh 19 Jan 2011 5:56 pm: Anand, I was searching for BCG and landed on your blog, retraced and landed up in this page. I currently work for an AID India (www.aidindia.in) in TN. The above gui/code looks extremely useful for a particular initiative we have taken up recently. If you are okay with it, i would drop in a mail explaining the exact idea. If you are up for it, then lets take it from there… Thanks. Venkatesh Krishnamoorthy.
V 4 Jan 2011 1:12 pm: Is this something that you plan to release in the open source? Also, just curious : how did you generate the chart?Protovis?
S Anand 9 Jan 2011 10:12 am: Just SVG and Python, actually. The code is at http://github.com/sanand0/reportbee-dashboard
V 9 Jan 2011 11:43 am: SVG is neat, but i have offlate fallen in love with protovis. Check it out.

Visualising student performance

Mon, 13 Dec 2010 11:51:34 +0000

I’ve been helping with visualising student scores for ReportBee, and here’s what we’ve currently come up with.

Each row is a student’s performance across subjects. Let’s walk through each element here.

The first column shows their relative performance across different subjects. Each dot is their rank in a subject. The dots are colour coded based on the subject (and you can see the colours on the image at the top: English is black, Mathematics is dark blue, etc.)

The grey boxes in the middle shows the quartiles. A dot on the left side means that the student is in the bottom quartile. Student 30 is in the bottom quartile in almost every subject. The grey boxes indicate the 2nd and 3rd quartiles. Dots on the right indicate the top quartile.

This view lets teachers quickly explain how a student is performing – either to the headmistress, or parents, or the student. There is a big difference between a consistently good performer, a consistently poor performer, and one that is very good in some subjects, very poor in others. This view lets the teachers identify which type the student falls under.

For example, student 29 is doing very well in a few subjects, OK is some, but is very bad at computer science. This is clearly an intelligent student, so perhaps a different teaching method might help with computer science. Student 30 is doing badly in almost every subject. So the problem is not subject-specific – it is more general (perhaps motivation, home atmosphere, ability, etc.) Student 31 is consistently in the middle, but above average.

The bars in the middle show a more detailed view, using the students’ marks. The zoomed view above shows the English, Mathematics and Social Science marks for the same 3 students (29, 30, 31). The grey boxes have the same meaning. Anyone to the right of those is in the top quarter. Anyone to the left is in the bottom quarter.

Some of bars have a red or a green circle at the end

The green circle indicates that the student has a top score in the subject. The red circle indicates that the student has a bottom score in the subject. This lets teachers quickly narrow down to the best and worst performers in each subject.

The bars on top of the subjects show the histogram of students’ performances. It is a useful view to get a sense of the spread of marks.

For example, English is significantly biased towards the top half than Mathematics or Science. Mathematics has main “trailing” students at the bottom, while English has fewer, and Social Science has many more.

Most of this explanation is intuitive, really. Once explained (and often, even when not explained), they are easy to remember and apply.

So far, this visualisation answers descriptive questions, like:

Where does this student stand with respect to the class?
Is this student a consistent performer, or does his performance vary a lot?
Does this subject have a consistent performance, or does it vary a lot?

We’re now working on drawing insights from this data. For example:

Is there a difference between the performance across sections?
Do students who perform well in science also do well in mathematics?
Can we group students into “types” or clusters based on their performances?

Will share those shortly.

Comments

Sathya 14 Dec 2010 5:36 am: Very nice post as always ! I was wondering if the bars for the individual subject marks are needed. I mean, the first columns provides this information ( implicitly though). Perhaps a Ruler beneath ( from 0 to 200 ) would help identify the individual score. In an online interface, a tooltip on the dots would suffice. A Ruler may help in the printable version. The advantage is that the report would look less cluttered. May be distinction of subjects etc based on shapes (colors cans till be retained) would make it accessible for color blinded persons.
Shankar V 14 Dec 2010 5:21 am: Interesting visual representation of performance. On the same count, is it possible to visually represent a class performance in different subjects and see how a teacher can positively or negatively influence performance? If the class does significantly worse/better in one specific subject, maybe the teacher or the syllabus is to blame.
V 13 Dec 2010 12:47 pm: Interesting. Liked the way Red and Blue dots are shown on the mark line to denote the top/bottom marks. How did you create the leftmost-dots(relative perf across subjects) - I mean, which tool?
S Anand 13 Dec 2010 1:45 pm: The workflow is CSV -> Python -> SVG -> PDF. The CSV file contains scores. I use a simple templating system (like Tornado/Django/Jinja2) to create the visualisation in SVG. Those dots are circles in SVG. This is converted into PDF using wkhtmltopdf (thanks to http://manu-j.com)
V 14 Dec 2010 2:45 pm: Ok. Thanks. a small nit : Readability is affected with the dots on the left - the one which show the percentiles; though this is a nice representation otherwise.
S Anand 14 Dec 2010 5:21 pm: @Shankar – we’re trying to do that by comparing performance across sections. Will post what we come up with next week. @Sathya – excellent point. I now suspect I put it in only to fill the space in a visually appealing way. There are other ways of compactly representing the marks, including the ruler you mentioned. Will check with some teachers for feedback. @V, did you mean because the dots overlapped each other? Or made it less easy to read horizontally? Or something else?
Dan Murray 22 Dec 2010 6:21 pm: Very interesting use of Sparklines. I find myself wanting to build two separate sets of visualizations for this data. I find myself wanting to create an individual student dashboard with overall score and then the separate subject scores with additional details being made available via pop-ups. Nice work though.
Sanketh 23 Dec 2010 10:46 pm: Nice job! The histograms at the top are a nice addition to judge whether the class grading is biased to one side. I agree with @Sathya that the data in the middle is kind of unnecessarily dominant. I am guessing there is some cute way to combine the bars with an additional dimension (hue, tinge) to add the percentile data to the bars themselves and show all subject data together, but I can’t think of anything concrete right now. Keep up the awesome posts!