Skip to content

Instantly share code, notes, and snippets.

@dustinlarimer
dustinlarimer / index.html
Last active December 9, 2016 03:06
This example shows how to record HTML5 Video Player usage stats with Keen IO. Make sure to include your Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup
<html>
<head>
<meta charset="utf-8">
<script src="http://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.1.js"></script>
</head>
<body>
<!-- HTML5 Video Player -->
<div>
<button id="video-control">Play</button>
<br><br>
@dustinlarimer
dustinlarimer / index.html
Last active December 30, 2015 16:19
Day/Hour PageView Heatmap for Keen.io
<!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>",
@dustinlarimer
dustinlarimer / keen.js
Created November 30, 2013 20:34
Keen.io page view drop-in
// 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
dustinlarimer / example.html
Last active December 26, 2015 11:39
Intro to JS kickoff session
<!DOCTYPE html>
<html>
<head>
<title>Intro to JavaScript!</title>
<style>
body {
background: #fbfbfb;
}
.container {
@dustinlarimer
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)
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)
@dustinlarimer
dustinlarimer / README.md
Last active December 20, 2015 01:39
SVG transform

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)

More here

@dustinlarimer
dustinlarimer / README.md
Last active December 19, 2015 03:09
D3.js Markers

Selectively applying path markers from a simple collection.

@dustinlarimer
dustinlarimer / README.md
Last active December 18, 2015 03:18
DataClips + D3.js Force-Directed

Second demo of consuming Heroku DataClips with D3.js.

Data source: (.json)

@dustinlarimer
dustinlarimer / README.md
Last active December 18, 2015 01:09
DataClips + D3.js Chart

Simple demonstration of consuming Heroku DataClips with D3.js.

Data source: (.json)

@dustinlarimer
dustinlarimer / README.md
Last active October 8, 2015 16:45
API Read Key for NYTimes' data dump of Military Surplus Gear flowing to local police departments

Military Surplus Gear, published here

API credentials for read-access:

Project ID: 53f3eca97d8cb91b75000000

API Key (read-only): df6ff0ff414bc286b91e2661db4c691c45b6aea8d2c8cf2393169e9b9ef36a3d77e59c57b540febc8f328bf1f605782d9035c4a7072dc86c4f96ddbcce7dfe0b088ae51dd2ea36ad022290d1f3580e2d1ea202845ae7f79e7db6634ee627a26197dadf7eb2e5a46b16f04a4cae55955e

Sample dashboard here, JS source here