Wednesday, 12 March 2014

D3 and Javascript

D3 allows you to create "an interactive SVG bar chart with smooth transitions and interaction."
I want to be able to do that!

Let's see if I can work through a tutorial...

Start with:
'Let's Make a Bar Chart'

Mmm, assumes you know how to edit a web page - well maybe...
assumes you know how to include d3.js on the page - well no!

Going back to Javascript
                     http://www.w3schools.com/js
interesting command:
changing output:
    document.write("Hello world")

buttons
    <button type="button" onclick="alert('You fool')">Don't Click Me!</button>


getting buttons to change things:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can change the content of an HTML element.
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // Find the element
x.innerHTML="Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>


Key line here is
document.getElementById("some id"). This is defined in the HTML DOM.

changing images too. 
Clever - I like it. 

Question again - how do I put this in a web page. I need the image and the like. 

I could create a website with wix.com to try out some Javascript...

Let's go back to D3 and have a little work through even if I can't understand everything...

Hmm, a bit of work to do here.
However, I would really like to master some of this stuff to get an interactive graphic on a web page....
Do I need to buy another book?
Perhaps one on D3?

No comments:

Post a Comment