Day 40, 2020-10-03Day 37&38&39, 2020-09-30 & 2020-10-01 & 2020-10-02Day 35 & Day 36, 2020-09-28 & 2020-09-29Day 34, 2020-09-27Day 33, 2020-09-26Day 32 (Task 10), 2020-09-25Day 31 (9-2-10), 2020-09-24Day Thirty (A puzzle to be solved), 2020-09-22Day Twenty Nine, 2020-09-22Day Twenty-Eight (Task 9-2-9), 2020-09-21Day Twenty-Seven, 2020-09-20Day Twenty Six, 2020-09-19Day Twenty Five, 2020-09-18Day Twenty Four, 2020-09-17Day Twenty Three (Task 9-2), 2020-09-16Day Twenty Two (Task 9-1 continued), 2020-09-15Day Twenty-One (Task 9-1 continued), 2020-09-14Day Twenty (Task 8 Continued + Task 9-1), 2020-09-13Day Nineteen (Task 8), Spet. 12, 2020Day Eighteen (Task 7-1-10, 11, Sept. 11, 2020Day Fourteen, Fifteen, Sixteen & Seventeen, Spet. 07 ~ 10, 2020Day Thirteen (Task 7-1), 2020-09-06Day Eleven, Sept.4th, 2020Day Ten (Task 6-6), Sept. 3rd, 2020Day Nine, 2020-09-02Day Eight, Spet. 1, 2020Day Six, 30 Aug 2020Day Five, 29 Aug 2020Day Four, 28 Aug 2020Day Three, 27 Aug 2020Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Day Twelve, Sept. 5, 2020: Scales
md`# Day Twelve, Sept. 5, 2020: Scales`
d3 = require("d3@6")
scale = d3.scaleLinear()
md`
\`d3\` scales are really difficult to understand. I read [Jerome Cukier's great page on 'd3:scales and color'](http://www.jeromecukier.net/2011/08/11/d3-scales-and-color/), [Scale Functions](https://www.d3indepth.com/scales/) on [D3 in Depth](https://www.d3indepth.com/), [Using scales](http://jonathansoma.com/tutorials/d3/using-scales/) by [Jonathan Soma](http://jonathansoma.com/tutorials/d3/using-scales/) and [D3 attr(), style() and classed()](https://www.carlosrendon.me/unfinished_d3_book/d3_attr.html) by [Carlos Rendon](https://www.carlosrendon.me/). However, I still didn't understand it very well. That was until I saw [this tutorial](https://www.dashingd3js.com/d3js-scales) on Dashing D3.js.
`
md`
One thing I didn't understant, and one thing that many tutorials didn't touch upon, or worst, keep being misleading, is **What does D3 scale capture, or maintain?**.
[Using scales](http://jonathansoma.com/tutorials/d3/using-scales/) by Jonathan Soma is especially misleading, although I have to say [his tutorial](http://jonathansoma.com/tutorials/d3/) is the best I have ever seen online. Why did I say that his tuorial on D3 scales is misleading? It's because it doen't capture the real purpose of D3 scale.
For example, he used this example where dataset, or input, is [1, 2, 3, 4, 5, 50]. If our svg is only 120 pixels wide, then it's natural to come up with a good idea that the output range be [0, 100], this way, D3 will map input to output on a 1:2 scale.
1 will mapped to be 2, 2 to 4, 3 to 6, 4 to 8, 5 to 10, and 50 to 100. that is, the output will be [2, 4, 6, 8, 10, 100]. Nothing wrong, right?
It's not wrong. It's just misleading because it is a very special case.
`
md`
If that is the case for all d3 examples, then we would think that any number in the output range divided by the corresponding number in the input domain will get the same quotient. **But that is not the case at all!**
For example, if we have this dataset: [55, 98, 25, 68, 109] and we only have a screen that's 1080 pixes wide. You can use your own versions of input domain and output range, but here, let's say we'll set the input domain to be [10, 110]. What should be the output range? Again, you can use **anything** you like, but here, let's say the output range is [5, 350]. Why? No special reason. I just thought about those numbers in my mind.
`
scale.domain([10,110]).range([5,350])
md` The input of 55 will be:`
scale(55)
md` Similarly:`
scale(98)
scale(25)
scale(68)
scale(109)
md`
Now, let's calculate.
`
scale(109)/109
scale(68)/68
scale(25)/25
scale(98)/98
scale(55)/55
md` **You can see that they are not equal to each other at all!! **
If d3 scale functions did not maintain the ratio, what does it maintain? What does it capture?
**The difference!**
I came to this understanding after reading [this tutorial](https://www.dashingd3js.com/d3js-scales), although I have to point it out that the example in this tutorial is also misleading.`
md` What did I mean by "d3 scale is maintaining the **difference**:
If we devide the difference between two numbers in the output range by the difference between two corresponding numbers in the input domain, we'll get (almost) exactly the same quotient.
Let me take the above example to illustrate this:
`
(scale(98)-scale(25)) / (98-25)
(scale(109)-scale(55)) / (109-55)
(scale(68)-scale(22)) / (68-22)
md` In fact, it doesn't have to be the five numbers above. Any numbers within our input domain is okay:
`
(scale(100)-scale(22)) / (100-22)
md` Why 3.45? How did d3 come up with this number. Well, you will know the mechinism after reading [this tutorial](https://www.dashingd3js.com/d3js-scales). Simply because (350-5)/(110-10) = 3.45.
Then, you may ask, why is that we were getting 3.4499999999999997 above, not exactly 3.45?
I don't know.
One thing I noticed is that if the starting point of both the input domain and the output range is zero, then d3 scale is not only preserving the difference, but also the ratio.
For example. Let the input domain to be [0, 66] and the output range [0, 109].
`
scale.domain([0,66]).range([0,109])
(scale(98)-scale(60)) / (98-60)
(scale(25)-scale(7)) / (25-7)
md` Same right?
Also:`
scale(68)/68
scale(35)/35
md` One thing I didn't quite understand is this:
`
109/66
md` Which is not exactly 1.6515151515151514
`
md`
Go to [Day 13](https://observablehq.com/@hongtaoh/day-thirteen-2020-09-06).
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.