Introduction to Scales, D3, and Everything Else

From chart 9, I run a server, otherwise my console will be cluttered with errors otherwise.

1. A couple scales

Present several people of various heights, and will use a rectangle to represent each of them.

• widthScale: people are between 0 and 200cm tall, and my longest bar at 400 pixels
• colorScale: Man to be #BDB76B, woman to be #ADFF2F.

2. Working on some bars

• Using d3 to change the SVG to be 400 pixels wide and 200 pixels tall
• Every bar is 50 pixels tall
• Every bar's width is related to the gdp of the country. If the gdp is 100, it should be as wide as the SVG.
• Every bar's color is related to the continent.

3. A circle chart

• Every circle's cy is at the vertical center of the graph
• Each circle is evenly spaced out on the x axis.
• Each circle's size reflects the weight of the animal. If an animal were 1000 lb, it has a radius of 50.

4. A fake, ugly scatterplot

Add new circles

• Mark: circle
• Data: hamburgers consumed, Visual representation: x axis
• Data: hot dogs consumed, Visual representation: y axis
• With light pink circles

5. A fake, ugly bubble chart

• That is 400 pixels wide and 200 pixels tall
• Every circle is halfway down the SVG
• Data: hamburgers consumed, Visual rep: x axis
• Data: kind of animal, Visual rep: color (colors are your choice)
• Data: hot dogs consumed, Visual rep: radius (max size is your choice)
• With an opacity of 0.5

6. A couple scales

Use rectangles to represent several people of various heights.

• widthScale: people are between 0 and 200cm tall, and the longest bar is 400 pixels
• colorScale: Man is #BDB76B, woman is #ADFF2F.

7. Appending a fancy SVG with a margin

Chang this SVG to be 400 pixels wide, 200 pixels tall, with a 50 pixel margin the rectangle inside.

8. A circle chart

Space out and resize a few circles. I make:

• Every circle's cy at the vertical center of the graph
• Each circle evenly spaced out on the x axis.
• Each circle's size to reflect the weight of the animal. If an animal were 1000 lb, it should have a radius of 50.

9. Reading external data

10. Scatterplots

• That is 400 pixels wide and 400 pixels tall.
• Mark: circle
• Data: hamburgers consumed, Visual rep: x axis
• Data: hot dogs consumed, Visual rep: y axis
• With light pink circles
• Has axis labels

11. Categorical scatterplot

• That is 400 pixels wide and 400 pixels tall
• Mark: circle
• Data: hamburgers consumed, Visual rep: x axis
• Data: kind of animal, Visual rep: y axis
• With light pink circles
• Has axis labels
• Has a little padding between the categories and the x axis label.

12. Weird colored bubble chart

• That is 400 pixels wide and 200 pixels tall.
• Mark: circle
• Data: hamburgers consumed, Visual rep: x axis
• Data: kind of animal, Visual rep: color (colors are your choice)
• Data: hot dogs consumed, Visual rep: radius (max size is your choice)
• With an opacity of 0.25
• Has the x axis labeled

13. Horizontal bar graph

• Mark: rectangles
• Data: hamburgers consumed, Visual rep: height
• Data: kind of animal, Visual rep: color
• Has a axis labels on the y axis
• Adjust margins to see the full names on the left

14. Vertical bar graph

• Mark: rectangles
• Data: hamburgers consumed, Visual rep: height
• Data: kind of animal, Visual rep: color
• Has the bars lined up at the bottom
• Has a axis labels on the y axis