D3: Open Hours
D3 visualisation utilising D3's text/CSV to read/parse a CSV file with restaurant information and display which restaurants are currently open.
Users can drag the time (red line) to display restaurants open at other hours.
Mirror of You Don't Know JS: this & Object Prototypes, this All Makes Sense Now!
thisAll Makes Sense Now!
In Chapter 1, we discarded various misconceptions about
this and learned instead that
this is a binding made for each function invocation, based entirely on its call-site (how the function is called).
this binding, we have to understand the call-site: the location in code where a function is called (not where it's declared). We must inspect the call-site to answer the question: what's this
this a reference to?
Mirror of You Don't Know JS: Scope & Closures, Appendix C: Lexical-this
Though this title does not address the
this mechanism in any detail, there's one ES6 topic which relates
this to lexical scope in an important way, which we will quickly examine.
ES6 adds a special syntactic form of function declaration called the "arrow function". It looks like this:
Only have five minutes? Read the highlights.
Facebook is an advertising platform that builds profiles about its users through their browsing history and sells them.
Google does the same with your search history and YouTube views. On the other hand, Facebook tracks you because a great number of web sites are littered with Facebook's tiny "Share / Like this" button. A user thinks the button is just there to make sharing easier, but it allows Facebook to keep a record every site the user has been on.
The basics of drawing data-driven arcs by using values to determine the arc length. Very stripped down to give beginners an idea of how to draw and color shapes using the accessor functions in D3. For transitions and tweens, check out Bostock's well-annotated example, or my second arc example.
al lin, aug. 2013
Click on the grey circles. The green arcs will transition using
attr, whereas the red ones will use the
If you have not seen/read Bostock's arc tween example, it's probably the best place to start. Secondly, I've posted up a basic example of drawing static, concentric arcs (gist), which might be helpful before adding on tweens/animations.
Below is some annotated source code from my experience playing with arcs. The biggest issue I came across was understanding the role of the
arcTween helper function in relation to
attr, which takes a value as its second argument,
attrTween requires a helper function,
arcTween, which will be called during the intermediary animation ticks. This method was used for my [muniNow project](http