D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ldaly
Full window
Github gist
Oakland Campaign Finance
<!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> <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <style type="text/css"> body { background-color: #14e7a5; } svg { background-color: #ff2646; } p {font-family: Roboto Slab; text-align: center; } </style> </head> <body> <p>WHAT IS IN THE CONSOLE?!</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("CampaignFinance_MonetaryContributions.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> <svg width=100% height="400"> <polygon points ="10, 10 210, 10 390, 290 10, 80" style="fill: #8C8C8C; stroke: white; stroke-width:1"/> <polygon points ="500 480, 600 480, 390 290" style="fill: #8C8C8C; stroke: white; stroke-width:1"/> <!-- <circle cx="300" cy="140" r="80" fill="white" /> --> <text x="20" y="380" fill="charcoal" font-size="30" font-weight="bold" font-family="Roboto Slab">looking at campaign finance data</text> </svg> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js