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 / temp-by-month.md
Last active September 16, 2018 16:46

Temperature by Month Pt 1 - Overview and Project Setup

Imgur

Project Goal

Show 12 months of data for each city.

Imgur

@codetricity
codetricity / 2018-09-12-interval-2.md
Last active September 12, 2018 14:17
part2 of d3 interval

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
codetricity / 2018-09-14-interval-part-4.md
Last active September 14, 2018 14:22
part 4 of interval timer
@codetricity
codetricity / 2018-09-10.md
Last active September 10, 2018 13:28
Chart axis styles
@codetricity
codetricity / 2018-09-11-interval-timer.md
Last active September 11, 2018 14:18
Scheduled for 9/11/2018

d3 interval loop part 1

d3.interval syntax

callback function, delay in milliseconds

  • example 1 second delay
@codetricity
codetricity / 2018-09-06.md
Last active September 6, 2018 14:15
Part 2 of simple d3 axis tutorial

Simple Axis Tutorial Part 2

Add Margins

  1. create object to hold margin information

    var margin = {top: 100, bottom: 100, right: 100, left: 50};

  2. set up variables for width and height of chart

@codetricity
codetricity / simple-axis.md
Last active September 6, 2018 18:16

Simple Axis Tutorial with D3

set up files

  1. Create js and css sub-directories in main project folder
  2. Create these files:
    • html file - index.html
      • HTML file must contain <body> and <head> tags.
    • blank JavaScript file - axis.js
  • atyle sheet - axis.cs
@codetricity
codetricity / 2018-09-04.md
Last active September 4, 2018 12:37
continuation of text rotation

alter x axis

Imgur

 .attr("x", function(d, i){
        return i * 40 + margin;

.attr("transform", function(d, i){

@codetricity
codetricity / text.js
Created August 31, 2018 13:10
d3 example
var dataset = [
"No", "one", "can", "tell", "me,",
"Nobody", "knows,",
"Where", "the", "wind", "comes", "from,",
"Where", "the", "wind", "goes."];
var width = 900;
var height = 900;
var margin = 100;
@codetricity
codetricity / 2018-08-31-transform.md
Last active August 31, 2018 14:17

Create new project

Create a new project called, "wind" with separate files for

  1. html
  2. css
  3. js

link the html file to your css and js files, similar to the previous lesson.