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.
Introduction to D3.js
D3.js is a JavaScript library that allows us to manipulate the DOM (Document Object Model) using data. It is often used as a flexible way to represent various types of data in the form of data visualizations. These representations might include bar charts, line graphs, maps...the list goes on. Click here to see a gallery of examples of all of the amazing things you can do with D3!
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.
Using D3 Methods to Manipulate the DOM
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.
Selections
select
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.
selectAll
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"
Modifying Elements
append
The 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
remove
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
The 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:
D3 Documentation:
Top comments (0)