This histogram, displaying the percentage of Illinois degrees with a science & engineering field of degree, is aysmmetric and positively skewed. I chose the range to be from 0-50, as the maximum is 45.27%. I set the number of bins to 10 so that the mode and outlier can be easily identified and so that the distribution is not over-simplified or extremely complex.

Use the scaleLinear function to create an unclassed map, which creates a chart visualization using data input and colors. Each data value is represented by a unique color. Copy and paste the below code: linear = d3.scaleLinear() .domain(d3.extent(*variable*)) .range(["color1", "color2"]) Next, replace "variable" with the visual variable that you want to display and replace "color1" and "color2" with the colors that you want to use to display the data values on a linear scale. The entire dataset is passed into the domain because the scaleLinear function is not breaking the data into classes; it therefore requires the entire scope of the dataset. Ensure that the two colors in the range function allow for the data values to be shown clearly - white is usually a good color to use as color1.

Use quantile classification by copying and pasting the following code: quantile = d3.scaleQuantile() .domain(variable) .range(["color1", "color2", "color3"]) Replace "variable" with your visual variable and "color1," "color2," and "color3" with your preferred colors. The whole dataset is passed to the domain.

Use the scaleQuantile function to classify data such that an equal number of data values are placed in each class. Copy and paste the following code: quantile = d3.scaleQuantile() .domain(*variable*) .range(["color1", "color2", "color3"]) Replace "variable" with your visual variable and "color1," "color2," and "color3" with your preferred colors. The whole variable dataset is passed to the domain because in order for the function to rank the data and create a quantile classification, it needs to utilize the entire dataset.

Use the scaleThreshold function to classify data such that the user directly specifies the cut values that separate the classes. Copy and paste the code below: jenks = d3 .scaleThreshold() .domain(naturalbreaks) .range(["color1", "color2", "color3"]) Next, enter the colors that you wish to display your data with. Your domain is composed of the natural breaks that are specified by the code: naturalbreaks = simple.ckmeans(*normalized variable*).map(v => v.pop()). You do not need to pass the entire dataset into the domain; the subsets are determined solely by the natural breaks.

Use the scaleQuantize function to classify data such that each class spans the same range. Copy and paste the code below: quantize = d3.scaleQuantize() .domain([d3.min(*variable*),d3.max(*variable*)]) .range(["color1", "color2", "color3"]) Next, enter your visual variable and colors into the code. You may choose to replace the domain line with the code: .domain(d3.extent(variable)) Your dataset's minimum and maximum values are passed to the domain because these are the only values needed to break the data into equal classes and create an equal interval classification.

Note: Use ColorBrewer to identify adequate color schemes to use in the below code. You can filter color schemes based on the number of classes, whether you want single-hue or multi-hue, and other related settings. To utilize a color scheme in Observable and assign colors to your domain, pass the hex codes into the range code below: .range(["color1", "color2"])

Use the scaleThreshold function to manually determine the cut values that specify the classes using the code below: threshold = d3.scaleThreshold() .domain([cutvalue1, cutvalue2, cutvalue3]) .range(["color1", "color2", "color3"]) The domain is composed of whichever values you deem appropriate for separating the data into subsets, but they should obviously fall within your data's range.