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:
I hereby claim:
To claim this, I am signing this object:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
.orbit { | |
stroke : #000000; |
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%.
Using data from the US Census, this visualization displays popular names that have historically been androgynous.
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
Using data from the US Census, this visualization displays popular names that have historically been androgynous.
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
Using data from the US Census, this visualization displays popular names that have historically been androgynous.
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
This shows the female-percentage of people named androgynous names over time.
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.
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).
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.
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:
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
width: 960px; | |
margin: auto; | |
position: relative; | |
} |