Skip to content

Instantly share code, notes, and snippets.

Keybase proof

I hereby claim:

  • I am hwangmoretime on github.
  • I am dhwang (https://keybase.io/dhwang) on keybase.
  • I have a public key whose fingerprint is 4B81 6D00 E9E2 AEDE 1930 DB03 4514 CD00 4E80 D296

To claim this, I am signing this object:

@hwangmoretime
hwangmoretime / index.html
Last active August 29, 2015 14:26 — forked from djvanderlaan/index.html
Planetarium
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.orbit {
stroke : #000000;
@hwangmoretime
hwangmoretime / README.md
Last active August 29, 2015 14:18
Bar-chart and Line-chart Interaction

What This Shows

Using data from the US Census, this visualization displays popular names that have androgynous by decade. Specifically, an androgynous name for a given decade is a name whose female (and thus male) percentage remained between 40% and 60%.

@hwangmoretime
hwangmoretime / README.md
Last active February 3, 2016 18:27
Point Tracking for Non-Linear Lines: III

What This Shows

Using data from the US Census, this visualization displays popular names that have historically been androgynous.

Technical

Control points are not intersected by the path for several non-linear interpolations for lines ("basis" in this case). Because of this, point tracking for non-linear lines should be calculated from the svg-path rather than from the d3-scales. Mike Bostock has two examples showing how to do this with a single path. This gist shows one approach for point tracking with multiple paths. Other approaches are shown here and here.

This approach saves precomputed closestPoints of each data point's linear coordinates respective to their parent path. The precomputation took 63.85 seconds (~0.16 seconds per point). What still remains for

@hwangmoretime
hwangmoretime / README.md
Last active February 3, 2016 17:59
Point Tracking for Non-Linear Lines: II

What This Shows

Using data from the US Census, this visualization displays popular names that have historically been androgynous.

Technical

Control points are not intersected by the path for several non-linear interpolations for lines ("basis" in this case). Because of this, point tracking for non-linear lines should be calculated from the svg-path rather than from the d3-scales. Mike Bostock has two examples showing how to do this with a single path. This gist shows one approach for point tracking with multiple paths. Other approaches are shown here and here.

This approach uses on-the-fly closestPoint to select both the line and point to highlight. Each move the mouse requires computing the distance to each point on the chart, thus the noted performance differen

@hwangmoretime
hwangmoretime / README.md
Last active January 31, 2016 22:03
Point Tracking for Non-Linear Lines: I

What This Shows

Using data from the US Census, this visualization displays popular names that have historically been androgynous.

Technical

Control points are not intersected by the path for several non-linear interpolations for lines ("basis" in this case). Because of this, point tracking for non-linear lines should be calculated from the svg-path rather than from the d3-scales. Mike Bostock has two examples showing how to do this with a single path. This gist shows one approach for point tracking with multiple paths. Other approaches are shown here and here.

This approach uses a combination of precomputed voronoi tessellations and on-the-fly closestPoint to determine which line and point to highlight. The voronoi tessellations determine the line, which the on-t

@hwangmoretime
hwangmoretime / README.md
Last active August 29, 2015 14:16
Normalizing Lines by Start Date

What This Shows

This shows the female-percentage of people named androgynous names over time.

What's Under the Hood

This normalizes each of the paths by start date by resetting the domain of the x-axis to fit each data row. Start date is defined as being the first time when the name had a female percentage greater than zero.

What Remains

It would be much better to show the date on hover rather than simply the name. This would require a bit more precomputation because of the non-linear interpolation (can't simply use scales).

@hwangmoretime
hwangmoretime / README.md
Last active August 29, 2015 14:16
Bar Chart Composed of Images ("In One Chart")

What This Shows

A bar chart of Twitter images from Tweets that contain the phrase "in one [chart|graph]". The images themselves make up the areas of the bar chart. Because the Twitter Search API only indexes tweets from the previous seven days, the data is relatively uninteresting for a bar chart.Thus, this visualization is more a proof-of-concept and a unique talking piece for the increased prevalence of the phrase "in one chart". I wrote a short bit on this visualization here.

What's Under the Hood

For this visualization, I wanted to group unique charts/graphs on the day they were first published. I used the following pipeline to determined the tweets that first published unique charts/graphs:

  1. Get all tweets that contained the phrase "in one chart" or "in one graph". (6788 tweets to start)
  2. Then, get tweets that had a picture attached. (4716 tweets left)
  3. Then, group tweets by the image url. Find the earliest tweet from those groups. (204 tweets
@hwangmoretime
hwangmoretime / index.html
Last active August 29, 2015 14:16
DataViz 101: Simple Bar Chart Interaction
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
width: 960px;
margin: auto;
position: relative;
}