Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/bar.svg

Last active October 27, 2017 02:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save domoritz/d059e302c436986ab2dceee42cb86448 to your computer and use it in GitHub Desktop.
Save domoritz/d059e302c436986ab2dceee42cb86448 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter card test
Display the source blob
Display the rendered blob
Raw
bar.svg
<svg class="marks" width="246" height="249" viewBox="0 0 246 249" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(52,11)"><g class="mark-group role-frame root"><g transform="translate(0,0)"><path class="background" d="M0.5,0.5h189v200h-189Z" style="fill: transparent; stroke: #ddd;"></path><g><g class="mark-group role-axis"><g transform="translate(0.5,0.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-grid" style="pointer-events: none;"><line transform="translate(0,200)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line><line transform="translate(0,160)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line><line transform="translate(0,120)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line><line transform="translate(0,80)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line><line transform="translate(0,40)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line><line transform="translate(0,0)" x2="189" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; stroke-dasharray: ; opacity: 1;"></line></g></g></g></g><g class="mark-rect role-mark marks"><path d="M1.0499999999999972,144h18.900000000000002v56h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M22.049999999999997,89.99999999999999h18.900000000000002v110.00000000000001h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M43.05,114h18.900000000000002v86h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M64.05,18h18.900000000000002v182h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M85.05,38h18.900000000000002v162h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M106.05,94h18.900000000000002v106h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M127.05,162h18.900000000000002v38h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M148.05,26h18.900000000000002v174h-18.900000000000002Z" style="fill: #4c78a8;"></path><path d="M169.05,96h18.900000000000002v104h-18.900000000000002Z" style="fill: #4c78a8;"></path></g><g class="mark-group role-axis"><g transform="translate(0.5,200.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" style="pointer-events: none;"><line transform="translate(9,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(31,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(52,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(73,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(94,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(115,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(136,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(157,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(178,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" style="pointer-events: none;"><text text-anchor="end" transform="translate(9.499999999999998,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">A</text><text text-anchor="end" transform="translate(30.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">B</text><text text-anchor="end" transform="translate(51.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">C</text><text text-anchor="end" transform="translate(72.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">D</text><text text-anchor="end" transform="translate(93.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">E</text><text text-anchor="end" transform="translate(114.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">F</text><text text-anchor="end" transform="translate(135.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">G</text><text text-anchor="end" transform="translate(156.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">H</text><text text-anchor="end" transform="translate(177.5,7) rotate(270) translate(0,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">I</text></g><g class="mark-rule role-axis-domain" style="pointer-events: none;"><line transform="translate(0,0)" x2="189" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" style="pointer-events: none;"><text text-anchor="middle" transform="translate(94.5,29)" style="font: bold 11px sans-serif; fill: #000; opacity: 1;">a</text></g></g></g></g><g class="mark-group role-axis"><g transform="translate(0.5,0.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" 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,160)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,120)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,80)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,40)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,0)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" style="pointer-events: none;"><text text-anchor="end" transform="translate(-7,203)" style="font: 10px sans-serif; fill: #000; opacity: 1;">0</text><text text-anchor="end" transform="translate(-7,163)" style="font: 10px sans-serif; fill: #000; opacity: 1;">20</text><text text-anchor="end" transform="translate(-7,123)" style="font: 10px sans-serif; fill: #000; opacity: 1;">40</text><text text-anchor="end" transform="translate(-7,83)" style="font: 10px sans-serif; fill: #000; opacity: 1;">60</text><text text-anchor="end" transform="translate(-7,43)" style="font: 10px sans-serif; fill: #000; opacity: 1;">80</text><text text-anchor="end" transform="translate(-7,3)" style="font: 10px sans-serif; fill: #000; opacity: 1;">100</text></g><g class="mark-rule role-axis-domain" 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" style="pointer-events: none;"><text text-anchor="middle" transform="translate(-34,100) rotate(-90) translate(0,-2)" style="font: bold 11px sans-serif; fill: #000; opacity: 1;">b</text></g></g></g></g></g></g></g></g></svg>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@vega_vis" />
<meta name="twitter:creator" content="@vega_vis" />
<meta name="twitter:description" content="A bar chart encodes quantitative values as the extent of rectangular bars.">
<meta property="og:image" content="https://i.imgur.com/Qs4ctUU.png" />
<meta property="og:title" content="Simple Bar Chart" />
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment