When I first started exploring D3, I focused on projects. I followed a few tutorials by awesome D3 programmers such as Curran Kelleher's 13-hour D3.js course and Shirley Wu's Introduction to D3.js. I learned to make bar charts, represent data on maps, and represent weather data with cool flower icons that I designed myself. But although I could build stuff, I really didn't feel like I had a strong grasp of how D3 actually worked, because I had jumped straight to projects without focusing on the basics. In this series, I hope to help others avoid this pitfall.
While there are a number of other libraries and frameworks that can allow us to visualize data, D3 is a great choice because it is so flexible, and the possibilities for visualization are virtually endless.
To get started, we need to learn a few basic D3 methods that will allow us to interact with the DOM (Document Object Model). We will learn how to select elements, add elements, and remove elements.
The first method is the
select method. The
select method allows us to select and return a node from the DOM by specifying its tag name, class, or id (among other properties). We can return a node that already exists, or return a new node.
select Syntax Examples:
d3.select("h1"); //selects the node with the <h1> tag d3.select("div.header"); //selects the <div> element with the class "header" d3.select("#root"); //selects the node with the id "root"
We will primarily be using select in order to select a node, and then apply a number of methods to it to transform the contents and style of that node.
Similar to the
select method, the
selectAll method allows us to return a collection of nodes from the DOM, and then apply methods to the entire collection. Again, this method can return a collection of existing nodes, or select new nodes that do not yet exist.
selectAll Syntax Examples:
d3.selectAll("p"); //selects all of the nodes with the <p> tag d3.selectAll("div.summary"); //selects all of the <div> elements with the class "summary"
append method is used to add an element to an already selected node. By default, the new element will be added at the bottom of the selected node, but additional selectors can be used to specify where exactly the new element should be added.
append Syntax Examples:
d3.select("div") .append("p"); //selects the node with the <div> tag and adds a <p> tag as its child d3.selectAll("div.summary") .append("p .summary_text"); //selects all of the <div> elements with the class "summary", and adds a <p> tag with the class "summary_text" as its child
As expected, the
remove method can be used to remove an element (or elements) that have been selected.
remove Syntax Examples:
d3.selectAll("p") .remove(); //selects all of the nodes with the <p> tag, and removes them from the DOM d3.select("div#summary") .remove(); //selects the <div> element with the class "summary", and removes it from the DOM
text method is used to set the text content of an element. It can take in an argument of a simple string, or a function that can be evaluated to set text dynamically.
text Syntax Examples:
d3.select("p") .text("New Text!"); //selects the <p> tag and sets (or resets) the text to "New Text!" d3.selectAll("h3") .text("Summary"); //selects all of the <h3> elements and sets (or resets) the text to "Summary"
These are just a few of the basic methods for selecting and modifying DOM elements, and there are many more in the documentation.
To learn more about these methods, consult the D3.js Documentation at the links below: