Skip to content

Instantly share code, notes, and snippets.

@iexviz

iexviz/.block

Last active March 15, 2017 03:55
Show Gist options
  • Save iexviz/023b40212c469b75fc084813fc4458ba to your computer and use it in GitHub Desktop.
Save iexviz/023b40212c469b75fc084813fc4458ba to your computer and use it in GitHub Desktop.
Download ZIP
IEX Market - HBar Chart
Raw
.block
height: 930
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.bar rect {
//fill: orange;
}
.bar text.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
</style>
<body align=center>
<span class=dropdown></span><span class=dropdown2></span><br>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>
<script>
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
function visualise(data){
var margin = {top: 30, right: 300, bottom: 0, left:120},
w = 960 - margin.left - margin.right,
h = 1000 - margin.top - margin.bottom;
m = [30,300,0,120]
var x = d3.scale.linear().range([50, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h/4], .1);
var formatNumber = d3.format(".0f"),
formatBillion = function(x) { return formatNumber(x / 1e9) + "B"; },
formatMillion = function(x) { return formatNumber(x / 1e6) + "M"; },
formatThousand = function(x) { return x+"" };
function formatAbbreviation(x) {
var v = Math.abs(x);
return (v >= .9995e9 ? formatBillion
: v >= .9995e6 ? formatMillion
: formatThousand)(x);
}
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h).tickFormat(formatAbbreviation),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
;
var format = d3.format(",.0f");
var format2 = d3.format(",.2f");
data.forEach(function(d) {
d.name = d.venueName;
d.marketPercent = (d.marketPercent*100).toFixed(3);
});
var data2=data
var option = ["volume", "marketPercent", "tapeA", "tapeB","tapeC"]
var key = option[0]
var option2 = ["sortvalue", "sortkey"]
var key2 = option2[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() {
updateviz(d3.select('.select').property('value'),d3.select('.select2').property('value'))
};
var select2 = d3.select('.dropdown2')
.append('select')
.style('font-size', '20px')
.attr('class','select2')
.on('change',onchange2);
var options = select2
.selectAll('option2')
.data(option2).enter()
.append('option')
.text(function (d) { return d; });
function onchange2() {
updateviz(d3.select('.select').property('value'),d3.select('.select2').property('value')) };
function updateviz(key,key2) {
data=[]
data2.forEach(function(d){data.push(d)});
d3.select("svg").remove();
data.forEach(function(d) {
d.value = d[key];
});
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// Parse numbers, and sort by value.
data.forEach(function(d) { d.value = +d.value; });
if(key2 == "sortvalue") {
data.sort(function(a, b) { return b.value - a.value; });
}
// Set the scale domain.
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.name; }));
var bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
clist = ["#1b9e77", "#a04a2b", "#9467bd", "#4a4685", "#e7298a", "#66a61e",
"#02aee3", "#debf44", "#666666","#d96d02", "#026bd4","#c803d2",
"#c20346"]
color = d3.scale.ordinal().domain(data.map(function(d) {
return d.name;
})).range();
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("fill",function(d){
if(d.name == 'TRF Volume') {return clist[0]}
if(d.name == 'NYSE') {return clist[1]}
if(d.name == 'NYSE Arca') {return clist[1]}
if(d.name == 'NYSE MKT') {return clist[1]}
if(d.name == 'BATS BZX') {return clist[2]}
if(d.name == 'BATS BYX') {return clist[2]}
if(d.name == 'EDGX') {return clist[2]}
if(d.name == 'EDGA') {return clist[2]}
if(d.name == 'IEX') {return "orange"}
if(d.name == 'NASDAQ') {return clist[3]}
if(d.name == 'NASDAQ PSX') {return clist[3]}
if(d.name == 'NASDAQ BX') {return clist[3]}
if(d.name == 'CHX') {return clist[4]}
})
.attr("height", y.rangeBand());
bar.append("text")
.attr("class", "value")
.attr("x", function(d) { return x(d.value); })
.attr("y", y.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) {
if(key == "marketPercent") { return format2(d.value)+"%"}
return format(d.value); });
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
updateviz(key,key2)
}
</script>
Raw
jsonp.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));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment