D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
sstrool
Full window
Github gist
Best Selling Artists Module 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <p>Loading data with d3.csv; try looking in the console!</p> <svg width="640" height="480" xmlns="https://www.w3.org/2000/svg"> <g> <title>Layer 2</title> <circle id="svg_30" r="41.216835" cy="163.61111" cx="585" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#ffff00"/> </g> <g> <title>Layer 1</title> <rect id="svg_25" height="82" width="80" y="146" x="17" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#000000"/> <rect id="svg_26" height="86" width="80" y="142.333333" x="70" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#3f3f3f"/> <rect id="svg_27" height="90" width="86" y="138.333333" x="127" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#7f7f7f"/> <rect id="svg_28" height="82" width="424.000015" y="142.666667" x="180" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#0000ff"/> <text transform="rotate(5 384.2676696777342,185.2803802490234) matrix(2.446425905739151,0,0,1,-198.97555305481515,0) " xml:space="preserve" text-anchor="middle" font-family="Cursive" font-size="24" id="svg_29" y="194.948782" x="238.410379" stroke-linecap="square" stroke-linejoin="round" stroke-width="0" stroke="null" fill="#aaffff">Scott Strool</text> <circle id="svg_31" r="2.003084" cy="137.777778" cx="552.222222" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="null" fill="#ffff00"/> </g> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("bestsellingartists.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