Skip to content

Instantly share code, notes, and snippets.

@jleonard99
Created November 30, 2012 21:09
Show Gist options
  • Save jleonard99/4178632 to your computer and use it in GitHub Desktop.
Save jleonard99/4178632 to your computer and use it in GitHub Desktop.
SVG output from bullets.html http://bl.ocks.org/4061961
Display the source blob
Display the rendered blob
Raw
<?xml-stylesheet href="./bullet.css"?>
<div id="bullets">
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="600" height="25" x="0"></rect><rect class="range s2" width="400" height="25" x="0"></rect><rect class="measure s0" width="720" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="586.6666666666667" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="666.6666666666667" x2="666.6666666666667" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">50</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">100</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">150</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">200</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">250</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">300</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Revenue</text><text class="subtitle" dy="1em">US$, in thousands</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="666.6666666666667" height="25" x="0"></rect><rect class="range s2" width="533.3333333333333" height="25" x="0"></rect><rect class="measure s0" width="613.3333333333333" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="560" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="693.3333333333334" x2="693.3333333333334" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">5</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">10</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">15</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">20</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">25</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">30</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Profit</text><text class="subtitle" dy="1em">%</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="666.6666666666667" height="25" x="0"></rect><rect class="range s2" width="466.6666666666667" height="25" x="0"></rect><rect class="measure s0" width="426.6666666666667" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="133.33333333333334" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="733.3333333333334" x2="733.3333333333334" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">100</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">200</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">300</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">400</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">500</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">600</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Order Size</text><text class="subtitle" dy="1em">US$, average</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="640" height="25" x="0"></rect><rect class="range s2" width="448.00000000000006" height="25" x="0"></rect><rect class="measure s0" width="528" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="320" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="672.0000000000001" x2="672.0000000000001" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(160,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">500</text></g><g class="tick" transform="translate(320,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">1,000</text></g><g class="tick" transform="translate(480,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">1,500</text></g><g class="tick" transform="translate(640,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">2,000</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">2,500</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">New Customers</text><text class="subtitle" dy="1em">count</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="680.0000000000001" height="25" x="0"></rect><rect class="range s2" width="560" height="25" x="0"></rect><rect class="measure s0" width="752" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="512.0000000000001" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="704.0000000000001" x2="704.0000000000001" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0.0</text></g><g class="tick" transform="translate(80,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0.5</text></g><g class="tick" transform="translate(160,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">1.0</text></g><g class="tick" transform="translate(240,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">1.5</text></g><g class="tick" transform="translate(320,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">2.0</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">2.5</text></g><g class="tick" transform="translate(480,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">3.0</text></g><g class="tick" transform="translate(560,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">3.5</text></g><g class="tick" transform="translate(640,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">4.0</text></g><g class="tick" transform="translate(720,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">4.5</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">5.0</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Satisfaction</text><text class="subtitle" dy="1em">out of 5</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="666.6666666666667" height="25" x="0"></rect><rect class="range s2" width="533.3333333333333" height="25" x="0"></rect><rect class="measure s0" width="613.3333333333333" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="560" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="693.3333333333334" x2="693.3333333333334" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">5</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">10</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">15</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">20</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">25</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">30</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Profit</text><text class="subtitle" dy="1em">%</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="666.6666666666667" height="25" x="0"></rect><rect class="range s2" width="533.3333333333333" height="25" x="0"></rect><rect class="measure s0" width="613.3333333333333" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="560" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="693.3333333333334" x2="693.3333333333334" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">5</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">10</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">15</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">20</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">25</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">30</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Profit</text><text class="subtitle" dy="1em">%</text></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="bullet" width="960" height="50"><g transform="translate(120,5)"><rect class="range s0" width="800" height="25" x="0"></rect><rect class="range s1" width="666.6666666666667" height="25" x="0"></rect><rect class="range s2" width="533.3333333333333" height="25" x="0"></rect><rect class="measure s0" width="613.3333333333333" height="8.333333333333334" x="0" y="8.333333333333334"></rect><rect class="measure s1" width="560" height="8.333333333333334" x="0" y="8.333333333333334"></rect><line class="marker" x1="693.3333333333334" x2="693.3333333333334" y1="4.166666666666667" y2="20.833333333333332"></line><g class="tick" transform="translate(0,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">0</text></g><g class="tick" transform="translate(133.3333282470703,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">5</text></g><g class="tick" transform="translate(266.6666564941406,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">10</text></g><g class="tick" transform="translate(400,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">15</text></g><g class="tick" transform="translate(533.3333129882813,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">20</text></g><g class="tick" transform="translate(666.6666870117188,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">25</text></g><g class="tick" transform="translate(800,0)" style="opacity: 1; "><line y1="25" y2="29.166666666666668"></line><text text-anchor="middle" dy="1em" y="29.166666666666668">30</text></g><g text-anchor="end" transform="translate(-6,12.5)"><text class="title">Profit</text><text class="subtitle" dy="1em">%</text></g></g></svg>
</div>
@jleonard99
Copy link
Author

SVG created when pulling the inner.HTML from bullets.html example at: http://bl.ocks.org/4061961

@jleonard99
Copy link
Author

I amended the raw SVG file to add the style sheet, the xmlns attributes for each of the svg elements and wrapped the svg elements in a div. The file now views in explorer, but doesn't load in Inkscape.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment