Skip to content

Instantly share code, notes, and snippets.

@iexviz

iexviz/.block

Last active March 23, 2017 02:02
Show Gist options
  • Save iexviz/0f70cef2475c6eaefb0b3ffcba1c4583 to your computer and use it in GitHub Desktop.
Save iexviz/0f70cef2475c6eaefb0b3ffcba1c4583 to your computer and use it in GitHub Desktop.
Download ZIP
IEX Market - Arc and Rings
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body align=center>
<div class=dropdown></div><br>
<style>
text {
font-family: Georgia, Arial, sans-serif;
font-size: 15px;
fill: black;
}
.gold {
fill: gold;
}
.blue {
fill: blue;
}
.red {
fill: red;
}
.d3-tip {
font-family: 'Raleway', sans-serif;
font-size: .8em;
line-height: 1;
padding: 7px;
background: black;
color: lightgray;
border-radius: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"> </script>
<script src="karthiviz.js"></script>
<script>
function updateviz(key) {
var width = 100,
height = 150,
τ = 2 * Math.PI; // http://tauday.com/tau-manifesto
// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc()
.innerRadius(30)
.outerRadius(45)
.startAngle(0);
// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
data.forEach(function(d,i) {
d.id = d.name;
d.percent = d.value;
});
var rings = data;
var d3Rings = [];
var convertPercentToAngle = (percent) => { return ( percent / 100 ) * τ };
var createRings = function(){
_.each(rings, function(ring,index){
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("align", "center")
var d3Ring = svg
.append("g")
.attr("transform", "translate(" + 45 + "," + 45 + ")")
.attr("id",ring.id);
// background
d3Ring
.append("path")
.datum({endAngle: τ})
.style("fill", "#ddd")
.attr("d", arc);
// foreground
var foreground = d3Ring
.append("path")
.datum({endAngle: 0})
.style("fill", color(ring))
.style("stroke", "none")
.style("stroke-width", "0px")
.style("opacity", 1)
.attr("d", arc);
// text
d3Ring
.append("text")
.attr("x", -22)
.attr("y", 8)
.text(ring.percent + "%")
//.attr("class", ring.id);
svg
.append("text")
.attr("x", 25)
.attr("y", 110)
.text(ring.name)
.style("font-size", "12px")
var angle = convertPercentToAngle(ring.percent);
foreground
.transition()
.duration(10)
// .delay(500 * index)
.call(arcTween, angle);
d3Rings.push(d3Ring);
});
}
createRings();
function arcTween(transition, newAngle) {
transition.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
};
});
}
}
</script>
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,100])
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("svg").call(tip)
d3.selectAll('svg')
.data(data)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment