D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
1pixelzz
Full window
Github gist
City Park Data
<!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> <svg width="1260" height="600"> <rect x="101.9" y="324.7" fill="#2D302F" width="800" height="3.4"/> <rect x="24.7" y="245.1" fill="#2D302F" width="885" height="3.4"/> <rect x="109" y="408.7" fill="#2D302F" width="708.4" height="3.4"/> <rect x="165.3" y="157.6" fill="#2D302F" width="595.8" height="3.4"/> <rect x="264.7" y="96.7" fill="#2D302F" width="3" height="369.6"/> <rect x="347.5" y="70" fill="#2D302F" width="3.4" height="460"/> <rect x="604.8" y="70" fill="#2D302F" width="3.4" height="460"/> <rect x="429.7" y="90" fill="#2D302F" width="3.4" height="395"/> <rect x="278" y="274.8" fill="#D3AC33" width="114.1" height="114.1"/> <rect x="585.9" y="113.5" fill="#D3AC33" width="78.7" height="78.7"/> <rect x="489.6" y="392.2" fill="#D3AC33" width="60.9" height="60.9"/> <rect x="303.7" y="431.5" fill="#6DA799" width="74.7" height="74.7"/> <rect x="391.5" y="88.9" fill="#6DA799" width="83" height="83"/> <rect x="560.1" y="304.3" fill="#6DA799" width="83" height="83"/> <rect x="803.2" y="226.3" fill="#6DA799" width="45.7" height="45.7"/> <rect x="129.1" y="227.9" fill="#6DA799" width="43.6" height="43.6"/> <rect x="388.7" y="380.6" fill="#868C36" width="79" height="79"/> <rect x="141.5" y="290.9" fill="#2D302F" width="79" height="79"/> <rect x="321.9" y="141.9" fill="#2D302F" width="43.7" height="43.7"/> <rect x="494.2" y="310.1" fill="#2D302F" width="43.7" height="43.7"/> <rect x="591.7" y="227.3" fill="#2D302F" width="38.2" height="38.2"/> <rect x="653.8" y="376.6" fill="#2D302F" width="73.9" height="73.9"/> <rect x="226.8" y="217.5" fill="#868C36" width="60.4" height="60.4"/> <rect x="450" y="181.8" fill="#868C36" width="117.2" height="117.2"/> <rect x="681.2" y="305.7" fill="#868C36" width="49.4" height="49.4"/> <rect x="402.4" y="284.5" fill="#DD5126" width="61.3" height="61.3"/> <rect x="676.5" y="213.5" fill="#DD5126" width="78.7" height="78.7"/> <rect x="223.8" y="380.6" fill="#DD5126" width="61.3" height="61.3"/> <rect x="229.8" y="124.2" fill="#DD5126" width="61.3" height="61.3"/> <rect x="505" y="126.2" fill="#DD5126" width="45.7" height="45.7"/> <rect x="362" y="205.5" fill="#83683F" width="55" height="55"/> <rect x="776.5" y="299" fill="#83683F" width="61.7" height="61.7"/> <rect x="573.9" y="433.6" fill="#83683F" width="61.7" height="61.7"/> <rect x="58" y="302.1" fill="#83683F" width="43.9" height="43.9"/> <circle fill="#2D302F" cx="890" cy="328.7" r="15.4"/> <circle fill="#2D302F" cx="24.7" cy="245.1" r="15.4"/> <circle fill="#2D302F" cx="431.4" cy="500" r="15.4"/> <text x="50" y="50" fill="charcoal" font-size="36" font-weight="bold" font-family="Helvetica">Scalable Vector Graphics</text> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Map_Parks.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