Created
April 17, 2016 14:33
-
-
Save thomaskolasa/fdbc2cea9513cdeccfe2ce13c9def01d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
// set width/height | |
var w = 1000; | |
var h = 600; | |
var padding = 60; | |
// load csv and it only exists within the callback function! | |
d3.csv('d3df.csv', function(error, dataset) { | |
dataset.forEach(function(d) { | |
d.Distance = +d.Distance; | |
d.Period = +d["Period..minutes."]; | |
}); | |
// Scaling functions | |
var xScale = d3.scale.linear() | |
//.domain([0, d3.max(dataset, function(d) { return d.Period; })]) | |
.domain([0,1]) | |
.range([padding, w - padding * 2]); | |
var yScale = d3.scale.linear() | |
.domain([0, d3.max(dataset, function(d) { return d.Distance; })]) | |
.range([h - padding, padding]); | |
// Define Axes | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(5) | |
.tickFormat(""); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.ticks(5); | |
// Create SVG | |
var svg = d3.select("#wrapper") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
// Create dots | |
svg.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("cx", function(d) { | |
//return xScale(d.Period); | |
return xScale(Math.random()); | |
}) | |
.attr("cy", function(d) { | |
return yScale(d.Distance); | |
}) | |
.attr("r", 2) | |
// filter colors | |
.attr("fill", function(d) { | |
// return "rgb(0, 0, " + (d["Distance"]) + ")"; | |
return "rgb(0, 0, 0)"; | |
}) | |
.on("mouseover", function(d) { | |
var xValue = parseFloat(d3.select(this).attr("cx")); | |
var yValue = parseFloat(d3.select(this).attr("cy")); | |
d3.select("#tooltip") | |
.style("left", xValue + "px") | |
.style("top", yValue + "px") | |
.select("#name") | |
.html(d["Name.of.Satellite..Alternate.Names"] + "<br>" + | |
"Country: " + d["Country.Org.of.UN.Registry"] + "<br>" + | |
"Use: " + d["Users"] + "<br>" + | |
"Purpose: " + d["Purpose"]); | |
console.log(d); | |
d3.select("#tooltip").classed("hidden", false); | |
}) | |
.on("mouseout", function() { | |
d3.select("#tooltip").classed("hidden", true); | |
}); | |
// Append axes to SVG | |
svg.append("g") | |
.attr("class", "axis") | |
.attr("transform", "translate(0," + (h - padding) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "axis") | |
.attr("transform", "translate(" + padding + ",0)") | |
.call(yAxis); | |
// for check boxes | |
d3.selectAll("[name=user]").on("change", function() { | |
var selected = this.value; | |
display = this.checked ? "inline" : "none"; | |
svg.selectAll("circle") | |
.filter(function(d) {return selected == d.Users;}) | |
.attr("display", display); | |
}); | |
d3.selectAll("[name=v]").on("change", function() { | |
var selected = this.value; | |
display = this.checked ? "inline" : "none"; | |
svg.selectAll("circle") | |
.filter(function(d) {return selected == d["Country.Org.of.UN.Registry"];}) | |
.attr("display", display); | |
}); | |
}); //end d3.csv() | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment