Examples of accessible charts generated with Vega.
Last active
April 10, 2020 00:04
-
-
Save domoritz/15a198c753bc2b664b71ba13c3d5ce50 to your computer and use it in GitHub Desktop.
Accessible charts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| empty |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg class="marks" width="238" height="242" viewBox="0 0 238 242" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(33,5)"><g class="mark-group role-frame root"><g role="group" aria-roledescription="group" transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h200v200h-200Z" style="fill: none;"></path><g><g class="mark-group role-axis"><g aria-label="x axis for Mean temperature in centigrades represents values from 0 to 28" role="graphics-object" aria-roledescription="axis" transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(36,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(71,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(107,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(143,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(179,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" aria-hidden="true" style="pointer-events: none;"><text text-anchor="start" transform="translate(0,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">0</text><text text-anchor="middle" transform="translate(35.714285714285715,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">5</text><text text-anchor="middle" transform="translate(71.42857142857143,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">10</text><text text-anchor="middle" transform="translate(107.14285714285714,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">15</text><text text-anchor="middle" transform="translate(142.85714285714286,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">20</text><text text-anchor="middle" transform="translate(178.57142857142858,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">25</text></g><g class="mark-rule role-axis-domain" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,0)" x2="200" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" aria-hidden="true" style="pointer-events: none;"><text text-anchor="middle" transform="translate(100,30)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Mean temperature in centigrades</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-group role-axis"><g aria-label="y axis for Mean precipitation in centimeters represents values from 0 to 5.5" role="graphics-object" aria-roledescription="axis" transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,200)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,164)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,127)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,91)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,55)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,18)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" aria-hidden="true" style="pointer-events: none;"><text text-anchor="end" transform="translate(-7,203)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">0</text><text text-anchor="end" transform="translate(-7,166.63636363636363)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">1</text><text text-anchor="end" transform="translate(-7,130.27272727272725)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">2</text><text text-anchor="end" transform="translate(-7,93.90909090909092)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">3</text><text text-anchor="end" transform="translate(-7,57.54545454545454)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">4</text><text text-anchor="end" transform="translate(-7,21.181818181818187)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">5</text></g><g class="mark-rule role-axis-domain" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,200)" x2="0" y2="-200" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" aria-hidden="true" style="pointer-events: none;"><text text-anchor="middle" transform="translate(-16.5615234375,100) rotate(-90) translate(0,-2)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Mean precipitation in centimeters</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-symbol role-mark marks"><path aria-label="January, 8.2 centigrades and 3.8 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(58.778801843317986,63.34310850439879)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="February, 9.9 centigrades and 3.7 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(70.42983565107457,64.19951729686248)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="March, 12.4 centigrades and 4.9 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(88.47926267281106,22.228739002932496)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="April, 15.0 centigrades and 3.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(107.28571428571428,86.24242424242424)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="May, 19.3 centigrades and 1.7 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(137.82834101382494,139.14956011730206)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="June, 22.4 centigrades and 1.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(159.99999999999997,159.72727272727272)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="July, 26.0 centigrades and 0.4 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(185.7027649769586,185.8651026392962)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="August, 26.1 centigrades and 1.3 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(186.5149769585253,151.99413489736068)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="September, 21.9 centigrades and 2.0 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(156.60119047619048,128.63636363636357)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="October, 16.4 centigrades and 4.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(117.06797235023039,52.37536656891493)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="November, 11.0 centigrades and 5.4 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(78.73809523809524,5.303030303030365)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="December, 8.2 centigrades and 5.0 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(58.5311059907834,17.39002932551328)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path></g></g><path class="foreground" aria-hidden="true" d="" style="display: none; fill: none;"></path></g></g></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment