Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/index.html

Last active October 22, 2015 17:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yan2014/9e7a8d59f08e56e199eb to your computer and use it in GitHub Desktop.
Save yan2014/9e7a8d59f08e56e199eb to your computer and use it in GitHub Desktop.
Download ZIP
Week 8: Scatter Homework
Raw
index.html
<!DOCTYPE html>
<!-- Modified example from enjalot: http://bl.ocks.org/enjalot/1429426 -->
<html>
<head>
<title>Bar Transition Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
.selected {
border: 1px solid #0000ff;
}
.dotlabels {
font-size: 10px;
color: black;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
body {
padding: 50px;
font-family: sans-serif;
font-size: 12pt;
}
#buttons{
padding-bottom: 10px;
}
button {
margin: 5px;
font-size: 15pt;
padding: 3px;
cursor: pointer;
}
input {
margin: 5px;
font-size: 15pt;
padding: 3px;
}
p {
width: 500px;
}
.data1 {
width: 200px;
position: absolute;
left: 600px;
top: 300px;
}
.data2 {
width: 200px;
position: absolute;
left: 600px;
top: 450px;
}
</style>
</head>
<body>
<h2>Homework for Fake Scatter Update</h2>
<p>Make this fake data work with the enter/update/exit pattern as scatterplots.
<div id="buttons">
<button id="data1">Set Data to data 1</button>
<button id="data2">Set Data to data 2</button>
</div>
<div id="chart">
</div>
<script type="text/javascript">
var data1 = [
{country: "Belgium", x: 5, y: 24, region: "Europe"}, // in data set 2
{country: "USA", x: 20, y: 43, region: "Americas"}, // in data set 2
{country: "China", x: 55, y: 24, region: "Asia"}, // in data set 2
{country: "Russia", x: 15, y: 30, region: "Asia"},
{country: "France", x: 60, y: 43, region: "Europe"}, // in data set 2
{country: "Chile", x: 89, y: 34, region: "Americas"}
];
var data2 = [
{country: "Belgium", x: 5, y: 24, region: "Europe"},
{country: "USA", x: 20, y: 43, region: "Americas"},
{country: "Spain", x: 35, y: 24, region: "Europe"},
{country: "China", x: 55, y: 24, region: "Asia"},
{country: "UK", x: 90, y: 10, region: "Europe"},
{country: "Brazil", x: 40, y: 20, region: "Americas"},
{country: "France", x: 60, y: 43, region: "Europe"},
{country: "Canada", x: 39, y: 66, region: "Americas"},
{country: "Argentina", x: 99, y: 30, region: "Americas"}
];
var width = 400;
var height = 400;
var margin = { top: 20, right: 10, bottom: 50, left: 50 };
//setup the svg
var vis = d3.select("#chart").append("svg");
var svg = vis
.attr("width", width)
.attr("height", height); // adding some random padding
//setup our ui buttons:
d3.select("#data1")
.on("click", function(d,i) {
var thisButton = d3.select(this);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
redraw(data1);
});
d3.select("#data2")
.on("click", function(d,i) {
var thisButton = d3.select(this);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
redraw(data2);
});
var xScale = d3.scale.linear()
.range([margin.left, width - margin.right - margin.left]);
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.innerTickSize([0]);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.innerTickSize([0]);
//create axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
//make the dots
//TODO: make the button for data1 look selected when the page loads.
redraw(data1);
d3.select("button#data1").classed("selected", true);
// This function is used to draw and update the data. It takes different data each time.
function redraw(data) {
//TODO: Fill this in with scatter plot enter/update/exit stuff including transitions.
xScale
.domain([-2, d3.max(data, function(d) { return d.x; })+2])
yScale
.domain([-2, d3.max(data, function(d) { return d.y; })+2])
//Create circles
var circles=svg.selectAll("circle")
.data(data, function (d) { return d.country;});
circles.enter()
.append("circle");
circles.exit()
.transition()
.duration(500)
.ease("exp")//the speed of transition
.attr("r", 0)//shrink the width to 0
.remove();
circles
.transition()
.duration(500)
.ease("quad")
.attr("cx", function(d) {
return xScale(d.x);
})
.attr("cy", function(d) {
return yScale(d.y);
})
.attr("r", 4)
.attr("fill", function(d){if(d.region==="Europe"){return "steelblue";}
else if(d.region==="Americas"){return "green";}
else if(d.region==="Asia"){return "orange";}}
);
//create labels
var labels = svg.selectAll("text.dotlabels")
.data(data, function(d) {
return d.country;
});
labels
.enter()
.append("text");
labels.exit()
.style("opacity", 0)
.remove(); // these could have a transition too...
// transition them.
labels.transition()
.duration(500)
.attr("transform", function(d) {
return "translate(" + xScale(+d.x) + "," + yScale(+d.y) + ")";
})
.attr({
"dx": "4px",
"dy": "-5px"
})
.attr("class", "dotlabels")
.style("opacity", 1)
.text(function(d) {return d.country});
// remove ones that we don't have now
// Include axes that transition.
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
// Update Y Axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
} // end of draw function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment