Skip to content

Instantly share code, notes, and snippets.

View codetricity's full-sized avatar

Craig Oda codetricity

106 followers · 5 following
View GitHub Profile
@codetricity
codetricity / zoom-pan.html
Last active October 8, 2018 12:39 — forked from sgruhier/.block
zoom/pan d3v4
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
@codetricity
codetricity / drag-start-end.rst
Last active October 12, 2018 13:31
2nd exercise on drag - change selected circle color

Drag Start End

  1. Create new functions for dragStart and dragEnd
  2. initially print out 'drag started' and 'drag ended'
  3. Use events start and end to trigger the function
  4. change color of circle when drag starts
  5. revert color back when drag ends

you can identify the circle you have chosen in the function with

@codetricity
codetricity / 00-drag.md
Last active October 11, 2018 13:29
d3 minimal drag example
@codetricity
codetricity / 01-svg-maps.md
Last active October 11, 2018 13:13
Using SVG Maps - Hawaii
@codetricity
codetricity / template-strings.md
Last active October 4, 2018 13:32
ES6 template strings

Using JavaScript Template Strings

  1. create a new project with index.html, main.js, and d3.js

  2. modify index.html. Add id='introduction' to a div tag below the opening <body> tag.

    <script src='js/d3.js'></script> <script src='js/main.js'></script>
@codetricity
codetricity / population-by-state.md
Last active October 8, 2018 15:27
@codetricity
codetricity / temp-by-month-8-add-buttons.md
Last active September 26, 2018 13:30
@codetricity
codetricity / 2018-09-24-temp-by-month-7.md
Last active September 24, 2018 12:53
add axis and title labels to chart
@codetricity
codetricity / event-mouse-2.md
Last active September 23, 2018 19:10
d3 event handler part 2

d3 event handler - 2

  1. create a new project

  2. set up index.html, main.js, d3.js

  3. Start with the four circles that you used in the previous lesson. Delete the event handlers. Copy the code below into the main.js file.

     const svg = d3.select('body')
   .append('svg')
   .attr('width', 300)

.attr('height', 300);

@codetricity
codetricity / event-mouseover.md
Last active September 28, 2018 13:32
lesson based on dashing 06 - event action at a distance

d3 event handler

Goal

Change graph focus based on mouse location.

learning objectives

  1. on keyword
  2. mouseover keyword