Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda

DimsumPanda/index.html

Created December 13, 2015 03:43
Show Gist options
  • Save DimsumPanda/dfd3f56b6a1d37a242d7 to your computer and use it in GitHub Desktop.
Save DimsumPanda/dfd3f56b6a1d37a242d7 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot Practice
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="data1990">1990</button>
<button type="button" class="btn btn-default" id="data2015">2015</button>
</div>
<div id="vis_scatter">
</div>
<script src="//d3js.org/queue.v1.min.js"></script>
<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_scatter = 500;
var height_scatter = 500;
var margin_scatter = { top: 20, right: 10, bottom: 50, left: 50 };
var dotRadius_scatter = 3;
//setup the svg
var xScale_scatter = d3.scale.linear()
.range([ margin_scatter.left, width_scatter - margin_scatter.right - margin_scatter.left])
.domain([-1, 100]);
var xAxis_scatter = d3.svg.axis()
.scale(xScale_scatter)
.orient("bottom")
.ticks(10);
var yScale_scatter = d3.scale.linear()
.range([ height_scatter - margin_scatter.bottom, margin_scatter.top ])
.domain([-1, 100]);
var yAxis_scatter = d3.svg.axis()
.scale(yScale_scatter)
.orient("left");
var vis_scatter = d3.select("#vis_scatter").append("svg");
// Add svg to the div#chart already in the html.
// Create dimensions of svg
var svg_scatter = vis_scatter
.attr("width", width_scatter+100)
.attr("height", height_scatter+100); // adding some random padding
// ===================================================================
// Adding the Axes
// ===================================================================
svg_scatter.append("g")
.attr("class", "x_scatter axis_scatter")
.attr("transform", "translate(0," + (height_scatter - margin_scatter.bottom) + ")")
.call(xAxis_scatter);
svg_scatter.append("g")
.attr("class", "y_scatter axis_scatter")
.attr("transform", "translate(" + (margin_scatter.left) + ",0)")
.call(yAxis_scatter);
//setup our ui buttons:
queue()
.defer(d3.csv, "scatter1990.csv")
.defer(d3.csv, "scatter2015.csv") // process
.await(loaded_scatter);
var curSelection_scatter = button.property("id");
function loaded_scatter(error, data1990, data2015) {
console.log("data1990", data1990);
console.log("data2015", data2015);
d3.select("#data1990")
.on("click", function(d,i) {
d3.select("button#data2015").classed("selected", false);
d3.select("button#data1990").classed("selected", true);
curSelection_scatter = "data1990";
redraw(data1990, curSelection_scatter);
});
d3.select("#data2015")
.on("click", function(d,i) {
d3.select("button#data1990").classed("selected", false);
d3.select("button#data2015").classed("selected", true);
vcurSelection_scatter = "data2015";
redraw(data2015, curSelection_scatter);
});
d3.select("button#data1990").classed("selected", true);
redraw(data1990, curSelection_scatter);
} // end of d3.csv
//make the dots
//TODO: make the button for data1 look selected when the page loads.
// This function is used to draw and update the data. It takes different data each time.
// function filter() {
// // Handle the menu change -- filter the data set if needed, rerender:
// }
function redraw(data, curSelection_scatter) {
//TODO: Fill this in with scatter plot enter/update/exit stuff including transitions.
// Include axes that transition.
xScale_scatter.domain([
d3.min(data, function(d) {
return +d.water;
}) - 2,
d3.max(data, function (d) {
return +d.water;
}) + 2
]);
yScale_scatter.domain([
d3.min(data, function(d) {
return +d.childMortality;
}) - 2,
d3.max(data, function (d) {
return +d.childMortality;
}) + 2
]);
var circles_scatter = svg_scatter.selectAll("circle")
.data(data, function(d) {return d.Country;}); // key function!
// enter and create new ones if needed
circles_scatter
.enter()
.append("circle")
// this section is to fix some of the animation direction problems
.attr("cx", function (d) {
if (curSelection_scatter == "data1990") {
// return width_scatter - margin_scatter.right;
return margin_scatter.left;
}
else if (curSelection_scatter == "data2015") {
return margin_scatter.left;
}
})
.attr("cy", function (d) {
if (curSelection_scatter == "data1990") {
return height_scatter - margin_scatter.bottom;
}
else if (curSelection_scatter == "data2015") {
return height_scatter - margin_scatter.bottom;
// return height_scatter;
}
}) //
.attr("class", "dots_scatter")
.attr("fill", function (d) {
if (d.Country == "Malawi" || d.Country == "Niger"){
return "rgb(0,153,255)";
}
else return "darkorange";
});
// transition of them
circles_scatter
.transition()
.duration(2000)
.attr("cx", function(d) {
return xScale_scatter(+d.water);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale_scatter(+d.childMortality);
})
.attr("r", function() {
return dotRadius_scatter;
});
// fade out the ones that aren't in the current data set
circles_scatter
.exit()
.transition()
.duration(1000)
.style("opacity", 0)
.remove();
// Update the axes - also animated. this is really easy.
svg_scatter.select(".x_scatter.axis_scatter")
.transition()
.duration(1000)
.call(xAxis_scatter);
// Update Y Axis
svg_scatter.select(".y_scatter.axis_scatter")
.transition()
.duration(1000)
.call(yAxis_scatter);
var labels_scatter = svg_scatter.selectAll("text.dotlabels_scatter")
.data(data, function(d) {
if (d.Country == "Malawi" || d.Country == "Niger"){
return d.Country;
} else {}
});
// label the dots if you're only showing 10.
// if (curSelection !== "all") {
// data join with a key
// enter and create any news ones we need. Put minimal stuff here.
// Creates all of them
labels_scatter
.enter()
.append("text")
.attr("class", "dotlabels_scatter")
.style("opacity", 0)
.text(function(d) {return d.Country});
// transition them.
labels_scatter.exit().remove();
labels_scatter.transition()
.duration(2000)
.style("opacity", 1)
.attr("transform", function(d) {
return "translate(" + xScale_scatter(+d.water) + "," + yScale_scatter(+d.childMortality) + ")";
})
.attr({
"dx": "4px",
"dy": "-5px"
})
.attr("class", "dotlabels_scatter");
// 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
scatter1990.csv
Country childMortality water
Malawi 242.4 36.1
Rwanda 151.8 57
Ethiopia 204.6 3
Niger 328.2 28.8
Uganda 187.1 35.7
Tanzania 165.2 45.2
Eritrea 151.4 43.9
Madagascar 160.7 16.5
Mozambique 239.7 22.8
Zambia 190.6 23.6
Senegal 140.4 41.3
Guinea 238.2 39.1
Guinea-Bissau 229.3 31.7
Gambia, The 170.2 69.6
Burkina Faso 202.2 38.6
Mali 254.4 19.3
Sierra Leone 264.3 20.3
Burundi 171.8 67
Kenya 102.3 33
Ghana 127.4 39.1
Nigeria 212.5 24.6
Congo, Dem. Rep. 186.5 24.7
Togo 146.2 34.8
Sudan 127.5 61.3
Benin 179.5 48.8
Mauritius 23.1 98.7
Comoros 125.1 87.8
Cote d'Ivoire 152.6 66.7
Namibia 73.5 58.4
Cameroon 138 33.5
Chad 214.6 37.2
South Africa 59.9 66.3
Angola 226 43.5
Mauritania 118.1 24.9
Central African Republic 176.5 46.4
Botswana 54.2 86.9
Swaziland 74.7 24.9
Seychelles 16.5 95.7
Zimbabwe 75.8 71.2
Lesotho 88.1 74.9
Raw
scatter2015.csv
Country childMortality water
Angola 156.9 28.2
Burundi 81.7 73.8
Benin 99.5 72.1
Burkina Faso 88.6 75.8
Botswana 43.6 92.3
Central African Republic 130.1 54.4
Cote d'Ivoire 92.6 68.8
Cameroon 87.9 52.7
Congo, Rep. 45 40
Comoros 73.5 89.1
Cabo Verde 24.5 87.3
Eritrea 46.5 53.3
Ethiopia 59.2 48.6
Gabon 50.8 66.7
Ghana 61.6 84
Guinea 93.7 67.4
Gambia, The 68.9 84.4
Guinea-Bissau 92.5 60.3
Equatorial Guinea 94.1 31.5
Kenya 49.4 56.8
Liberia 69.9 62.6
Lesotho 90.2 77
Madagascar 49.6 35.3
Mali 114.7 64.1
Mozambique 78.5 37
Mauritania 84.7 57.1
Mauritius 13.5 99.8
Malawi 64 89.1
Namibia 45.4 84.6
Niger 95.5 48.6
Nigeria 108.8 57.3
Rwanda 41.7 71.9
Senegal 47.2 67.3
Sierra Leone 120.4 47.8
South Sudan 92.6 56.9
Sao Tome and Principe 47.3 93.6
Swaziland 60.7 68.9
Seychelles 13.6 95.7
Chad 138.7 44.8
Togo 78.4 44.2
Tanzania 48.7 45.5
Uganda 54.6 75.8
South Africa 40.5 81.4
Congo, Dem. Rep. 98.3 31.2
Zambia 64 51.3
Zimbabwe 70.7 67.3
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);
}
.data1990 {
width: 200px;
position: absolute;
left: 600px;
top: 300px;
}
.data2015 {
width: 200px;
position: absolute;
left: 600px;
top: 450px;
}
.clicker {
font-weight: bolder;
color: red;
cursor: pointer;
}
svg_scatter {
background-color: white;
}
/*.dots {
fill: steelblue;
}*/
.dotlabels_scatter {
font-size: 10px;
color: black;
}
.highlighted {
fill: orange;
}
.axis_scatter path,
.axis_scatter line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis_scatter 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