population-by-state.md

Population by State Part 1

Bandscale practice. Scatter Plat

The lesson and code examples are here:

https://github.com/codetricity/events-practice/tree/master/scaleband

The example chart is here:

https://codetricity.github.io/events-practice/scaleband/

---

Population by State Part 2

Bar chart

Create New bar.js file

This is an exercise to reinforce the concepts from the previous lesson.

Create a blank file called bar.js Change index.html to link to bar.js instead of the previous chart.

Create svg viewport

Create Size and Margins

The chart area is 600 x 400.

1. create constants for width and height of chart
2. create constant for margin as an object that holds left, right, top, bottom
3. create constant for svgWidth and svgHeight

Add Viewport to HTML

1. create const svg to hold the viewport
2. select body
3. append svg
4. set attributes for width and height

Create and Move svg group

1. chain a new group to the viewport .append('g')
2. move the group to the right by margin left
3. move the group down by margin top

Read Data

1. use d3.csv Hint: d3.csv('filename').then(callback function)

   the callback function is the code to run and is surrounded by curly brackets {}
   suggest you use fat arrow function (data) => { code is here }

2. test that you have read in the data by adding a console.log to callback function to print out the data

   

3. in the example above note that the population numbers are strings. They are enclosed in quotes. You need to convert them to integers.

   data.forEach((d) => {
     d.population = +d.population; 
   });
   

4. test that the numbers are now integers

   

5. add empty array called states that is above the forEach loop

6. inside of the forEach loop, push the parameter d.state to the end of the array

7. replace the console.log with states

   

8. create a constant for populationMinMax. Assign it to d3.extent(data, fill in here

9. use console.log to test populationMinMax. Ouput should be: Array [ 573720, 39776830 ]

10. create const yScale. Use scaleLinear.

11. create const xScale. Use scaleBand. use padding of 0.1

12. create const xAxis using d3.axisBottom

13. create const yAxis

14. display xAxis by appending g to svg. Then, use .call(xScale) to display to screen

15. display yAxis

16. bind data to rect for bar chart

    • select all rect
    • bind data with .data
    • enter
    • append rect

    

    You will have a rect for each state. The rects will not appear on the screen yet.

17. add x, y, width, height attributes to rect

    • x is derived from xScale with input of d.state
    • width is not a fat arrow function. use xScale.bandwidth() after the comma
    • height is height - fill in - population