Instantly share code, notes, and snippets.

AJ Farkas ajfarkas

View GitHub Profile
@ajfarkas
ajfarkas / README.md
Last active Jun 2, 2016
Tool Tips for Line Graph
View README.md

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
ajfarkas / README.md
Last active Jun 2, 2016
Realtime Line Graph
View README.md

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
ajfarkas / README.md
Last active Apr 21, 2016
Bar Chart Clock
View README.md

#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
ajfarkas / README.md
Last active Aug 29, 2015
Range Area Graph
View README.md

#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
ajfarkas / 20150420-20150520_tempRange.json
Last active Aug 29, 2015
Small Multiples: Temperature
View 20150420-20150520_tempRange.json
[{"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
ajfarkas / README.md
Last active Aug 29, 2015
Multi-Series Histogram with Blended Color
View README.md

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
ajfarkas / README.md
Last active Aug 29, 2015
Rotating D3 Axis Labels with Slider
View README.md

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

@ajfarkas
ajfarkas / README.md
Last active Aug 29, 2015
Rotated x-axis labels for D3
View README.md

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

@ajfarkas
ajfarkas / README.md
Last active Aug 29, 2015
z-stacked multi-series bar chart w animation
View README.md

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.

@ajfarkas
ajfarkas / README.md
Last active Aug 29, 2015
Luminance Histograms for Red, Green, and Blue Hues
View README.md

Histograms of the range of luminance values for all unmixed hues of red, green, and blue.

Middle gray for our eyes is 18% gray for computer monitors (rgb(47,47,47) is L*a*b*(50.015), where L*.domain([0, 100])). The background color is the RGB value closest to L* == 50.