Home

This wiki gives an introduction to the necessary languages and libraries to use d3. It assumes you know how to program in a C-like language (C or Java) and/or python and/or a functional language (racket/scheme/lisp in particular).

Table of Contents:

• HTML: Hypertext Markup Language is the file format for web pages. Officially, the content and structure of a web page goes in the HTML file, but not the appearance. Appearance information is supposed to be stored in CSS files in mode web pages. However, HTML files usually also store a lot of appearance information; partly this is because HTML had lots of support for storing appearance before CSS was created, and partly because it is often more convenient to put it directly in HTML. HTML isn't a programming language--it doesn't have variables, if statements, etc.--so the logic to create any kind of interactivity has to be written in javascript.
• SVG: Scalable Vector Graphics are a file format for describing illustrations, including shapes like circles, rectangles, and arbitrary curves. You can create SVG images using applications like Adobe Illustrator or Inkscape, and you can also write them from scratch in a text editor. The SVG format looks a lot like HTML; in the context of a web page, you can treat it as a part of HTML and incorporate SVG directly into you HTML file. You can also represent the appearance of SVG files in CSS just like HTML.
• CSS: Cascading Style Sheets is the file format for encoding the appearance of web pages. In theory, a web page includes a link to the associate CSS file(s), which specify things like color, font, and positioning.
• Javascript: Javascript is the programming language understood by web browsers. If you want any kind of interactivity in a web page, it gets written in javascript. Most programming languages are carefully designed to be consistent and unambiguous, then get messy over time as features get added. Javascript was not designed at all, and serious design work started about 15 years after the language was created. As a result, modern javascript is cleaner and far more usable than "legacy" javascript. But all of legacy javascript still exists in the language, and care is required to avoid it. Most code that is more than a couple of years old is anathema to modern javascript, so be careful about modeling your own javascript on existing code. Fortunately, there are excellent tools to automatically check your javascript as you write it and enforce good, "modern" javascript.
• DOM: The Document Object Model is the javascript representation of your web page, including both HTML and CSS. It's the interface that javascript uses to manipulate the web page so you get interactivity. It's an enormous pain in the neck to use, so most complex web sites use one of a variety of javascript libraries that simplify the connection between your javascript and your web page. React, Vue, Angular2, and, for data visualization, d3, are all examples of such libraries. All of them maintain a connection between your web page and variables in your javascript code so you can change the page contents simply by changing the values of variables.
• d3: This is what you're aiming for! d3 is a javascript library that makes the a few things easier:
  • Manipulate the structure of your web page to add, remove, or modify elements in interactive ways.
  • Connect the structure of your web page to variables in your code, including arrays. For example, you can easily connect the bars in a graph to an array of values so that the sizes and number of bars are determined by the array.
  • Update the data bindings for your visualization in a way that minimizes the teardown and creation of HTML and SVG elements in order to maximize performance.
  • Lots of helpful functions to create elements of graphs and other visualizations, including axes, transitions, and carefully designed color palettes.
  • d3 does not create visualizations for you--you still use SVG for that--but it makes it much easier to create them and to add polish and interactivity.