Where we're going

Our goal is to end up with something that looks like this.

What is HTML?

HyperText Markup Language (HTML) is the standard markup language used to create webpages.

An HTML document is a plain text document with an .html extension that consists of elements enclosed in <>.

Here is what a very standard site might look like: 




	
Hello world!
Hello world!

What's a div?

One of the most basic building blocks of HTML pages is the div. A div is essentially a rectangular block. Here's an example of one:

Let's make a basic bar chart

With just a set of div elements, we can actually make a bar chart appear on a page.

Styling with CSS

Cascading Style Sheets (CSS) enable you to apply styles to elements of the same type or of the same class or ID.

They are intended to enable the separation of document content from document presentation. Here's how I applied styling to all the bars in the bar chart at once.

HTML5 and the SVG

With the advent of HTML5 came the Scalable Vector Graphic (SVG). The SVG is a canvas for creating graphics like lines/paths, rectangles, and circles.

D3.js relies on the SVG to create graphics that can scale to the size of our data. Here's an example.

D3 is Javascript

Javascript is considered the language of the web. It has been around for a while (it was first developed at Netscape in the 90's) and is now used on essentially any web page you might visit. For example, this presentation was made with Reveal.js.

To load some javascript include a reference to the script file in your HTML document:

Keep in mind that like a HTML, a javascript document is simply a plain text document written in javascript with a .js extension.

We now have something that looks like

Hmm...
We now have something that looks like

...better, but we still need our axes!
We now have something that looks like

Now we're cooking!
We now have something that looks like

Not too shabby!

Let's recap

Our HTML file should look like 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
	background-color: black;
	font: 10px sans-serif;
	margin-left: 10%;
}

.bar {
    fill: #3690c0;
}

.bar:hover {
    fill: #fc4e2a;
}
    
.axis {
    font: 12px sans-serif;
    fill: #fff;
}

.axis path,
.axis line {
    fill: none;
    stroke: #969696;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}
</style>
    <body>
        <div>Behold, a bar chart!</div>
        <div class="barchart_step1"></div>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
         <script type="text/javascript" src="js/barchart_step1.js"></script>
    </body>
</html>
We now have something that looks like

Cool!
We now have something that looks like

Bingo!

Let's recap

Our HTML file should look like 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
	background-color: black;
	font: 10px sans-serif;
	margin-left: 10%;
}

.bar {
    fill: #3690c0;
}

.bar:hover {
    fill: #fc4e2a;
}
    
.axis {
    font: 12px sans-serif;
    fill: #fff;
}

.axis path,
.axis line {
    fill: none;
    stroke: #969696;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}
</style>
    <body>
        <div>Behold, a bar chart!</div>
        <div class="barchart_step1"></div>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
         <script type="text/javascript" src="js/barchart_step1.js"></script>
    </body>
</html>