Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda

DimsumPanda/Thumbs.db

Last active November 18, 2015 02:19
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 DimsumPanda/a94f6c0c3121ad2a4f17 to your computer and use it in GitHub Desktop.
Save DimsumPanda/a94f6c0c3121ad2a4f17 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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
</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 type="button" class="btn btn-default" id="data1">Set Data to data 1</button>
<button type="button" class="btn btn-default" 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 colors = d3.scale.category10();
var width = 500;
var height = 500;
var margin = { top: 20, right: 10, bottom: 50, left: 50 };
var dotRadius = 3;
//setup the svg
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left])
.domain([-1, 100]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top ])
.domain([-1, 100]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var vis = d3.select("#chart").append("svg");
// Add svg to the div#chart already in the html.
// Create dimensions of svg
var svg = vis
.attr("width", width+100)
.attr("height", height+100); // adding some random padding
// ===================================================================
// Adding the Axes
// ===================================================================
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);
//setup our ui buttons:
d3.select("#data1")
.on("click", function(d,i) {
d3.select("button#data2").classed("selected", false);
d3.select("button#data1").classed("selected", true);
redraw(data1);
});
d3.select("#data2")
.on("click", function(d,i) {
d3.select("button#data1").classed("selected", false);
d3.select("button#data2").classed("selected", true);
redraw(data2);
});
//make the dots
//TODO: make the button for data1 look selected when the page loads.
d3.select("button#data1").classed("selected", true);
redraw(data1);
// This function is used to draw and update the data. It takes different data each time.
var curSelection = button.property("id");
// function filter() {
// // Handle the menu change -- filter the data set if needed, rerender:
// }
function redraw(data) {
//TODO: Fill this in with scatter plot enter/update/exit stuff including transitions.
// Include axes that transition.
xScale.domain([
d3.min(data, function(d) {
return +d.x;
}) - 2,
d3.max(data, function (d) {
return +d.x;
}) + 2
]);
yScale.domain([
d3.min(data, function(d) {
return +d.y;
}) - 2,
d3.max(data, function (d) {
return +d.y;
}) + 2
]);
// data join
var circles = svg.selectAll("circle")
.data(data, function(d) {return d.country;}); // key function!
// enter and create new ones if needed
circles
.enter()
.append("circle")
// this section is to fix some of the animation direction problems
.attr("cx", function (d) {
if (curSelection == "data1") {
return width - margin.right;
}
else if (curSelection == "data2") {
return margin.left;
}
})
.attr("cy", function (d) {
if (curSelection == "data1") {
return margin.top;
}
else if (curSelection == "data2") {
return height - margin.bottom;
}
}) //
.attr("class", "dots")
.attr("fill", function (d) {
return colors(d.region);
});
// transition of them
circles
.transition()
.duration(2000)
.attr("cx", function(d) {
return xScale(+d.x);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.y);
})
.attr("r", function() {
return dotRadius;
});
// fade out the ones that aren't in the current data set
circles
.exit()
.transition()
.duration(1000)
.style("opacity", 0)
.remove();
// Update the axes - also animated. this is really easy.
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
// Update Y Axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
// label the dots if you're only showing 10.
// if (curSelection !== "all") {
// data join with a key
var labels = svg.selectAll("text.dotlabels")
.data(data, function(d) {
return d.country;
});
// enter and create any news ones we need. Put minimal stuff here.
// Creates all of them
labels
.enter()
.append("text")
.attr("class", "dotlabels")
.style("opacity", 0)
.text(function(d) {return d.country});
// transition them.
labels.exit().remove();
labels.transition()
.duration(2000)
.style("opacity", 1)
.attr("transform", function(d) {
return "translate(" + xScale(+d.x) + "," + yScale(+d.y) + ")";
})
.attr({
"dx": "4px",
"dy": "-5px"
})
.attr("class", "dotlabels");
// remove ones that we don't have now
// these could have a transition too...
// } else {
// // if we're showing "all countries" - fade out any labels.
// svg.selectAll("text.dotlabels")
// .transition()
// .duration(1000)
// .style("opacity", 0)
// .remove();
// }
} // end of draw function
</script>
</body>
</html>
Raw
style.css
body {
padding: 50px;
font-family: sans-serif;
font-size: 12pt;
}
button {
margin: 5px;
font-size: 15pt;
padding: 3px;
cursor: pointer;
}
input {
margin: 5px;
font-size: 15pt;
padding: 3px;
}
p {
width: 500px;
}
.selected {
background-color: rgba(0,153,255, 0.5);
}
.data1 {
width: 200px;
position: absolute;
left: 600px;
top: 300px;
}
.data2 {
width: 200px;
position: absolute;
left: 600px;
top: 450px;
}
.clicker {
font-weight: bolder;
color: red;
cursor: pointer;
}
svg {
background-color: white;
}
/*.dots {
fill: steelblue;
}*/
.dotlabels {
font-size: 10px;
color: black;
}
.highlighted {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment