Skip to content

Instantly share code, notes, and snippets.

@jdutta

jdutta/_.md

Last active January 9, 2017 23:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdutta/395144669f8824a91f4d4c47b7c203d2 to your computer and use it in GitHub Desktop.
Save jdutta/395144669f8824a91f4d4c47b7c203d2 to your computer and use it in GitHub Desktop.
Download ZIP
heatmap-2
Raw
_.md
Raw
chart.css
svg {
//shape-rendering: crispEdges;
}
g.axis path {
fill: none;
stroke-width: 1px;
stroke: #777;
}
g.tick text {
font-size: 12px;
}
.g-item circle {
fill-opacity: 0.3;
}
Raw
config.json
{"description":"heatmap-2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"userData.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"userData2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/xPqgKnm.gif"}
Raw
inlet.js
// Experiment with chart animation
// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
width: 600,
height: 450,
colorRange: [d3.rgb("#b70000"), d3.rgb('#b70000')],
gRootXY: [50, 50],
dotSize: 4,
dotR: 2.5
};
drawChart(tributary.userData2);
function drawChart(data) {
var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
.attr('transform', 'translate('+config.gRootXY+')');
/*
// draw rect around histogram
gRoot
.append('svg:rect')
.attr({
x: 0,
y: 0,
width: config.histoWidth,
height: config.histoHeight
}).style({
fill: 'none',
stroke: 'black'
});
//*/
var yMax = d3.max(data, function (d) { return d.slide_index; });
var xScale = d3.scale.linear()
.domain([0, d3.max(data, function (d) {return +d.delta_time_elpased;})])
.rangeRound([0, config.width])
var yScale = d3.scale.linear()
.domain([yMax, 0])
.rangeRound([0, config.height])
var colorScale = d3.scale.linear()
.domain([0, yMax])
.interpolate(d3.interpolateLab)
.range(config.colorRange);
//console.log(data);
var xAxis = d3.svg.axis()
.ticks(10)
.scale(xScale);
var yAxis = d3.svg.axis()
.orient('left')
.scale(yScale);
gRoot.append('svg:g')
.classed('axis', true)
.attr('transform', 'translate('+[0, config.height]+')')
.call(xAxis);
gRoot.append('svg:g')
.classed('axis', true)
.attr('transform', 'translate('+[0, 0]+')')
.call(yAxis);
var chartEnter = gRoot.selectAll('.g-item')
.data(data)
.enter()
.append('svg:g')
.classed('g-item', true)
.attr({
transform: function (d) {
var x = xScale(+d.delta_time_elpased);
var y = yScale(d.slide_index);
return 'translate(' + [x, y] +')';
}
});
chartEnter
.append('svg:circle')
.attr({
cx: 0,
cy: 0,
r: config.dotR
})
.style({
fill: function (d) {
return colorScale(d.slide_index);
}
});
}
Raw
userData.json
[
{
"delta_time_elpased":"8",
"slide_index":0,
"user_id":242
},
{
"delta_time_elpased":"8",
"slide_index":4,
"user_id":242
},
{
"delta_time_elpased":"9",
"slide_index":5,
"user_id":242
},
{
"delta_time_elpased":"11",
"slide_index":6,
"user_id":242
},
{
"delta_time_elpased":"12",
"slide_index":6,
"user_id":242
},
{
"delta_time_elpased":"13",
"slide_index":7,
"user_id":242
},
{
"delta_time_elpased":"15",
"slide_index":7,
"user_id":242
},
{
"delta_time_elpased":"15",
"slide_index":7,
"user_id":242
},
{
"delta_time_elpased":"15",
"slide_index":8,
"user_id":242
},
{
"delta_time_elpased":"17",
"slide_index":8,
"user_id":242
},
{
"delta_time_elpased":"18",
"slide_index":9,
"user_id":242
},
{
"delta_time_elpased":"20",
"slide_index":11,
"user_id":242
},
{
"delta_time_elpased":"22",
"slide_index":12,
"user_id":242
},
{
"delta_time_elpased":"22",
"slide_index":12,
"user_id":242
},
{
"delta_time_elpased":"23",
"slide_index":13,
"user_id":242
},
{
"delta_time_elpased":"23",
"slide_index":13,
"user_id":242
},
{
"delta_time_elpased":"23",
"slide_index":12,
"user_id":242
},
{
"delta_time_elpased":"23",
"slide_index":12,
"user_id":242
},
{
"delta_time_elpased":"24",
"slide_index":12,
"user_id":242
},
{
"delta_time_elpased":"24",
"slide_index":13,
"user_id":242
},
{
"delta_time_elpased":"25",
"slide_index":14,
"user_id":242
},
{
"delta_time_elpased":"25",
"slide_index":13,
"user_id":242
},
{
"delta_time_elpased":"26",
"slide_index":14,
"user_id":242
},
{
"delta_time_elpased":"30",
"slide_index":16,
"user_id":242
},
{
"delta_time_elpased":"32",
"slide_index":18,
"user_id":242
},
{
"delta_time_elpased":"32",
"slide_index":19,
"user_id":242
},
{
"delta_time_elpased":"36",
"slide_index":19,
"user_id":242
},
{
"delta_time_elpased":"36",
"slide_index":20,
"user_id":242
},
{
"delta_time_elpased":"37",
"slide_index":20,
"user_id":242
},
{
"delta_time_elpased":"41",
"slide_index":24,
"user_id":242
},
{
"delta_time_elpased":"43",
"slide_index":25,
"user_id":242
},
{
"delta_time_elpased":"44",
"slide_index":25,
"user_id":242
},
{
"delta_time_elpased":"45",
"slide_index":26,
"user_id":242
},
{
"delta_time_elpased":"48",
"slide_index":26,
"user_id":242
},
{
"delta_time_elpased":"61",
"slide_index":37,
"user_id":242
},
{
"delta_time_elpased":"62",
"slide_index":38,
"user_id":242
},
{
"delta_time_elpased":"63",
"slide_index":39,
"user_id":242
},
{
"delta_time_elpased":"64",
"slide_index":39,
"user_id":242
},
{
"delta_time_elpased":"64",
"slide_index":38,
"user_id":242
},
{
"delta_time_elpased":"64",
"slide_index":40,
"user_id":242
},
{
"delta_time_elpased":"64",
"slide_index":40,
"user_id":242
},
{
"delta_time_elpased":"65",
"slide_index":41,
"user_id":242
},
{
"delta_time_elpased":"66",
"slide_index":41,
"user_id":242
},
{
"delta_time_elpased":"66",
"slide_index":41,
"user_id":242
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":242
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":242
},
{
"delta_time_elpased":"68",
"slide_index":42,
"user_id":242
},
{
"delta_time_elpased":"68",
"slide_index":42,
"user_id":242
},
{
"delta_time_elpased":"68",
"slide_index":43,
"user_id":242
},
{
"delta_time_elpased":"69",
"slide_index":44,
"user_id":242
},
{
"delta_time_elpased":"69",
"slide_index":42,
"user_id":242
},
{
"delta_time_elpased":"69",
"slide_index":43,
"user_id":242
},
{
"delta_time_elpased":"69",
"slide_index":44,
"user_id":242
},
{
"delta_time_elpased":"70",
"slide_index":43,
"user_id":242
},
{
"delta_time_elpased":"97",
"slide_index":56,
"user_id":242
},
{
"delta_time_elpased":"115",
"slide_index":67,
"user_id":242
},
{
"delta_time_elpased":"119",
"slide_index":72,
"user_id":242
}
]
Raw
userData2.json
[
{
"delta_time_elpased":"1",
"slide_index":1,
"user_id":217
},
{
"delta_time_elpased":"2",
"slide_index":0,
"user_id":217
},
{
"delta_time_elpased":"5",
"slide_index":1,
"user_id":217
},
{
"delta_time_elpased":"5",
"slide_index":2,
"user_id":217
},
{
"delta_time_elpased":"6",
"slide_index":3,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":4,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":5,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":6,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":7,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":6,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":5,
"user_id":217
},
{
"delta_time_elpased":"8",
"slide_index":4,
"user_id":217
},
{
"delta_time_elpased":"9",
"slide_index":5,
"user_id":217
},
{
"delta_time_elpased":"10",
"slide_index":5,
"user_id":217
},
{
"delta_time_elpased":"11",
"slide_index":6,
"user_id":217
},
{
"delta_time_elpased":"13",
"slide_index":7,
"user_id":217
},
{
"delta_time_elpased":"16",
"slide_index":8,
"user_id":217
},
{
"delta_time_elpased":"22",
"slide_index":9,
"user_id":217
},
{
"delta_time_elpased":"22",
"slide_index":10,
"user_id":217
},
{
"delta_time_elpased":"22",
"slide_index":11,
"user_id":217
},
{
"delta_time_elpased":"22",
"slide_index":12,
"user_id":217
},
{
"delta_time_elpased":"24",
"slide_index":13,
"user_id":217
},
{
"delta_time_elpased":"25",
"slide_index":14,
"user_id":217
},
{
"delta_time_elpased":"27",
"slide_index":15,
"user_id":217
},
{
"delta_time_elpased":"27",
"slide_index":16,
"user_id":217
},
{
"delta_time_elpased":"32",
"slide_index":17,
"user_id":217
},
{
"delta_time_elpased":"32",
"slide_index":18,
"user_id":217
},
{
"delta_time_elpased":"32",
"slide_index":19,
"user_id":217
},
{
"delta_time_elpased":"33",
"slide_index":19,
"user_id":217
},
{
"delta_time_elpased":"33",
"slide_index":19,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":20,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":21,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":22,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":23,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":22,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":23,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":22,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":21,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":20,
"user_id":217
},
{
"delta_time_elpased":"41",
"slide_index":19,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":18,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":19,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":20,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":21,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":22,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":23,
"user_id":217
},
{
"delta_time_elpased":"42",
"slide_index":24,
"user_id":217
},
{
"delta_time_elpased":"45",
"slide_index":25,
"user_id":217
},
{
"delta_time_elpased":"45",
"slide_index":26,
"user_id":217
},
{
"delta_time_elpased":"50",
"slide_index":27,
"user_id":217
},
{
"delta_time_elpased":"50",
"slide_index":28,
"user_id":217
},
{
"delta_time_elpased":"50",
"slide_index":27,
"user_id":217
},
{
"delta_time_elpased":"51",
"slide_index":28,
"user_id":217
},
{
"delta_time_elpased":"51",
"slide_index":29,
"user_id":217
},
{
"delta_time_elpased":"51",
"slide_index":30,
"user_id":217
},
{
"delta_time_elpased":"52",
"slide_index":31,
"user_id":217
},
{
"delta_time_elpased":"53",
"slide_index":31,
"user_id":217
},
{
"delta_time_elpased":"54",
"slide_index":31,
"user_id":217
},
{
"delta_time_elpased":"55",
"slide_index":32,
"user_id":217
},
{
"delta_time_elpased":"56",
"slide_index":33,
"user_id":217
},
{
"delta_time_elpased":"58",
"slide_index":34,
"user_id":217
},
{
"delta_time_elpased":"59",
"slide_index":35,
"user_id":217
},
{
"delta_time_elpased":"59",
"slide_index":36,
"user_id":217
},
{
"delta_time_elpased":"60",
"slide_index":37,
"user_id":217
},
{
"delta_time_elpased":"60",
"slide_index":38,
"user_id":217
},
{
"delta_time_elpased":"60",
"slide_index":39,
"user_id":217
},
{
"delta_time_elpased":"63",
"slide_index":38,
"user_id":217
},
{
"delta_time_elpased":"63",
"slide_index":39,
"user_id":217
},
{
"delta_time_elpased":"63",
"slide_index":39,
"user_id":217
},
{
"delta_time_elpased":"64",
"slide_index":40,
"user_id":217
},
{
"delta_time_elpased":"65",
"slide_index":40,
"user_id":217
},
{
"delta_time_elpased":"65",
"slide_index":41,
"user_id":217
},
{
"delta_time_elpased":"65",
"slide_index":41,
"user_id":217
},
{
"delta_time_elpased":"66",
"slide_index":41,
"user_id":217
},
{
"delta_time_elpased":"66",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"66",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":41,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":46,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":47,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":48,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":49,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":50,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":49,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":50,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":51,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":52,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":53,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":52,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":51,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":50,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":49,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":48,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":47,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":46,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"67",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"68",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"69",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"70",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"70",
"slide_index":42,
"user_id":217
},
{
"delta_time_elpased":"70",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"70",
"slide_index":43,
"user_id":217
},
{
"delta_time_elpased":"70",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"71",
"slide_index":44,
"user_id":217
},
{
"delta_time_elpased":"72",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"73",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"73",
"slide_index":45,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":46,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":47,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":48,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":49,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":50,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":51,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":52,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":51,
"user_id":217
},
{
"delta_time_elpased":"118",
"slide_index":50,
"user_id":217
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment