#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.
#!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 |
#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.
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…
#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.
[{"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 |
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*.
Move the slider to choose the angle of the x-axis labels.
Geometry is fun! Rotated x-axis labels calculated by input.
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.