Skip to content

Instantly share code, notes, and snippets.

View milroc's full-sized avatar

Miles McCrocklin milroc

141 followers · 62 following
View GitHub Profile
@milroc
milroc / index.html
Created June 22, 2012 21:17 — forked from biovisualize/index.html
Tooltip as a d3 helper
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="./tooltip.js"></script>
</head>
<body>
<div class="viz"></div>
<script type="text/javascript">
@milroc
milroc / README.md
Last active October 6, 2015 12:08 — forked from ZJONSSON/index.html
axes as whitespace

This is a fork of Ziggy Jonsson's Bar Stack (flex lao) to add to this conversation.

The purpose of this gist was to recommend using whitespace to represent the axes of visualizations, as they signify the zero point in the opposite dimensions encoding. Additionally, this enhances the users comprehension because positive and negative areas are able to be assessed independently.

When doing visual encoding, we tend to ignore whitespace and let 0's handle themselves. To learn about other techniques around this concept, refer to: The Design of Nothing: Null, Zero, Blank by Andy Kirk (@visualisingdata).

Proposed Improvements:

  • aesthetics (very little changes from original example were made).
  • transitions that serve a purpose and flow with the expectation of the reader.
@milroc
milroc / README.md
Last active October 23, 2019 20:09 — forked from mbostock/.block
Minimum Viable Chart Junk (Updating Line Chart)

This is a fork of Mike Bostock's Line Transition.

This fork was originally intended to showcase a principle of using padding between the x and y axis. This is a concept I've seen covered over and over again when dealing with non-zero minimum value charts (see example).

I also found it interesting to update both the line and the x axis. It should be noted that this was not the intent of the line transition example, seeing that the line was treated as a queue, pushing and popping from the front and back of the data. It talked on how to prevent odd visual behavior of the path when those changes occur, nothing more or less.

That being said, the visual change to the axis was a hack (see x_axis_scale) to just better understand how useful a constant, fast linear change effects my comprehension of the data.

So far, my personal opinion is that when dealing with updating data similar to this, it is best to spend most of your no

@milroc
milroc / README.md
Created July 6, 2012 22:34 — forked from milroc/README.md
bl.ocks template

Template for creating bl.ocks.

@milroc
milroc / README.md
Last active October 13, 2015 20:57 — forked from dchud/README.md
selection.each example
@milroc
milroc / .gitignore
Created April 29, 2013 07:43 — forked from GerHobbelt/.gitignore
# Editor backup files
*.bak
*~
@milroc
milroc / JuliaGlobals
Last active December 17, 2015 05:18 — forked from johnmyleswhite/JuliaGlobals
Fork of @johnmyleswhite's Julia vs Python.
total = 0
N = 300
start_time = time()
for a in 0:(N - 1)
for b in 0:(N - 1)
for c in 0:(N - 1)
if a^2 + b^2 == c^2
total = total + 1
@milroc
milroc / README.md
Last active December 20, 2015 09:30 — forked from mbostock/.block
color brewer + HSL values

A quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer. Available in CSS and JS format. Click on a palette to log the constituent colors in hexadecimal RGB to the console.

Fork added HSL values for a coworker

@milroc
milroc / index.html
Last active December 24, 2015 00:40 — forked from jrideout/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js multi-line chart attempt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/dc.css"/>
<link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/bootstrap.min.css"/>
@milroc
milroc / README.md
Last active December 23, 2017 22:07 — forked from tommaybe/LICENSE.md

Inspired by Trulia Trends - but with code and using SVG.

Example data shows concurrent user sessions over time, taken from a development environment.