Skip to content

Instantly share code, notes, and snippets.

View zischwartz's full-sized avatar

Zach Schwartz zischwartz

72 followers · 25 following
View GitHub Profile
@zischwartz
zischwartz / index.html
Last active February 22, 2018 15:52
Example descriptionwefawioejfoijwaef joiaj
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="content">
<span id="greet">Hello</span>
</div>
<script type="text/javascript" src="index.js"></script>
@zischwartz
zischwartz / README.md
Created January 4, 2018 19:16 — forked from mbostock/README.md
Local Variables

It’s often desirable when using D3 to define local behavior, that is, behavior that is specific to an individual element, rather than the same for all elements in a selection. The simplest example of this is passing a function to selection.attr to compute an attribute value for each element.

But what happens if your local behavior is more complicated? What if you want multiple operations (multiple attributes, or elements) to have local behavior, but still share local state between them? For instance, when rendering small multiples of time-series data, you might want the same x-scale for all charts but distinct y-scales to compare the relative (not absolute) performance of each metric.

There are several ways to do this in D3:

  1. Make the y-scale global, but set the domain on the y-scale before use. (Example.)

  2. Use selection.each to create a local con

@zischwartz
zischwartz / board.js
Last active March 15, 2018 17:58
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
let key_func = function(d){ return d.id }
// https://bost.ocks.org/mike/chart/
// XXX meant to be used with datum(), not data()
// i.e. selection should just be a single g
@zischwartz
zischwartz / board.js
Created March 16, 2018 12:58
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
// XXX YOU ARE NOT MEANT TO EDIT THIS FILE
let key_func = function(d){ return d.id }
// https://bost.ocks.org/mike/chart/
// XXX meant to be used with datum(), not data()
// i.e. selection should just be a single g
@zischwartz
zischwartz / game.js
Created March 22, 2018 17:43
class Game {
constructor(render_board){
this.render_board = render_board
this.data = []
for (var row = 0; row < 10; row++) {
for (var col = 0; col < 10; col++) {
let icon = col < 5 ? '☀️': '🌵'
this.data.push({row, col, icon})
}
}
@zischwartz
zischwartz / game.js
Created March 22, 2018 17:51
class Game {
constructor(render_board){
this.render_board = render_board
this.data = [{row:4, col: 4, icon:'🐄' }]
this.render_board(this.data)
}
@zischwartz
zischwartz / index.html
Created March 22, 2018 17:54
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: black;
height: 100vh;
overflow: hidden;
@zischwartz
zischwartz / rando.js
Created March 22, 2018 19:25
function get_random_emoji(){
let list = ['🌲', '⭐️', '👹', '😱', '👁', '🦀', '🐬', '🏝']
return list[Math.floor(list.length*Math.random())]
}
@zischwartz
zischwartz / index.html
Created March 23, 2018 12:54
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: black;
height: 100vh;
overflow: hidden;
@zischwartz
zischwartz / Readme.md
Last active March 17, 2020 08:00 — forked from josiahdavis/Readme.md
Responsive Multi-Line Chart (D3 V5)

Responsive Multi-Line Chart