Skip to content

Instantly share code, notes, and snippets.

@karthiir

karthiir/.block

Last active March 12, 2017 18:25
Show Gist options
  • Save karthiir/29a4d5b2460d9e36bd7a2c3e6e1624d9 to your computer and use it in GitHub Desktop.
Save karthiir/29a4d5b2460d9e36bd7a2c3e6e1624d9 to your computer and use it in GitHub Desktop.
Download ZIP
Test Market - Classic Charts
Raw
.block
license: mit
Raw
index.css
svg {
background-color: white;
}
.bar {
shape-rendering: crispEdges;
}
.node {
stroke-width: 1;
stroke: white;
shape-rendering: crispEdges;
}
.arc {
stroke-width: 1;
stroke: white;
stroke-linejoin: round;
}
.radius {
stroke: gray;
stroke-dasharray: 3 3;
}
.polygon {
fill: #DDD;
fill-opacity: 0.5;
stroke: gray;
}
.outer_polygon {
fill: none;
stroke: gray;
stroke-dasharray: 3 3;
}
.dot {
stroke: white;
}
.d3-tip {
font-family: 'Raleway', sans-serif;
font-size: .8em;
line-height: 1;
padding: 7px;
background: black;
color: lightgray;
border-radius: 20px;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A classic comparison" />
<title>A classic comparison</title>
<link rel="stylesheet" href="index.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<script src="jsonp.js" language="JavaScript"></script>
</head>
<body>
<body align=center>
<div class=dropdown></div><br>
<script>
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
function visualise(data1){
data1.forEach(function(d) {
d.name = d.venueName;
d.category = d.name;
d.marketPercent = +(d.marketPercent *100).toFixed(1);
});
var option = ['volume', 'marketPercent','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() {
updateviz(d3.select('select').property('value'))
};
function updateviz(key) {
d3.selectAll("svg").remove();
var format = d3.format(",")
var circs = []
//data.forEach(function(d){ circs.push(d[key])})
var color = d3.scale.category10();
var rscale = d3.scale.linear()
.domain([0,d3.max(circs)])
.range([1,100])
var RADIUS, arc_generator, bars, bl, br, color, data, height, max, nodes, pack, pack_nodes, pack_tree, pie, side, svg, tree, treemap, ul, ur, width, x_scale, y_scale;
data = d3.range(data1.length).map(function(d) {
return {
category: "cat_" + data1[d].name,
value: data1[d][key]
};
});
max = d3.max(data, function(d) {
return d.value;
});
width = 960;
height = 450;
side = Math.min(width, height);
RADIUS = side / 4 - 20;
svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('g').attr({
transform: "translate(" + (width / 2) + ", " + (height / 2) + ")"
});
ul = svg.append("g").attr({
transform: "translate(" + (-side / 4) + ", " + (-side / 4) + ")"
});
ur = svg.append("g").attr({
transform: "translate(" + (+side / 4) + ", " + (-side / 4) + ")"
});
bl = svg.append("g").attr({
transform: "translate(" + (-side / 4) + ", " + (+side / 4) + ")"
});
br = svg.append("g").attr({
transform: "translate(" + (+side / 4) + ", " + (+side / 4) + ") rotate(180)"
});
color = d3.scale.ordinal().domain(data.map(function(d) {
return d.category;
})).range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"]);
y_scale = d3.scale.linear().domain([0, max]).range([0, 2 * RADIUS]);
x_scale = d3.scale.ordinal().domain(data.map(function(d) {
return d.category;
})).rangeRoundBands([-RADIUS, RADIUS], .05);
bars = ul.selectAll('.bar').data(data);
bars.enter().append('rect').attr({
"class": 'bar',
x: function(d) {
return x_scale(d.category);
},
y: function(d) {
return RADIUS - y_scale(d.value);
},
width: x_scale.rangeBand(),
height: function(d) {
return y_scale(d.value);
},
fill: function(d) {
return color(d.category);
}
});
pie = d3.layout.pie().sort(null).value(function(d) {
return d.value;
});
arc_generator = d3.svg.arc().innerRadius(0).outerRadius(RADIUS);
ur.selectAll('.arc').data(pie(data)).enter().append('path').attr({
"class": 'arc',
d: arc_generator,
fill: function(d) {
return color(d.data.category);
}
});
treemap = d3.layout.treemap().size([2 * RADIUS, 2 * RADIUS]).value(function(node) {
return node.value;
}).sort(function(a, b) {
return d3.descending(a.category, b.category);
});
tree = {
children: data
};
nodes = treemap.nodes(tree);
bl.selectAll('.node').data(nodes.filter(function(node) {
return node.depth === 1;
})).enter().append('rect').attr({
"class": 'node',
x: function(node) {
return node.x - RADIUS;
},
y: function(node) {
return node.y - RADIUS;
},
width: function(node) {
return node.dx;
},
height: function(node) {
return node.dy;
},
fill: function(d) {
return color(d.category);
}
});
pack = d3.layout.pack().size([2.4 * RADIUS, 2.4 * RADIUS]).value(function(node) {
return node.value;
}).sort(function(a, b) {
return d3.descending(a.category, b.category);
}).padding(2);
pack_tree = {
children: data
};
pack_nodes = pack.nodes(pack_tree);
br.selectAll('.bubble').data(nodes.filter(function(node) {
return node.depth === 1;
})).enter().append('circle').attr({
"class": 'bubble',
cx: function(node) {
return node.x - 1.2 * RADIUS;
},
cy: function(node) {
return node.y - 1.2 * RADIUS;
},
r: function(node) {
return node.r;
},
fill: function(d) {
return color(d.category);
}
});
tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.name + ": " + format(d[key]) });
svg.call(tip)
svg.selectAll('circle')
.data(data1)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.selectAll('rect')
.data(data1)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.selectAll('path')
.data(data1)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.selectAll('.node')
.data(data1)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
updateviz(key)
}
</script>
</body>
</html>
Raw
index.js
(function() {
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
function visualise(data){
data.forEach(function(d) {
d.name = d.venueName;
d.marketPercent = +(d.marketPercent *100).toFixed(1);
});
var option = ["Gauge1",'Guage2','Guage3','Gauge4']
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() {
updateviz(d3.select('select').property('value'))
};
function updateviz(key) {
d3.selectAll("svg").remove();
var format = d3.format(",")
var circs = []
//data.forEach(function(d){ circs.push(d[key])})
var color = d3.scale.category10();
var rscale = d3.scale.linear()
.domain([0,d3.max(circs)])
.range([1,100])
var RADIUS, arc_generator, bars, bl, br, color, data, height, max, nodes, pack, pack_nodes, pack_tree, pie, side, svg, tree, treemap, ul, ur, width, x_scale, y_scale;
data = d3.range(7).map(function(d) {
return {
category: "cat_" + d,
value: Math.random()
};
});
max = d3.max(data, function(d) {
return d.value;
});
width = 960;
height = 500;
side = Math.min(width, height);
RADIUS = side / 4 - 20;
svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('g').attr({
transform: "translate(" + (width / 2) + ", " + (height / 2) + ")"
});
ul = svg.append("g").attr({
transform: "translate(" + (-side / 4) + ", " + (-side / 4) + ")"
});
ur = svg.append("g").attr({
transform: "translate(" + (+side / 4) + ", " + (-side / 4) + ")"
});
bl = svg.append("g").attr({
transform: "translate(" + (-side / 4) + ", " + (+side / 4) + ")"
});
br = svg.append("g").attr({
transform: "translate(" + (+side / 4) + ", " + (+side / 4) + ") rotate(180)"
});
color = d3.scale.ordinal().domain(data.map(function(d) {
return d.category;
})).range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"]);
y_scale = d3.scale.linear().domain([0, max]).range([0, 2 * RADIUS]);
x_scale = d3.scale.ordinal().domain(data.map(function(d) {
return d.category;
})).rangeRoundBands([-RADIUS, RADIUS], .05);
bars = ul.selectAll('.bar').data(data);
bars.enter().append('rect').attr({
"class": 'bar',
x: function(d) {
return x_scale(d.category);
},
y: function(d) {
return RADIUS - y_scale(d.value);
},
width: x_scale.rangeBand(),
height: function(d) {
return y_scale(d.value);
},
fill: function(d) {
return color(d.category);
}
});
pie = d3.layout.pie().sort(null).value(function(d) {
return d.value;
});
arc_generator = d3.svg.arc().innerRadius(0).outerRadius(RADIUS);
ur.selectAll('.arc').data(pie(data)).enter().append('path').attr({
"class": 'arc',
d: arc_generator,
fill: function(d) {
return color(d.data.category);
}
});
treemap = d3.layout.treemap().size([2 * RADIUS, 2 * RADIUS]).value(function(node) {
return node.value;
}).sort(function(a, b) {
return d3.descending(a.category, b.category);
});
tree = {
children: data
};
nodes = treemap.nodes(tree);
bl.selectAll('.node').data(nodes.filter(function(node) {
return node.depth === 1;
})).enter().append('rect').attr({
"class": 'node',
x: function(node) {
return node.x - RADIUS;
},
y: function(node) {
return node.y - RADIUS;
},
width: function(node) {
return node.dx;
},
height: function(node) {
return node.dy;
},
fill: function(d) {
return color(d.category);
}
});
pack = d3.layout.pack().size([2.4 * RADIUS, 2.4 * RADIUS]).value(function(node) {
return node.value;
}).sort(function(a, b) {
return d3.descending(a.category, b.category);
}).padding(2);
pack_tree = {
children: data
};
pack_nodes = pack.nodes(pack_tree);
br.selectAll('.bubble').data(nodes.filter(function(node) {
return node.depth === 1;
})).enter().append('circle').attr({
"class": 'bubble',
cx: function(node) {
return node.x - 1.2 * RADIUS;
},
cy: function(node) {
return node.y - 1.2 * RADIUS;
},
r: function(node) {
return node.r;
},
fill: function(d) {
return color(d.category);
}
});
}
updateviz(key)
}
}).call(this);
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