xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3 with SVG Elements</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script><style type="text/css"> svg { background-color: white; } </style> </head> <body> <p>My SVG image and then CSV of temperature anomolies. </p><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js