tailieunhanh - Ebook Interactive data visualization: Part 2

(BQ) Part 1 book "Interactive data visualization" has contents: Drawing divs, drawing SVGs, making a bar chart, making a scatterplot, next steps, apples and pixels, domains and ranges, creating a scale, scaling the scatterplot, refining the plot, other methods, introducing axes,. and other contents. | CHAPTER 6 Drawing with Data It’s time to start drawing with data. Let’s continue working with our simple data set for now: var dataset = [ 5, 10, 15, 20, 25 ]; Drawing divs We’ll use this to generate a super-simple bar chart. Bar charts are essentially just rec‐ tangles, and an HTML is the easiest way to draw a rectangle. (Then again, to a web browser, everything is a rectangle, so you could easily adapt this example to use `span`s or whatever element you prefer.) Formally, a chart with vertically oriented rectangles is a column chart, and one with horizontal rectangles is a bar chart. In practice, most people just call them all bar charts, as I’ll do from now on. This div could work well as a data bar: Figure 6-1. A humble div 75 (Among web standards folks, this is a semantic no-no. Normally, one shouldn’t use an empty div for purely visual effect, but I am making an exception for the sake of this example.) Because this is a div, its width and height are set with CSS styles. Except for height, each bar in our chart will share the same display properties, so I’ll put those shared styles into a class called bar: { display: inline-block; width: 20px; height: 75px; /* We'll override height later */ background-color: teal; } Now each div needs to be assigned the bar class, so our new CSS rule will apply. If you were writing the HTML code by hand, you would write: Using D3, to add a class to an element, we use the () method. It’s im‐ portant to understand the difference between attr() and its close cousin, style(). attr() sets DOM attribute values, while style() applies CSS styles directly to an ele‐ ment. Setting Attributes attr() is used to set an HTML attribute and its value on an element. An HTML attribute is any property/value pair that you could include between an element’s contain a total of five attributes (and corresponding values), all of which could be set with .