D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
pamtobey
Full window
Github gist
SVG with csv data
<!DOCTYPE html> <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