Skip to content

Instantly share code, notes, and snippets.

Avatar

AJ Farkas ajfarkas

View GitHub Profile
@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 / 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 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 Oct 23, 2019
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.