Last active
August 29, 2015 14:17
-
-
Save pamtobey/269865f726f87dbe9e88 to your computer and use it in GitHub Desktop.
My svg chart
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 with SVG Elements</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <p>My SVG image and then CSV of temperature anomolies. </p> | |
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| width="284.512px" height="197.654px" viewBox="0 0 284.512 197.654" enable-background="new 0 0 284.512 197.654" | |
| xml:space="preserve"> | |
| <pattern x="-163.703" y="497.298" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible"> | |
| <g> | |
| <polygon fill="none" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896 "/> | |
| <polygon fill="#F7BC60" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896 "/> | |
| </g> | |
| </pattern> | |
| <rect x="0.297" y="0.297" fill="#8CC63F" stroke="#231F20" stroke-width="0.5945" width="38.534" height="170.652"/> | |
| <rect x="61.664" y="42.428" fill="#FBB040" stroke="#231F20" stroke-width="0.5159" width="38.534" height="128.521"/> | |
| <rect x="184.397" y="130.472" fill="#EF4136" stroke="#231F20" stroke-width="0.2895" width="38.533" height="40.478"/> | |
| <rect x="123.03" y="27.21" fill="#A97C50" stroke="#231F20" stroke-width="0.5456" width="38.535" height="143.739"/> | |
| <rect x="245.763" y="81.558" fill="#29AAE2" stroke="#231F20" stroke-width="0.4303" width="38.534" height="89.391"/> | |
| <text transform="matrix(1 0 0 1 16.6885 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">1</text> | |
| <text transform="matrix(1 0 0 1 78.6445 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">2</text> | |
| <text transform="matrix(1 0 0 1 139.5146 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">3</text> | |
| <text transform="matrix(1 0 0 1 201.4712 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">4</text> | |
| <text transform="matrix(1 0 0 1 266.688 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">5</text> | |
| </svg> | |
| <script type="text/javascript"> | |
| //Load in contents of CSV file | |
| d3.csv("TempAnomolies.csv", function(data) { | |
| //Now CSV contents have been transformed into | |
| //an array of JSON objects. | |
| //Log 'data' to the console, for verification. | |
| console.log(data); | |
| }); </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment