HyperText Markup Language (HTML) provides the basic skeleton for our visualization. An HTML document will define the structure of our web page, based on a series of tags, which are labels inside angle brackets (<br/>) commonly coming in pairs (<p>...</p>). D3 will take advantage of the structure of HTML by creating new elements in the document structure, such as adding new div tags (which defines a section in a document). We can see the basic structure of an HTML document in the previous screenshot.

Document Object Model (DOM) helps in representing and interacting with objects in HTML documents. Objects in the DOM tree can be addressed and manipulated by programming languages such as Python or JavaScript through the elements (tags) of the web page. D3 will change the structure of the HTML document by accessing the DOM tree either by the element ID or its type.

Cascading Style Sheets (CSS) can help us to style the web page. A CSS style is based on rules and selectors. We can apply styles to a specific element (tag) through selectors. An example of CSS is shown as follows:

<style>
body {
  font: 10px arial;
}
</style>

JavaScript is a dynamic scripting programming language typically implemented in the client (web browser). All the code in D3.js is developed with JavaScript. JavaScript will help us to create great visualizations, with full interactivity which can be updated in real time. In D3.js we can link to the library directly (stored in a separate file) with the snippet listed as follows:

<script src="http://d3js.org/d3.v3.min.js"></script>

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. SVG can be directly included in your web page. SVG provides basic shape elements such as rectangle, line, circle, and text to build complicated lines and shapes inside a canvas. Much of the success of D3 is because it implements a wrapper for SVG. With D3 we will not have to modify the XML directly, instead D3 provides an API to help us place our elements (rectangle, circle, line, and so on) in the correct location on the canvas.