Skip to content

Instantly share code, notes, and snippets.

View codetricity's full-sized avatar

Craig Oda codetricity

127 followers · 5 following
  • Oppkey
  • Palo Alto
View GitHub Profile
@codetricity
codetricity / eslintrc.js
Last active September 28, 2018 12:50
eslintrc for d3 lessons
module.exports = {
"extends": "airbnb-base",
"env": {
"browser": true,
"es6": true
},
"rules": {
"object-curly-newline": ["error", {multiline: true}],
"no-plusplus": ["error", {allowForLoopAfterthoughts: true}],
"no-use-before-define": ["off"],
@codetricity
codetricity / temp-by-month-9-not-finished.md
Last active September 25, 2018 13:25
Not Finished - Add HTML Form to Chart

Not Finished - Add HTML Form to Chart

Goal

Add form below the SVG viewport by using JavaScript.

Learning Objectives

  • append additional elements to HTML <body>
  • review radio buttons
@codetricity
codetricity / d3-html-form.md
Last active September 25, 2018 13:31
Basic d3 and HTML forms

Exercise: D3 and HTML Forms

set up new project

  1. create new project called forms with the following components
    1. d3.js file
    2. index.html file with body tag
    3. main.js file
  2. link index.html file to d3.js and main.js
@codetricity
codetricity / temp-by-month-6.md
Last active September 19, 2018 01:04

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)

@codetricity
codetricity / temp-by-month-5.md
Last active September 17, 2018 12:53
Temperature by Month 5 - scales and axis

Temperature by Month 5 - scales and axis

Imgur

Goal

Create X and Y axis

Learning Objectives

@codetricity
codetricity / temp-by-month-4.md
Last active September 19, 2018 00:54
create SVG Viewport

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
codetricity / temp-by-month-3.md
Last active September 16, 2018 21:23
temp by month pt 3. Use of JavaScript arrays

temp by month pt 3. Use of JavaScript arrays

Section Goal

Read in data and create an array of cities.

array of cities

Learning Objectives

@codetricity
codetricity / temp-by-month-2.md
Last active September 16, 2018 16:55
use d3.csv to get data from file

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
codetricity / 2018-09-16-city-temperature-pt-4.md
Last active September 16, 2018 17:59
Part of Interval Timer Series

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
codetricity / 2018-09-13.md
Last active September 13, 2018 14:16
d3 interval loop part 3

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.