Week 4 Assignment 1 of 2

scales

Scales come in very handy for visualizations, they manipulate your data into outputs that fit the screen in terms of size, position, and color. We have already gone over these points in class, here is a quick recap below.

In D3, scales are functions, they are first defined with parameters, and then called with your specific data values. The most basic scale we learn is linear and in D3v5 they are defined in this quick example below. You will find in depth explanations in Chapter 7 of your book.

var aScale = d3.scaleLinear()
.domain([0,50000 ])
.range([0,100])

Here the variable called aScale is defined, and has the effect of scaling any number between 0 and 50,000 to fit between 0 and 100.

To use the scale, we call it like a function.

aScale(0) will output 0
aScale(50000) will output 100
and aScale(25000) will output 50 because it is linear

Your output can also be other types of values. For example let’s define another scale called anotherScale.

var anotherScale = d3.scaleLinear()
.domain([0,50000 ])
.range([“red”, “blue”])

anotherScale(0) will output the color red
anotherScale(50000) will output blue
and anotherScale(25000) will output some kind of purple halfway between red and blue.

Please read Chapter 7- page 117 to 134 and follow along in the exercises in our class folder. The HTML file with name ending in _EXERCISE will be your assignment, instructions as written as comments in the code itself. Please save this file as week4_10_yourlastname_yourfirstname.html and upload it to Canvas by Thursday at midnight. The completed exercise will look something like the image below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store