Build a Data Portrait

Take a look at this data portrait. It’s based on How to draw your own selfie — using your personal data.

Sample data portrait

We made this using:

In this workshop, we’ll explain how this was created.


Here’s a step-by-step guide on how you can create a simple data portrait using an SVG file.

  1. OPTIONAL: Draw this image in PowerPoint and save it as an SVG file. Phone
  2. Log into CodePen with any account
  3. Create a new Pen
  4. Copy this code to the HTML pane:
  data:js="{phone: 'iPhone', hours: 2.3}"

Inside rules:js, set the phone color based on the phone. (The phone should turn yellow.)

       '.phone': { fill: == 'Android' ? 'pink' : 'yellow' },

Set the phone name. (The phone name should change to “iPhone”)

       '.phone-name': { text: },

Set the bar’s width based on hours of usage. (The bar should widen.)

       '.hours': { width: data.hours * 60, fill: 'aqua' },

Set the hours of usage text. (The text should change from 1 to 2.3)

       '.hours-text': { text: data.hours }

Inside data:js, change the phone from iPhone to Android, and hours from 2.3 to 5.5. See the change.

See a working example

Examples of use