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.

Tutorial

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:
<script
  src="https://cdn.jsdelivr.net/npm/uifactory@1.22.0/src/uifactory.js"
  import="@svg-chart"
></script>
<svg-chart
  src:urltext="https://raw.githubusercontent.com/gramener/gramex-guide/master/workshop/data-portraits/phone.svg"
  data:js="{phone: 'iPhone', hours: 2.3}"
  rules:js="{
     }"
></svg-chart>

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

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

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

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

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