This video explains how to add text and why text is sort of a shape.
- [Instructor] In theory, all you need to add text…to your SVG is the text itself…because browsers default thex and y coordinates to zero.…So let's do that now.…Svg.append("text").…Now, to actually set what's inside the text,…we use .text rather than .attribute,…and we can set the text to hello world!,…as that is tradition, I think,…and then go back to Firefox and refresh.…And we cannot see anything.…You may be spotting a theme here.…
Often when you're writing with D3 code,…you add an element and can't see it,…and as I've mentioned, the first thing to do…is check for DOM.…So there we go.…We have got a text.…And if you can see in the very top left corner of the screen…when I'm hovering on that,…there's a little blue rectangle up there.…Now, what's happened is that the text has been added…at coordinates of zero, zero because we didn't specify them…to be anything different.…When we positioned a rectangle earlier,…the x and the y coordinates affected the top left…of the rectangle, and with the circle,…the x and the y coordinates worked…
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
Data Visualization for Data Analystswith Bill Shander1h 31m Beginner
Learning Data Visualization (2014)with Bill Shander3h 41m Beginner
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.