Skip to content

Instantly share code, notes, and snippets.

@jdutta

jdutta/_.md

Last active June 13, 2016 22:49
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/1a4328bb6a1eac4904be30f82f9c656d to your computer and use it in GitHub Desktop.
Save jdutta/1a4328bb6a1eac4904be30f82f9c656d to your computer and use it in GitHub Desktop.
Download ZIP
sparkline-test-1
Raw
_.md
Raw
config.json
{"description":"sparkline-test-1","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},"s_action.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"c_ip.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sankey.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"main.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data1.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.json":{"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/I4azpRH.gif"}
Raw
data1.json
[
{
"ts": 100,
"val": 3
},
{
"ts": 120,
"val": 9
},
{
"ts": 150,
"val": 1
},
{
"ts": 200,
"val": 5
}
]
Raw
data2.json
[
{ "val": 3 },
{ "val": 9 },
{ "val": 1 },
{ "val": 6 },
{ "val": 6 },
{ "val": 1 },
{ "val": 2 },
{ "val": 4 },
{ "val": 2 },
{ "val": 5 },
{ "val": 3 },
{ "val": 8 },
{ "val": 3 },
{ "val": 5 }
]
Raw
inlet.js
// Sparklines
// Configurable params
var config = {
width: 100,
height: 30
};
var data = tributary.data2;
visualize(processCoords(data));
function processCoords(data) {
var tsRange = [0, data.length - 1];
if (typeof(data[0].ts) !== 'undefined') {
tsRange = d3.extent(data, function (o) { return o.ts; });
}
var valRange = d3.extent(data, function (o) { return o.val; });
var yScale = d3.scale.linear().domain(valRange).range([0, config.height]);
var xScale = d3.scale.linear().domain(tsRange).range([0, config.width]);
data.forEach(function (o, i) {
o.y = yScale(o.val);
o.x = xScale(i);
if (typeof(o.ts) !== 'undefined') {
o.x = xScale(o.ts);
}
});
// console.log('tsr', tsRange, valRange, data);
return data;
}
function visualize(data) {
var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
.attr('transform', 'translate(100, 90)');
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; })
.interpolate('linear');
var color = d3.scale.category20();
gRoot.datum(data);
var path = gRoot
.append('svg:path')
.attr('class', 'sparkline')
.attr('d', line)
.style('stroke', 'red')
.style('fill', 'none');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment