Skip to content

Instantly share code, notes, and snippets.

@iexviz

iexviz/.block

Last active March 23, 2017 02:03
Show Gist options
  • Save iexviz/c86fdd52c7332686e9a95bd5c9530828 to your computer and use it in GitHub Desktop.
Save iexviz/c86fdd52c7332686e9a95bd5c9530828 to your computer and use it in GitHub Desktop.
Download ZIP
IEX Market - Multiple Ring Chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"> </script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; font-size: 10px; overflow-y: scroll; }
.d3-tip {
font-family: 'Raleway', sans-serif;
font-size: .8em;
line-height: 1;
padding: 7px;
background: black;
color: lightgray;
border-radius: 20px;
}
</style>
</head>
<body align=center bgcolor=black>
<div class=dropdown></div>
<svg></svg>
<script src="karthiviz.js"></script>
<script src="main.js"></script>
</body>
Raw
karthiviz.js
d3.jsonp = function (url, callback) {
function rand() {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
c = '', i = -1;
while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
return c;
}
function create(url) {
var e = url.match(/callback=d3.jsonp.(\w+)/),
c = e ? e[1] : rand();
d3.jsonp[c] = function(data) {
callback(data);
delete d3.jsonp[c];
script.remove();
};
return 'd3.jsonp.' + c;
}
var cb = create(url),
script = d3.select('head')
.append('script')
.attr('type', 'text/javascript')
.attr('src', url.replace(/(\{|%7B)callback(\{|%7D)/, cb));
};
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
function visualise(data){
window.data = data;
var option = [ "marketPercent", "volume", "tapeA", "tapeB", "tapeC"]
var key = option[0]
var select = d3.select('.dropdown')
.append('select')
.style('font-size', '20px')
.attr('class','select')
.on('change',onchange);
var options = select
.selectAll('option')
.data(option).enter()
.append('option')
.text(function (d) { return d; });
function onchange() {
renderviz(d3.select('select').property('value'))
}
data.forEach(function(d,i) {
d.marketPercent = (d.marketPercent*100).toFixed(2);
});
renderviz(key)
};
function renderviz(key) {
var circs = []
data.forEach(function(d){ circs.push(d[key])})
//console.log(d3.sum(circs).toFixed(0))
var rscale = d3.scale.linear()
.domain([0,(d3.sum(circs)).toFixed(0)])
.range([0,6])
data.forEach(function(d,i) {
d.name = d.venueName;
d.value = rscale(d[key]).toFixed(2);
});
var color = d3.scale.category20c();
color = function(d) {
if(d.name == "IEX"){return "orange"}
return "darkcyan";
}
window.color = color;
d3.select("body").selectAll("svg").remove();
updateviz(key);
setuptip(key);
}
function setuptip(key) {
var format = d3.format(",")
tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.name + ": " + format(d[key]) });
d3.selectAll(".arc").call(tip)
d3.selectAll('.arc')
.data(data)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
Raw
main.js
// Quick charting tool for helping with infographics
function updateviz(key){
// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
startRadius: 17,
thickness: 21,
colorRange: ['#fef42d', '#20db00'],
animate: !false
};
// If the data file is foo.csv, then use tributary.foo to read that csv.
// Note: please have no space around comma in the csv file.
//var chartData = tributary.chart_data;
//chartData = sanitize(chartData);
data =sanitize(data);
drawChart(data);
//====================================================================
function sanitize(data) {
data.forEach(function (d) {
if (d.value > 100) {
d.value = 100;
}
if (d.value < 0) {
d.value = 0;
}
})
data.sort(function (a, b) {
var v1 = +a.value;
var v2 = +b.value;
if (v1 === v2) {
return 0;
}
return (v1 < v2 ? -1 : 1);
});
return data;
}
//====================================================================
function getRandomValue() {
return Math.floor(Math.random() * 6);
}
//====================================================================
function arcTween(transition) {
console.log('in arctween', transition);
transition.attrTween('d', function (d) {
//console.log('inside attrtween', d);
var interpolate = d3.interpolate(d.endAngleStart, d.endAngle);
return function (t) {
d.arcFn.endAngle(interpolate(t));
return d.arcFn(d);
}
});
}
//====================================================================
function drawChart(chartData) {
var svg = d3.select('body').append('svg');
var gRoot = svg.append('svg:g')
.attr('transform', 'translate(453, 340)');
var arc = d3.svg.arc();
var tau = 1.5 * Math.PI;
var colorScale = d3.scale.linear()
.domain([0, 6])
.interpolate(d3.interpolateRgb)
.range(config.colorRange);
var opacityScale = d3.scale.linear()
.domain([0, 100])
.range([0.3, 1]);
console.log(chartData)
var g = gRoot.selectAll('g.arc')
.data(chartData)
.enter()
.append('g')
.attr('class', 'arc');
var arcPath = g.append('svg:path')
.attr('d', function (d, i) {
var endAngle = d.value;
var arc = d3.svg.arc();
arc
.innerRadius(config.startRadius + i * config.thickness)
.outerRadius(config.startRadius + (i+1) * config.thickness)
.startAngle(0)
.endAngle(endAngle);
d.arcFn = arc;
if (config.animate) {
arc.endAngle(0);
d.endAngleStart = 0;
d.endAngle = endAngle;
}
return arc();
})
.style('fill', function (d) {
return config.colorRange[0];
})
.style('fill-opacity', function (d) {
return 1;
//return opacityScale(d.value);
})
.style('stroke-width', 2)
.style('stroke-opacity', 0.216)
.style('stroke', 'back');
// show labels
g.append('svg:text')
.attr({
x: 2,
y: function (d, i) {
return -config.startRadius - i * config.thickness - 3
}
})
.style('font-size', '11px')
.style('fill', '')
.text(function (d) {
return d.name;
});
if (config.animate) {
arcPath
.transition()
.duration(750)
.call(arcTween)
.style('fill', function (d) {
return colorScale(d.value);
});
} else {
arcPath
.style('fill', function (d) {
return colorScale(d.value);
});
}
}
//====================================================================
function simulateChange() {
var arcPath = d3.selectAll('g.arc path');
arcPath.attr('d', function (d) {
d.value = getRandomValue();
var rndEndAngle = d.value;
if (config.animate) {
d.endAngleStart = d.endAngle;
d.endAngle = rndEndAngle;
} else {
d.arcFn.endAngle(rndEndAngle);
}
return d.arcFn();
});
if (config.animate) {
arcPath
.transition()
.duration(750)
.call(arcTween)
.style('fill', function (d) {
return colorScale(d.value);
});
} else {
arcPath
.style('fill', function (d) {
return colorScale(d.value);
});
}
}
/*
svg.on('click', function () {
simulateChange();
});
*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment