ajfarkas

#!bin/zsh
maxlines=100
lines=0
# read shortened commit data
git diff --cached --oneline --numstat | while read commit; do
  # use tr to break words into newlines
  echo $commit | tr -s '[[:space:]]' '\n' | while read word; do
    # match numbers only
    if [[ $word =~ ^[0-9]+$ ]]
    then

ajfarkas

Tool Tips

An SVG hovering element that shows the value under the mouse point. This example generates random Y-axis values (-100 to 100) across a 120-second interval (X-axis).

A good amount of this code is for centering text, which I plan to streamline at some point.

ajfarkas

Realtime Line Graph

A simple line graph that updates in realtime. In this case, it is showing the millisecond value generated by Javascript every 100ms, over the course of 12 seconds.

Notes:

if you leave this tab for a second and come back, you can see that window.setTimeout slows down. D3 is simply connecting points, so when the data becomes sparse, you get unexpected patterns.

You may also notice that the points never hit the X-axis: again, points are only generated every 100ms, so unless you load this script at exactly 000ms, D3 will never see a 0ms value. Limitations of data…

ajfarkas

#Bar Chart Clock

For a simple bar chart that changes value (this example uses time), defining the width of the bar as a percentage of its container will suffice. 14 lines gets the job done.

ajfarkas

#Range Area Graph This graph shows temperature ranges for each day in May.

The low temperatures are drawn as a clipping path to hide the bottom of the low temperature area. This allows for the use of gradients or photos or whatever you'd like in the background.
The graphs are also generated by a function, so the code is easily reusable. The low temperature graph is drawn with the opposite domain it would usually have: this makes it overlap with the high temperature graph to create a proper clipping path.

ajfarkas

[{"date":"2015-04-20","min":"26.8","max":"48.0"},{"date":"2015-04-21","min":"36.1","max":"57.2"},{"date":"2015-04-22","min":"29.3","max":"61.5"},{"date":"2015-04-23","min":"46.4","max":"48.6"},{"date":"2015-04-24","min":"28.2","max":"48.9"},{"date":"2015-04-25","min":"33.8","max":"52.5"},{"date":"2015-04-26","min":"29.3","max":"55.6"},{"date":"2015-04-27","min":"40.6","max":"57.0"},{"date":"2015-04-28","min":"41.5","max":"58.8"},{"date":"2015-04-29","min":"47.8","max":"59.4"},{"date":"2015-04-30","min":"44.8","max":"57.7"},{"date":"2015-05-01","min":"40.1","max":"63.7"},{"date":"2015-05-02","min":"30.9","max":"70.5"},{"date":"2015-05-03","min":"32.7","max":"73.6"},{"date":"2015-05-04","min":"34.5","max":"84.4"},{"date":"2015-05-05","min":"51.3","max":"74.3"},{"date":"2015-05-06","min":"34.2","max":"77.4"},{"date":"2015-05-07","min":"39.7","max":"84.2"},{"date":"2015-05-08","min":"44.8","max":"64.2"},{"date":"2015-05-09","min":"44.6","max":"70.0"},{"date":"2015-05-10","min":"46.2","max":"84.9"},{"date":"2015-0

ajfarkas

Luminance Histogram for R, G, B Hues

This d3 histogram shows the range of luminance values (0 - 100) for all saturation levels of red, green, and blue hues, respectively. I've used opacity on a dark background to mimic proper color-mixing. D3 transitions provide smooth animation when showing and hiding individual histograms. The particularly interesting result here is that there is a much larger variety of light colors than of dark colors; if you were to choose an rgb() (or hex) color at random, bet on it being > 50 L*.

ajfarkas

Move the slider to choose the angle of the x-axis labels.

ajfarkas

Geometry is fun! Rotated x-axis labels calculated by input.

ajfarkas

A 3-series histogram of red, green, and blue hue luminance distribution. The bars are z-axis sorted by height, and the graph is sortable by color, with animation.