D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
macarissa
Full window
Github gist
Module 2 Tree Census plus SVG
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tree Census CSV with D3</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <p>Fancy trees made in Illustrator!</p> <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 546.8 223.8" enable-background="new 0 0 546.8 223.8" xml:space="preserve"> <rect x="118.8" y="86.1" width="19.3" height="119.8"/> <rect x="202.3" y="84.2" width="11.8" height="105.2"/> <rect x="301.3" y="111.3" width="14.2" height="105.2"/> <rect x="387.3" y="93.4" width="24.9" height="105.2"/> <rect x="451.1" y="74.1" width="12.5" height="98.3"/> <ellipse fill="#009245" cx="80.8" cy="80.7" rx="70" ry="37"/> <ellipse fill="#009245" cx="144.6" cy="50.5" rx="55.8" ry="35.8"/> <ellipse fill="#009245" cx="247.6" cy="77.5" rx="55.8" ry="35.8"/> <ellipse fill="#009245" cx="306.6" cy="54.5" rx="55.8" ry="35.8"/> <ellipse fill="#009245" cx="309.6" cy="98.5" rx="55.8" ry="35.8"/> <ellipse fill="#009245" cx="396.6" cy="119.5" rx="55.8" ry="35.8"/> <ellipse fill="#009245" cx="463.6" cy="98.4" rx="55.8" ry="28.7"/> <ellipse fill="#009245" cx="390.6" cy="74.8" rx="55.8" ry="30.1"/> <ellipse fill="#009245" cx="460.3" cy="49.2" rx="61.1" ry="41.1"/> <ellipse fill="#009245" cx="174.6" cy="77.6" rx="55.8" ry="24.8"/> <ellipse fill="#009245" cx="219.6" cy="117.6" rx="55.8" ry="24.8"/> <ellipse fill="#009245" cx="275" cy="126.7" rx="30.2" ry="14"/> <ellipse fill="#009245" cx="118.8" cy="98.4" rx="62.1" ry="45.7"/> <g> <path d="M112.3,66c0.9,0,1.5,0.7,1.5,1.5v0.8c2.1,0.3,3.9,0.9,5.6,2c0.6,0.3,1.1,0.9,1.1,1.7c0,1.1-0.9,2-2,2 c-0.4,0-0.7-0.1-1.1-0.3c-1.3-0.8-2.5-1.3-3.7-1.6V79c5.5,1.4,7.8,3.6,7.8,7.4c0,4-3.1,6.6-7.7,7v2.2c0,0.9-0.7,1.5-1.5,1.5 s-1.6-0.7-1.6-1.5v-2.2c-2.7-0.3-5.2-1.3-7.4-2.8c-0.6-0.4-1-1-1-1.7c0-1.1,0.9-2,2-2c0.4,0,0.9,0.1,1.2,0.4 c1.7,1.2,3.3,2.1,5.3,2.4v-7.1c-5.3-1.4-7.7-3.3-7.7-7.4c0-3.9,3.1-6.5,7.6-6.9v-0.8C110.7,66.7,111.4,66,112.3,66z M110.8,78.2 v-6.4c-2.3,0.2-3.5,1.4-3.5,3C107.4,76.4,108.1,77.3,110.8,78.2z M113.7,83.2v6.6c2.3-0.3,3.6-1.4,3.6-3.1 C117.2,85.1,116.4,84.1,113.7,83.2z"/> <path d="M135,66c0.9,0,1.5,0.7,1.5,1.5v0.8c2.1,0.3,3.9,0.9,5.6,2c0.6,0.3,1.1,0.9,1.1,1.7c0,1.1-0.9,2-2,2c-0.4,0-0.7-0.1-1.1-0.3 c-1.3-0.8-2.5-1.3-3.7-1.6V79c5.5,1.4,7.8,3.6,7.8,7.4c0,4-3.1,6.6-7.7,7v2.2c0,0.9-0.7,1.5-1.5,1.5s-1.6-0.7-1.6-1.5v-2.2 c-2.7-0.3-5.2-1.3-7.4-2.8c-0.6-0.4-1-1-1-1.7c0-1.1,0.9-2,2-2c0.4,0,0.9,0.1,1.2,0.4c1.7,1.2,3.3,2.1,5.3,2.4v-7.1 c-5.3-1.4-7.7-3.3-7.7-7.4c0-3.9,3.1-6.5,7.6-6.9v-0.8C133.4,66.7,134.2,66,135,66z M133.6,78.2v-6.4c-2.3,0.2-3.5,1.4-3.5,3 C130.1,76.4,130.8,77.3,133.6,78.2z M136.4,83.2v6.6c2.3-0.3,3.6-1.4,3.6-3.1C140,85.1,139.2,84.1,136.4,83.2z"/> </g> <g> <path d="M386.6,87.6c0.7,0,1.2,0.6,1.2,1.3v0.7c1.7,0.2,3.1,0.8,4.5,1.7c0.5,0.3,0.9,0.7,0.9,1.5c0,1-0.7,1.7-1.6,1.7 c-0.3,0-0.6-0.1-0.9-0.3c-1-0.7-2-1.1-3-1.4v6c4.4,1.2,6.2,3.1,6.2,6.4c0,3.4-2.5,5.7-6.1,6v1.9c0,0.7-0.5,1.3-1.2,1.3 s-1.3-0.6-1.3-1.3v-1.9c-2.2-0.2-4.1-1.1-5.9-2.4c-0.5-0.3-0.8-0.8-0.8-1.5c0-1,0.7-1.7,1.6-1.7c0.3,0,0.7,0.1,0.9,0.3 c1.4,1.1,2.7,1.8,4.3,2.1v-6.1c-4.2-1.2-6.1-2.9-6.1-6.4c0-3.3,2.4-5.6,6-5.9v-0.7C385.4,88.2,385.9,87.6,386.6,87.6z M385.5,98.2 v-5.5c-1.8,0.2-2.8,1.2-2.8,2.6C382.7,96.6,383.3,97.4,385.5,98.2z M387.8,102.5v5.6c1.8-0.2,2.8-1.2,2.8-2.7 C390.6,104.1,390,103.2,387.8,102.5z"/> <path d="M404.8,87.6c0.7,0,1.2,0.6,1.2,1.3v0.7c1.7,0.2,3.1,0.8,4.5,1.7c0.5,0.3,0.9,0.7,0.9,1.5c0,1-0.7,1.7-1.6,1.7 c-0.3,0-0.6-0.1-0.9-0.3c-1-0.7-2-1.1-3-1.4v6c4.4,1.2,6.2,3.1,6.2,6.4c0,3.4-2.5,5.7-6.1,6v1.9c0,0.7-0.5,1.3-1.2,1.3 s-1.3-0.6-1.3-1.3v-1.9c-2.2-0.2-4.1-1.1-5.9-2.4c-0.5-0.3-0.8-0.8-0.8-1.5c0-1,0.7-1.7,1.6-1.7c0.3,0,0.7,0.1,0.9,0.3 c1.4,1.1,2.7,1.8,4.3,2.1v-6.1c-4.2-1.2-6.1-2.9-6.1-6.4c0-3.3,2.4-5.6,6-5.9v-0.7C403.5,88.2,404.1,87.6,404.8,87.6z M403.6,98.2 v-5.5c-1.8,0.2-2.8,1.2-2.8,2.6C400.9,96.6,401.4,97.4,403.6,98.2z M405.9,102.5v5.6c1.8-0.2,2.8-1.2,2.8-2.7 C408.8,104.1,408.1,103.2,405.9,102.5z"/> </g> <g> <path d="M234.5,77.5c1.1,0,1.9,0.8,1.9,1.9v1c2.6,0.3,4.8,1.1,6.9,2.4c0.7,0.4,1.3,1.1,1.3,2.1c0,1.4-1.1,2.4-2.5,2.4 c-0.4,0-0.9-0.1-1.3-0.4c-1.5-0.9-3.1-1.6-4.6-1.9v8.5c6.7,1.7,9.6,4.4,9.6,9.1c0,4.9-3.8,8.1-9.4,8.6v2.7c0,1.1-0.8,1.9-1.9,1.9 s-1.9-0.8-1.9-1.9v-2.7c-3.3-0.4-6.4-1.5-9.1-3.5c-0.8-0.5-1.2-1.2-1.2-2.1c0-1.4,1.1-2.4,2.4-2.4c0.5,0,1.1,0.2,1.5,0.5 c2.1,1.5,4.1,2.5,6.5,3v-8.7c-6.5-1.7-9.5-4.1-9.5-9.1c0-4.7,3.8-8,9.3-8.4v-0.9C232.5,78.3,233.4,77.5,234.5,77.5z M232.7,92.6 v-7.8c-2.8,0.3-4.2,1.8-4.2,3.7C228.5,90.3,229.3,91.5,232.7,92.6z M236.2,98.7v8.1c2.8-0.3,4.4-1.7,4.4-3.8 C240.6,101,239.6,99.8,236.2,98.7z"/> </g> <g> <path d="M307.9,56.7c0.9,0,1.5,0.7,1.5,1.5v0.8c2.1,0.3,3.9,0.9,5.6,2c0.6,0.3,1.1,0.9,1.1,1.7c0,1.1-0.9,2-2,2 c-0.4,0-0.7-0.1-1.1-0.3c-1.3-0.8-2.5-1.3-3.7-1.6v6.9c5.5,1.4,7.8,3.6,7.8,7.4c0,4-3.1,6.6-7.7,7v2.2c0,0.9-0.7,1.5-1.5,1.5 c-0.9,0-1.6-0.7-1.6-1.5v-2.2c-2.7-0.3-5.2-1.3-7.4-2.8c-0.6-0.4-1-1-1-1.7c0-1.1,0.9-2,2-2c0.4,0,0.9,0.1,1.2,0.4 c1.7,1.2,3.3,2.1,5.3,2.4v-7.1c-5.3-1.4-7.7-3.3-7.7-7.4c0-3.9,3.1-6.5,7.6-6.9v-0.8C306.3,57.4,307.1,56.7,307.9,56.7z M306.5,69 v-6.4c-2.3,0.2-3.5,1.4-3.5,3C303,67.2,303.7,68.1,306.5,69z M309.3,74v6.6c2.3-0.3,3.6-1.4,3.6-3.1 C312.9,75.9,312.1,74.9,309.3,74z"/> </g> <g> <path d="M458.5,50.1c0.9,0,1.5,0.7,1.5,1.5v0.8c2.1,0.3,3.9,0.9,5.6,2c0.6,0.3,1.1,0.9,1.1,1.7c0,1.1-0.9,2-2,2 c-0.4,0-0.7-0.1-1.1-0.3c-1.3-0.8-2.5-1.3-3.7-1.6v6.9c5.5,1.4,7.8,3.6,7.8,7.4c0,4-3.1,6.6-7.7,7v2.2c0,0.9-0.7,1.5-1.5,1.5 c-0.9,0-1.6-0.7-1.6-1.5v-2.2c-2.7-0.3-5.2-1.3-7.4-2.8c-0.6-0.4-1-1-1-1.7c0-1.1,0.9-2,2-2c0.4,0,0.9,0.1,1.2,0.4 c1.7,1.2,3.3,2.1,5.3,2.4v-7.1c-5.3-1.4-7.7-3.3-7.7-7.4c0-3.9,3.1-6.5,7.6-6.9v-0.8C456.9,50.8,457.6,50.1,458.5,50.1z M457.1,62.4V56c-2.3,0.2-3.5,1.4-3.5,3C453.6,60.5,454.3,61.5,457.1,62.4z M459.9,67.4v6.6c2.3-0.3,3.6-1.4,3.6-3.1 C463.5,69.2,462.7,68.2,459.9,67.4z"/> </g> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("DataVis_TreeCensus2.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