Created
November 30, 2012 21:09
-
-
Save jleonard99/4178632 to your computer and use it in GitHub Desktop.
SVG output from bullets.html http://bl.ocks.org/4061961
This file contains 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
<?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> |
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
SVG created when pulling the inner.HTML from bullets.html example at: http://bl.ocks.org/4061961