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!
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:
With just a set of div
elements, we can actually make a bar chart appear on a page.
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.
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.
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.
<!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>
<!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>