Join Ray Villalobos for an in-depth discussion in this video Creating meaningful color scales, part of D3.js: Data Visualization.
…So, right now our chart uses a single color.…And most of the time, that's fine, but…we can also make the color more meaningful since we know a lot about how skills work.…So, I'm going to start by making the height of our data,…be mapped to a range of colors.…And we can do that by creating a scale that works with color values.…So, I'm going to go ahead and create another variable right here called colors,…and set that up to be d3.scale.linear.…And this one is going to have a domain that is…going to be pretty much relevant to the height of the data.…
So, the bigger the value of the data, the more towards one color it will go, so…it's going to be kind of the same as this.…So let me go ahead and…copy that one, and the range is going to just be a couple of colors.…So the range, I'll put in two colors here.…And my first color is going to be an orange color, so FFB832.…And then my second color is going to be a pink, so C61C6F.…And let's go ahead and save that.…
And then down here where we apply the color.…So here is where we create this fill.…
- 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.