Second demo of consuming Heroku DataClips with D3.js.
Data source: https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk (.json)
forked from dustinlarimer's block: DataClips + D3.js Force-Directed
forked from karthiir's block: X DataClips + D3.js Force-Directed
xxxxxxxxxx
<meta charset="utf-8">
<style>
body { font-family: sans-serif; }
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>
<body align=center>
<script>
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);
//d.value = rscale(d);
console.log(d.value)
//console.log("Spent $" + d.amount + " on " + d.date);
});
var option = ["volume", "marketPercent", "tapeA", "tapeB", "tapeC"]
var key = option[0]
var select = d3.select('body')
.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.select("svg").remove();
var format = d3.time.format("%Y-%m-%d"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
var force = d3.layout.force()
.gravity(.003)
.size([width, height]);
var format = d3.format(",")
var circs = []
data.forEach(function(d){ circs.push(d[key])})
console.log(circs)
var color = d3.scale.category10();
var rscale = d3.scale.sqrt()
.domain([d3.min(circs),d3.max(circs)])
.range([1,75])
var svg = d3.select("body")
.append("svg")
.style('background','black')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
force
.nodes(data)
.start();
var node = svg.selectAll("g.node")
.data(data)
.enter()
.append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function(d) { return rscale(d[key]) })
.attr("opacity", .67)
.attr("fill", function(d,i){return color(i)});
node.append("text")
.text(function(d){ return d.name.toString(); })
.attr("text-anchor", "middle")
.attr('fill', '#fff')
.attr('font-size', 15)
.attr('dy', -5);
node.append("text")
.text(function(d){return format(d[key]); })
.attr("text-anchor", "middle")
.attr('fill', '#fff')
.attr('font-size', 15)
.attr('dy', 15);
force.on("tick", function() {
node.attr('transform', function(d) {
return 'translate('+ Math.max(20, Math.min(width-20, d.x)) + ',' + Math.max(20, Math.min(height-20, d.y)) + ')';
});
});
}
updateviz(key)
}
</script>
</body>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js