md`# Day Thirteen (Task 7-1), 2020-09-06`
d3 = require("d3@6")
scale = d3.scaleLinear().domain([100,500]).range([10,350])
(scale(200)-scale(134))/(200-134)
(scale(333)-scale(120))/(333-120)
(scale(356)-scale(158))/(356-158)
(158-100)/(500-100)
(scale(158)-10)/(350-10)
340/400
(300-100)/(500-100)
(180-10)/(350-10)
scale_2 = d3.scaleLinear().domain([100, 400]).range([5,95])
(scale_2(145)-scale_2(133))/(145-133)
(scale_2(234)-scale_2(198))/(234-198)
scale_2(300)
scale_2(150)
65/20
md` ### Array
What is an array? According to Scott's book, an array is "**a sequence of values**, conveniently stored in a single **variable**."
`
md`### How to find the largest number in a dataset
If the dataset is a one-dimensional array, then it's very simple. Just use the \`d3.max()\`function is okay.
For example:
`
dataset_01 = [4, 5, 9, 10, 24, 56]
d3.max(dataset_01)
md` However, things get a little bit more complicated when the dataset is two dimensional: an array of arrays. Simply put the dataset into \`d3.max()\` won't give us the largested number.
`
dataset_02 = [
[0, 4], [5, 9], [8, 90], [47, 33], [55,99]
]
d3.max(dataset_02)
md` #### Something to figure out later.
Scott Murray did not mention why is it that we got [8,90] when we use \`d3.max(dataset_02)\`. I didn't know either.
`
md` Okay, what should we do then? If we want to identify the largest number among all the first number in each array within \`dataset_02\`, we can do it this way:
`
d3.max(dataset_02, function(d){
return d[0];})
md` Here, \`function(d){return d[0]}\` is called an *accessor function*, as it helps us **access** the first number in each array.
How to understand the above code? I would understand it this way. \`d3.max()\` need to first have all the numbers we ask it to evaluate, in the example above, all the first numbers in each array. To get the first numbers, we need to use the accessor function. Then, there is a problem, what does the \`d\` mean? \`d3.max()\` doesn't know, so we have to specify that. We tell \`d3.max()\` that each \`d\` comes from \`dataset_02\`, then the stupid \`d3.max()\` will know where to find each \`d\`.
`
md` ## Task 7-1:
- 7-1-1. Based on Task 6-6. For the X coordinate, set the input domain to be [0, the largest number of d[0]], and the output range to be [0, w]. For the Y coordinate, set the input domain to be [0, the largest number of d[1]], and the output range to be [0, h].
Change the location of each circle and annodated text accordingly. For the text, use "sans-serif" in 11px and in red.
- 7-1-2. Let the circles with larger y values be at the top of the plot and those with smaller values at the bottom. *Hint*: change the output range of \`yScale\`.
- 7-1-3. To keep the circle elements 20 pixels away from the boarder of the SVG. *Hint*: create a padding of 20 and then change the output range of both \`xScale\` and \`yScale\`.
- 7-1-4. Texts on the far right are still being cut off, solve this problem. *Hint*: adjust the \`range\` of \`xScale\`.
Note that to create paddings on each side of our charts, a better way is Mike Bostock's [**Margin Convention**](https://observablehq.com/@d3/margin-convention).
- 7-1-5. Use the method of *Margin Convention* mentioned above. top: 20, right: 30, bottom: 30, left:40
- 7-1-6. (**Please note that this is not the ideal way to scale cirlces! We'd better scale them by area rather than by radiu. This is just for illustration and for the sake of exercise!**) Create a custom scale for radius such that the greater the y value, the bigger the radius. Let the domain be [0, the largest number of y value], and the range be [2, 5].
- 7-1-7. Add an array to the original dataset, [600, 150].
- 7-1-8. Change the width of the SVG to be 600, and the height 300.
- 7-1-9. Tell me what the functions of \`nice()\`, \`rangeRound()\`, and \`clamp()\` do and how to use them.
`
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.