D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
akeshavan
Full window
Github gist
Step04 Neurohackweek
<!DOCTYPE html> <html lang="en"> <head> <title> Neurohackweek 2017 D3 Tutorial </title> <!-- Style definitions will go in the <style> tags --> <style> .bar { background: steelblue; height: 30px; margin: 5px; color: white; text-align: right; padding-right: 5px; padding-top: 5px; } </style> </head> <!-- Content goes in the body --> <body> <h1> Hello World </h1> <p> This is a paragraph </p> <a href="https://www.google.com"> here is a link </a> <h3> My first bar graph with div elements</h3> <div class="bar" style="width: 100px;">100</div> <div class="bar" style="width: 150px;">150</div> <div class="bar" style="width: 60px;">60</div> </body> <!-- Import Javascript files here--> <script src="js/d3.min.js"></script> <script src="js/jquery.min.js"></script> <script> var newdiv = document.createElement("div"); newdiv.className = "bar"; newdiv.style.width = "80px"; newdiv.appendChild(document.createTextNode("80")); document.body.appendChild(newdiv); var myElements = document.getElementsByClassName("bar") for (i=0; i<myElements.length; i++){ myElements[i].addEventListener("click", function(e){ e.target.style.background = "black" // change the style of the clicked element }) } </script> </html>