The earlier example of this brushable radial chart led to some feedback to make the filtering better. I introduced a #circularBrush.filter(array,accessor) that takes an array of data and and accessor for that data and returns to you the data that falls into the area of the brush. The functionality of this chart is no different than the other, but if you take a look at the code, it's much more efficient.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ->|--|<- (Narrow) | |
javascript:w = document._w || 1100; w = w - 100; document.body.style.width = w + "px"; document._w = w; | |
// <-|--|-> (Widen) | |
javascript:w = document._w || 900; w = w + 100; document.body.style.width = w + "px"; document._w = w; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*$CapsLock:: | |
Send {LControl down} | |
Sleep 300 | |
Send {LControl up} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Available context bindings: | |
* COLUMNS List<DataColumn> | |
* ROWS Iterable<DataRow> | |
* OUT { append() } | |
* FORMATTER { format(row, col); formatValue(Object, col) } | |
* TRANSPOSED Boolean | |
* plus ALL_COLUMNS, TABLE, DIALECT | |
* | |
* where: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Html exposing (..) | |
import Keyboard | |
import Window exposing (Size) | |
import AnimationFrame | |
import Task | |
import Html.App as App | |
import Collage exposing (..) | |
import Element exposing (..) |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.