Take a look at this data portrait. It’s based on How to draw your own selfie — using your personal data.
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.
<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.