D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
clairepapu
Full window
Github gist
Apples, bananas, grapes, oranges... What's your favorite?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>What's Your Favorite Fruit?</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; background-color: #FFFF99; padding: 10px; } h1 { font-size: 36px; font-weight: normal; } h2 { font-size: 24px; font-weight: normal; } text { font-family: verdana; } svg { background-color: dimgray;} </style> </head> <body> <script type="text/javascript"> //Load in contents of CSV file d3.csv("fruits-by-race-uploaded-to-gist-FINAL.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> <h1 align="left"> Apples, bananas, grapes, oranges-- <em>What's your favorite?</em> </h1> <div align="center"> <svg width="600" height="450"> <circle cx="100" cy="140" r="60" fill="red" /> <text x="40" y="60" fill="white" font-size="22" font-weight="bold" font-family="cambria">Apples</text> <circle cx="480" cy="178" r="75" fill="orange" stroke-width="6" stroke="purple" /> <text x="400" y="90" fill="white" font-size="22" font-weight="bold" font-family="cambria">Oranges</text> <rect x="180" y="120" width="70" height="250" fill="yellow" stroke-width="10" stroke="blue"/> <text x="160" y="100" fill="white" font-size="22" font-weight="bold" font-family="cambria">Bananas</text> <text x="280" y="300" fill="white" font-size="22" font-weight="bold" font-family="cambria">Grapes</text> <line x1="320" y1="100" x2="360" y2="80"> </line> stroke="green" stroke-width="15" /> <line x1="300" y1="190" x2="380" y2="12" stroke="green" stroke-width="25" /> <circle cx="300" cy="178" r="20" fill="violet" stroke-width="2" stroke="white" /> <circle cx="330" cy="190" r="20" fill="violet" stroke-width="2" stroke="white" /> <circle cx="310" cy="100" r="25" fill="violet" stroke-width="2" stroke="white" /> <circle cx="340" cy="220" r="28" fill="violet" stroke-width="2" stroke="white" /> <circle cx="340" cy="130" r="29" fill="violet" stroke-width="2" stroke="white" /> <circle cx="330" cy="245" r="24" fill="violet" stroke-width="2" stroke="white" /> text x="45" y="400" fill="white" font-size="60" font-weight="bold" font-family="Helvetica">imagine</text> <text x="300" y="400" fill="red" font-size="72" font-weight="bold">FRUIT</text> </svg></div> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js