Simple demonstration of consuming Heroku DataClips with D3.js.
Data source: (.json)
Dustin dustinlarimer
🌿
Second demo of consuming Heroku DataClips with D3.js.
Data source: (.json)
Selectively applying path markers from a simple collection.
Simple demo of using SVG transform with path 'd' attribute to create radial axes.
Apply transform attributes to a group (<g>) to modify all nested elements:
- translate(x,y)
- rotate(degree)
dustinlarimer
/ firebase-chaplin-collection.coffee
Created
October 2, 2013 21:23
Backfire Collection object for ChaplinJS. Basically just replacing references to Backbone.Collection with Collection (which extends Chaplin.Collection in this example)
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
| Collection = require 'models/base/collection' | |
| Model = require 'models/base/model' | |
| module.exports = class FirebaseCollection extends Collection | |
| #_(@prototype).extend Backbone.Firebase.Collection | |
| model: Model | |
| sort_descending: (key) => | |
| @comparator = (model) -> | |
| return -model.get(key) |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Intro to JavaScript!</title> | |
| <style> | |
| body { | |
| background: #fbfbfb; | |
| } | |
| .container { |
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
| // Copy-paste from https://keen.io/docs/clients/javascript/usage-guide/#js-install-guide | |
| var Keen=Keen ||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})(); | |
| // readKey is not required for this example | |
| Keen.configure({ | |
| projectId: "your_project_id", | |
| writeKey: "your_write_key", | |
| readKey: "your_read_key" | |
| }); |
dustinlarimer
/ index.html
Last active
December 30, 2015 16:19
Day/Hour PageView Heatmap for Keen.io
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>PageView Grid</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> | |
| <script> | |
| var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})(); | |
| Keen.configure({ | |
| projectId: "<your-projectId>", |
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
| // Pie Charts for Keen IO with NVD3.js | |
| // Load and configure the client | |
| var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})(); | |
| Keen.configure({ | |
| projectId: 'your_project_id', | |
| readKey: 'your_read_key' | |
| }); | |
| // Query: count events, grouped by type/category |
This recipe uses geographic properties generated by the ip_to_geo data enrichment addon.
If you would like to activate this addon for your project, just ask!
The team is available in HipChat, IRC, or at [email protected].
OlderNewer