Part of Interval Timer Series

2018-09-16-city-temperature-pt-4.md

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

Expand Data

https://www.currentresults.com/Weather/US/average-city-temperatures-in-february.php

Copy and paste data into Excel spreadsheet.

1. Select all data in table (all 50 rows). You can copy over the advertisements and take out the unused spaces for the graphics in the steps below.
2. When you paste, right click on the Excel cell and then select "Paste Special"
3. After Paste Special, select Paste as Text
4. Pasted data is automatically put into spreadsheet format. You must paste as plain text.

Confirm that there are 51 rows of data plus one heading row.

adjust data in spreadsheet

1. delete unused columns
2. change name of first row to match attributes in code

Save Spreadsheet in csv format

Convert CSV to JavaScript Object Array

Although you can convert csv to json inside the program, we will use an external converter to keep the coding example simple.

Paste your csv data into the tool below.

https://csvjson.com/csv2json

Add JavaScript Object array to code.

Adjust Timing

• Example

change interval of main loop to 2000

Create Opacity Transitions

Add this code for transitions

     .attr("fill-opacity", 0)
        .transition(d3.transition().duration(500))
          .attr("fill-opacity", 1);

Add to circles and text

Add Position Transitions

1. Move text in from left of screen to center.

Set x position of text above the transition section to 0. Inside of the transition, set the x attribute to width/2

    .transition(d3.transition().duration(500))
      .attr("fill-opacity", 1)
      .attr("x", width/2);

2. Repeat process for circle

3. add transition to title

   adjust opacity from 0 to 1

Adjust timing

Experiment with 1000 millisecond transition

Review Concepts

• handle large datasets by using variables instead of numbers
• Using data from public web site on Internet
• Using data in Excel spreadsheet
• Convert CSV data to JSON
• position transition
• Opacity transition