Join Ray Villalobos for an in-depth discussion in this video Controlling text nodes, part of Data Visualization with D3.js.
…So it's time to finish up this layout,…I'm going to start by adding some text elements to these dots right here.…So I'm going to scroll down to the place right here where I append the circles.…And I'm going to modify this so that I append some text, so…node.append and this will be an SVG text element.…And then I want to add some text, so…this is the text method that lets me add something.…And this is just going to be a function that takes…in some data and just returns the data name.…
So, that should give me the name of each of the nodes right?…So then the nodes are the data that we created up here, it's at the same,…the name parameter, and…then right after that if I want to I can add some formatting.…So I can say attribute and…then font family if I want to, and I imported a couple of fonts.…I think the default one is called Exo 2, and the other one is called Roboto Slab.…So if we change that, it changes to that font.…
Now that is in my original base CSS file.…I'm importing Exo 2 and Roboto Slab from Google Fonts.…
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts
Skill Level Intermediate
1. Setting Up and Installing
What is D3.js?3m 18s
2. Learning the Basics
3. Working with SVG Graphics
4. Using D3 Methods
5. Using Data
6. Working with Layouts
Next steps2m 2s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.