codetricity

Interval Timer Part 4

• example
• code on GitHub

Goals

• Use data from 50 cities

codetricity

d3 interval part 2 - Using complex data from an array of objects

Review how color is temperature is pulled from array of objects.

Questions

What does this line do?

    var rowOfData = temperatureData[index];

codetricity

Temperature by Month Pt 1 - Overview and Project Setup

Project Goal

Show 12 months of data for each city.

codetricity

D3 Interval Loop Part 3

Set Radius in update function

Use the anonymous function used to set the color of the circle as an example and edit the radius of the circle.

Example Using Color

You can't copy and paste this in. You must modify the code below and use a similar concept to change the radius of the circle.

codetricity

City Temperature Part 4

Learning Objectives

• Use data from public web site on Internet
• Use data in Excel spreadsheet, which is similar to Google Sheets
• Convert CSV data to array of JavaScript objects
• Use position transition
• Use opacity transition

codetricity

Temp by Month 2 - Get Data from File

Section Goal

Read in data from csv file and make it usable in your program.

Learning Objectives

• Understand CSV format
• Understand array format

codetricity

temp by month pt 3. Use of JavaScript arrays

Section Goal

Read in data and create an array of cities.

Learning Objectives

codetricity

Temperature by Month 4 - svg viewport

Learning Objectives

• use keyword const instead of variable if the variable for WIDTH and HEIGHT do not change
• use ALL_CAPS convention for the const name wich as WIDTH
• review SVG Viewport margin conventions
• review chart area position translation to get X and Y axis aligned properly

Steps

codetricity

Temperature by Month 5 - scales and axis

Goal

Create X and Y axis

Learning Objectives

codetricity

Temperature by Month 6

bind data to circle elements

Inside the d3.csv promise function.

d3.csv("city-month.csv").then(function(dataInFunction){

    var circles = svg.selectAll("circle")

.data(dataInFunction)