Search⌘ K
AI Features
Home
Courses
Introduction to Visualization Using D3.js

Solution Review: Make a Scale

Explore how to select and implement the correct D3.js scale for discrete input and output data. Learn to configure scaleOrdinal with domain and range functions to map data effectively. Understand best practices including handling invalid inputs for robust visualizations.

We'll cover the following...

Solution

Explanation

Let’s dive into the following explanation to better understand how the above code works.

  • The most important part of this coding challenge is the selection of the correct scale. Both the input and output are discrete, so we have selected the scaleOrdinal scale and initialized it in line 4.
  • In line 5, we have set our domain of the c_scale to the courses array using the domain() function.
  • In line 6, the range of c_scale is initialized to timings using the range() function.
  • Using console.log in line 7, we can see the output of the c_scale on the console.

Note: You can add the unknown function in the solution which will take care of the invalid inputs.