Introduction to D3

This tutorial is in response to a request by someone who wanted a basic introduction to D3. I've never used D3 before, but I've learned a bit about it so far and this is just an introduction to get you started anyways.

Basically, what I've found is that D3 is a lot like JQuery in many regards. You can select existing (and not-yet-existing) elements, manipulate them graphically, perform animations, etc. The best aspect of D3 seems to be that although the learning curve is rather steep for anyone who's a beginning coder, it actually ends up making most tasks of displaying/arranging data on a web page very simple and easy - you just have to know how. :)

Changing Page Content with JQuery

This tutorial is in response to a specific request by someone. Here is the summarized version of their request:

How would you use JQuery to create an image that changes when the mouse is over it and also changes the content (text/image(s)) in a different section of the page dynamically (without refreshing the page)?

In order to change page content with JQuery, you must first import JQuery and know the basics of how to use it, all of which I discussed here.


We will also need two images to test this out with and a section of content to change dynamically when the mouse moves over and out of this image. Here is the code we will use for our initial image: