Skip to content

Instantly share code, notes, and snippets.

View codetricity's full-sized avatar

Craig Oda codetricity

105 followers · 5 following
View GitHub Profile
@codetricity
codetricity / bts-profiles-3.rst
Last active October 21, 2018 00:11
d3 BTS part 3 - Show Data
@codetricity
codetricity / bts-profiles-2.rst
Last active October 20, 2018 13:42
BTS Profiles Part 2

BTS Profiles Part 2 - Show Image

Use Data Update Pattern

  1. select
  2. data
  3. exit
  4. update
@codetricity
codetricity / bts-profile.rst
Last active October 20, 2018 05:08
BTS Profile

BTS Profiles

Setup

Create folders for

  1. css
  2. assets
@codetricity
codetricity / bitmap-image.rst
Last active October 18, 2018 13:06
Add Bitmap Images to SVG
@codetricity
codetricity / 00-civilwar-data-join.rst
Last active October 22, 2018 15:23
Data join example using Civil War data

Learn Data Join Pattern

Goal

Learn pattern to change data on the same chart. For example, change data from Union to Confederate.

Pattern: Data Doesn't Change

  1. selectAll( thing to draw such as circle )
@codetricity
codetricity / datasource.rst
Last active October 14, 2018 14:10
@codetricity
codetricity / civilwar2.rst
Last active October 14, 2018 13:55
Civil War Part 2 - Adding Confederate and Border States
@codetricity
codetricity / 00-civil-war-facts.rst
Last active October 17, 2018 13:32
Civil War Facts
@codetricity
codetricity / datajoin.rst
Last active October 9, 2018 15:52
Data Join and Changing Data Lesson #1

Data Join and Changing Data

Overview

Charts can change based on audience interaction. For example, if your audience presses on a button, the chart could change completely.

When the chart changes, the number of data elements can change.

@codetricity
codetricity / learn-d3-lesson-5.js
Last active October 8, 2018 04:19
Circle movement and color transitions. code for this video https://youtu.be/lXFKEqdSWIU
const svg = d3.select('body').append('svg')
.attr('width', '300')
.attr('height', '300');
svg.append('circle')
.attr('cx', '100')
.attr('cy', '0')
.attr('r', '25')
.style('fill', '#FFC56C')
.transition()