3.7 Task 6 Review

6-1-1:
- To specify the height of each bar, I should use .style(), rather than .attr(). In D3.js, .style() is to assign CSS styles to a HTML element. In CSS, we won’t use style because everything is style(). In HTML, we do use it. For example, <div style="height: 75px;"></div>";
- To make the height of each bar correspondes to its data value, I should usefunction(d){return d + "px"} rather than function(d){return d };
6-1-2: To add some space (2px) between bars, I need to use margin-right: 2px in the CSS (div.bar{}. To learn more about the differences between padding, border, margin, read this amazing tutorial;
6-1-3:
- First, I need to initilize an empty array using dataset = []
- In Javascript, Math is a global object, whereas .push() is an array method.
- A for loop: for (initialization; test; updata){ }

6-2-4
- When drawing five circles, we used three terms, “svg”, “circles”, and “circle”, which of them should be fixed, and which can be random? “svg” and “circle” should be fixed, but “circles” can be random;
- One thing I still don’t understand is that in Task 6-1-1, I have to use function(d){return d + "px"} rather than function(d){return d }. However, in Task 6-2-4, using .attr("r", function(d){return d }) is fine, and in .attr("cy", h/2), I don’t need to put "" to enclose h/2. I guess it’s because of the differences between .style() and .attr(). But how different? I don’t know.;
- When we need the index of the data values, we should use function(d,i){} even if we don’t need the d. However, when we only need the d, we can simply use function(d){}.
6-2-6: Again, we need to add px in style

To change the color of bars, we need to use .attr("fill", "teal"), rather than .style().

6-1-1. Again, I forgot the difference between .attr() and .style().
- .style() assigns CSS styles (properties and value)s to a HTML element, just like the way we assign CSS styles when we are writing HTML. For example, <div style="height: 75px;"></div>.
- In comparison, .attr() sets an HTML attribute and its values on a HTML element. Note that an element’s class is stored as an HTML atrribute.
6-1-3. A.push(B) will put B to the end of A. .push() is an array method.

6-2-2.
- <svg> is just like an HTML element. width, height are its attributs. rect, circle, text are all elements. x, y, cx, cy and r are all attributes. Read this amazing tutorial to really understand what is an element and what are attributs.
- I still did not understand it. Why is that I need to use style() to specify the height of div in Task 6-1-1** but I need to use .attr() to specify the height of a svg here??** I guess it’s because that for div, height is a CSS property, but for svg, height is an attribute? Maybe.
6-2-4. I need to use svg.selectAll('circle') rather than svg.select('circle'). Think about why for a moment;
6-2-5. As the amazing tutorial mentioned, here, using either .attr() or .style() is fine. The key difference is that I need to use return d / 2 + "px" for stroke-wideth when using .style().

For <div>, height is a CSS property, so I should use style;
For <svg>, height, width, x, y, cx, cy, r are attributes, so I should use attr();
For <svg>, fill, stroke, and stroke-width are also attributes. I can use either style() or attr(), but style() is better because it is not about position and size.
Refer to this tutorial and this tutorial.

6-5-1. When adding value labels on top of each bar, I should not use rect.selectAll("text").data(dataset).enter().append("text").... Doing so will add twenty text element within each rect element! This is not I am looking for at all. Rather, I should use svg.selectAll("text").data(dataset).enter().append("text").
6-5-2. .style("font-size", "11px").