D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
daryadm
Full window
Github gist
Russian SAT subject test participants count by region
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test SVG and CSV</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; } p { font-size: 38px; color: #9696FF; line-height: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; padding: 5px; } </style> </head> <body> <p> Csv could be found in console </p> <svg width="580px" height="580px"> <radialGradient id="SVGID_1_" cx="290" cy="290" r="270" gradientUnits="userSpaceOnUse"> <stop offset="0.2" style="stop-color:#FFFFFF"/> <stop offset="0.3" style="stop-color:#F8F4F9"/> <stop offset="0.4" style="stop-color:#E5D8EA"/> <stop offset="0.6" style="stop-color:#C6AAD1"/> <stop offset="0.8" style="stop-color:#9C6BAF"/> <stop offset="1" style="stop-color:#7F3F97"/> </radialGradient> <circle fill="url(#SVGID_1_)" stroke="#FFFFFF" cx="290" cy="290" r="290"/> <text x="150" y="100" fill="white" font-size="30" font-weight="bold" font-family="Helvetica">The geometric poodle</text> <rect x="465" y="300" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 576.8599 881.4637)" fill="#9696FF" stroke="#9696FF" stroke-width="4" width="15" height="45"/> <ellipse transform="matrix(0.866 0.5 -0.5 0.866 273.5423 -152.9395)" fill="#8D00FC" cx="420" cy="430" rx="13" ry="40"/> <polygon fill="#8D00FC" stroke="#9696FF" points="390,474 409,441 428,474 "/> <ellipse transform="matrix(0.866 -0.5 0.5 0.866 -131.5397 261.4956)" fill="#8D00FC" stroke="#9696FF" stroke-miterlimit="10" cx="420" cy="375" rx="13" ry="40"/> <ellipse fill="#9696FF" cx="130" cy="225" rx="40" ry="18"/> <ellipse fill="#8D00FC" stroke="#9696FF" cx="228" cy="412" rx="13" ry="40"/> <ellipse transform="matrix(0.866 0.5 -0.5 0.866 276.126 -162.5823)" fill="#8D00FC" stroke="#9696FF" cx="440" cy="434" rx="13" ry="40"/> <ellipse fill="#8D00FC" stroke="#9696FF" cx="237.809" cy="416.62" rx="12.766" ry="40.426"/> <ellipse transform="matrix(0.866 -0.5 0.5 0.866 -132.4704 271.9207)" fill="#8D00FC" stroke="#9696FF" cx="440" cy="384" rx="13" ry="40"/> <circle fill="#9696FF" cx="180" cy="168" r="28"/> <circle fill="#9696FF" cx="180" cy="218" r="50"/> <path fill="red" d="M213.637,281.895c-1.952,1.952-5.118,1.953-7.071,0l-13.992-13.992c-1.953-1.953-1.952-5.119,0-7.071 l40.32-40.32c1.952-1.953,5.118-1.953,7.071,0l13.992,13.992c1.953,1.952,1.952,5.118,0,7.071L213.637,281.895z"/> <ellipse fill="#9696FF" stroke="#8D00FC" cx="182" cy="236" rx="34" ry="46"/> <circle fill="#9696FF" cx="410" cy="350" r="50"/> <circle fill="#9696FF" cx="290" cy="320" r="90"/> <circle fill="#9696FF" cx="490" cy="310" r="16"/> <circle cx="103.723" cy="224.357" r="11.443"/> <polygon fill="#540A00" stroke="#AC00FC" points="142.446,200.737 147.303,197.971 147.27,203.56 147.236,209.149 142.413,206.325 137.59,203.502 "/> <polygon fill="#8D00FC" stroke="#9696FF" points="208.579,469.572 227.589,436.646 246.599,469.572 "/> <polygon fill="#8D00FC" stroke="#9696FF" points="218.798,469.572 237.809,436.646 256.818,469.572 "/> <polygon fill="#8D00FC" stroke="#9696FF" points="403.433,474.892 422.443,441.965 441.453,474.892 "/> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("EGE2013_count_students.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