D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
DigitalSplashMedia
Full window
Github gist
UN Human Development Bubble Chart Test
<!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> <style type="text/css"> body { background-color: #ffffff; } svg { background-color: white; } </style> </head> <body> <H1>My SVG Image</H1> <p>Prototype of a bubble chart</p> <P>Open the console to verify that D3 has loaded the .csv file, data from the UN Human Development Index</P> <svg width="800" height="500" xmlns="https://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="0" y2="500" stroke="red" stroke-width="3" /> <line x1="0" y1="500" x2="800" y2="500" stroke="red" stroke-width="3" /> <circle cx="300" cy="140" r="50" style="fill: rgb(0, 255, 0); fill-opacity: 0.8;" /> <text x="300" y="140" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">A</text> <circle cx="742" cy="260" r="30" style="fill: rgb(255, 0, 0); fill-opacity: 0.8;" /> <text x="742" y="260" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">B</text> <circle cx="465" cy="250" r="35" style="fill: rgb(0, 0, 255); fill-opacity: 0.8;" /> <text x="465" y="250" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">C</text> <circle cx="666" cy="257" r="25" style="fill: rgb(255, 255, 0); fill-opacity: 0.8;" /> <text x="666" y="257" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">D</text> <circle cx="507" cy="295" r="20" style="fill: rgb(255, 0, 255); fill-opacity: 0.8;" /> <text x="507" y="295" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">E</text> <circle cx="764" cy="250" r="35" style="fill: rgb(0, 255, 155); fill-opacity: 0.8;" /> <text x="764" y="250" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">F</text> <circle cx="52" cy="444" r="35" style="fill: rgb(126, 0, 0); fill-opacity: 0.8;" /> <text x="52" y="444" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">G</text> <circle cx="614" cy="253" r="40" style="fill: rgb(0, 126, 0); fill-opacity: 0.8;" /> <text x="614" y="253" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">H</text> <circle cx="720" cy="97" r="30" style="fill: rgb(0, 0, 125); fill-opacity: 08;" /> <text x="720" y="97" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">I</text> <circle cx="288" cy="340" r="25" style="fill: rgb(125, 125, 0); fill-opacity: 0.8;" /> <text x="288" y="340" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">J</text> <circle cx="592" cy="248" r="25" style="fill: rgb(125, 0, 125); fill-opacity: 0.8;" /> <text x="592" y="248" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">K</text> <circle cx="663" cy="171" r="25" style="fill: rgb(0, 125, 125); fill-opacity: 0.8;" /> <text x="663" y="171" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">L</text> <circle cx="673" cy="333" r="25" style="fill: rgb(255, 125, 125); fill-opacity: 0.8;" /> <text x="673" y="333" text-anchor="middle" style="font-size: 10px; font-family: Arial, Helvetica;">M</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("UN-Human-Development-Series-2013.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