Summary  
This chapter covers how to create and configure a linear scale by defining a domain of input values and a corresponding range of output values to map data to visual properties.  

General domain of usage  
Data visualization

PHN2ZyBpZD0iY2hhcnQiIHdpZHRoPSI1MjAiIGhlaWdodD0iODAiPjwvc3ZnPgoKPHNjcmlwdCBzcmM9Imh0dHBzOi8vZDNqcy5vcmcvZDMudjcubWluLmpzIj48L3NjcmlwdD4KPHNjcmlwdD4KICAvLyBEYXRhIHZhbHVlcyBmcm9tIDAgdG8gMTAwCiAgY29uc3QgZGF0YSA9IFsxMCwgMzAsIDYwLCA5MF07CgogIC8vIENyZWF0ZSBhIGxpbmVhciBzY2FsZSB0byBtYXAgZGF0YSB2YWx1ZXMgdG8gcGl4ZWwgcG9zaXRpb25zCiAgY29uc3QgeFNjYWxlID0gZDMKICAgIC5zY2FsZUxpbmVhcigpCiAgICAuZG9tYWluKFswLCAxMDBdKSAvLyBJbnB1dDogZGF0YSB2YWx1ZXMKICAgIC5yYW5nZShbMjAsIDUwMF0pOyAvLyBPdXRwdXQ6IHBpeGVsIHBvc2l0aW9ucyBvbiB0aGUgU1ZHCgogIGNvbnN0IHN2ZyA9IGQzLnNlbGVjdCgiI2NoYXJ0Iik7CgogIC8vIERyYXcgYSBiYXNlbGluZQogIHN2ZwogICAgLmFwcGVuZCgibGluZSIpCiAgICAuYXR0cigieDEiLCAyMCkKICAgIC5hdHRyKCJ5MSIsIDQwKQogICAgLmF0dHIoIngyIiwgNTAwKQogICAgLmF0dHIoInkyIiwgNDApCiAgICAuYXR0cigic3Ryb2tlIiwgIiNjY2MiKTsKCiAgLy8gRHJhdyBvbmUgY2lyY2xlIHBlciBkYXRhIHBvaW50LCB1c2luZyB0aGUgc2NhbGUgZm9yIGN4CiAgc3ZnCiAgICAuc2VsZWN0QWxsKCJjaXJjbGUiKQogICAgLmRhdGEoZGF0YSkKICAgIC5lbnRlcigpCiAgICAuYXBwZW5kKCJjaXJjbGUiKQogICAgLmF0dHIoImN4IiwgKGQpID0+IHhTY2FsZShkKSkgLy8gdXNlIHRoZSBzY2FsZSBoZXJlCiAgICAuYXR0cigiY3kiLCA0MCkKICAgIC5hdHRyKCJyIiwgNikKICAgIC5hdHRyKCJmaWxsIiwgInN0ZWVsYmx1ZSIpOwoKICAvLyBPcHRpb25hbDogc2hvdyBsYWJlbHMgdW5kZXIgZWFjaCBwb2ludAogIHN2ZwogICAgLnNlbGVjdEFsbCgidGV4dCIpCiAgICAuZGF0YShkYXRhKQogICAgLmVudGVyKCkKICAgIC5hcHBlbmQoInRleHQiKQogICAgLmF0dHIoIngiLCAoZCkgPT4geFNjYWxlKGQpKQogICAgLmF0dHIoInkiLCA2MCkKICAgIC5hdHRyKCJ0ZXh0LWFuY2hvciIsICJtaWRkbGUiKQogICAgLmF0dHIoImZvbnQtc2l6ZSIsICIxMHB4IikKICAgIC50ZXh0KChkKSA9PiBkKTsKPC9zY3JpcHQ+

When you want to display data visually, you need a way to translate your raw data values into positions or sizes on the screen. D3's `d3.scaleLinear` function lets you do this by creating a linear mapping between your data and the visual properties of your chart, such as pixel positions.

A linear scale is configured using two key concepts: **domain** and **range**. The **domain** defines the minimum and maximum values from your dataset. This is the set of possible input values you expect to handle. The **range** specifies the minimum and maximum values for the visual output—such as pixel positions along an axis.

For example, if your data values range from 0 to 100, and you want to map these to pixel positions from 0 to 500 along the x-axis, you set the domain to `[0, 100]` and the range to `[0, 500]`. With this setup, a data value of 50 would be mapped to 250 pixels, right in the middle of your chart. This approach ensures that your chart scales automatically to fit your data, no matter what values you have.

Learn how to create interactive data visualizations using D3.js. Explore the core skills needed to work with data on the web, from selecting elements and binding data to building charts and enhancing them with transitions, scales, and axes. Through clear explanations and hands-on mini projects, you will gain confidence in transforming raw data into engaging visuals.

Build foundational skills by learning how D3 selects and manipulates DOM elements. Understand how method chaining works and how D3's core approach differs from traditional JavaScript.

Explore the data-driven philosophy of D3. Practice the enter update exit cycle to dynamically create, modify, and remove elements based on changing data.

Use your new skills to build simple but powerful visualizations. Learn how to translate data into shapes using SVG to create bar charts and scatter plots.

Make your charts alive and readable. Add transitions for movement, scales for mapping values, and axes for clear communication.

Apply everything you have learned in small, real-world projects. Build practical visual components and interactive charts using real data.

Using Linear Scales

Awesome!

Using Linear Scales