Created
March 12, 2016 18:38
-
-
Save luluwuluying/ed843a39eb2883e32911 to your computer and use it in GitHub Desktop.
My Update Plot
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
<!DOCTYPE html> | |
<!-- A modified example from Scott Murray's Knight d3 course. --> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Time spent in primary activities</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
font-family: Helvetica, Arial, sans-serif; | |
padding: 50px; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
color: slategray; | |
} | |
p { | |
font-size: 14px; | |
margin: 10px 0 0 0; | |
color: slategray; | |
} | |
.clicker { | |
font-weight: bolder; | |
color: red; | |
cursor: pointer; | |
} | |
svg { | |
background-color: white; | |
} | |
.dots { | |
fill: hotpink; | |
opacity: 1; | |
} | |
.dotlabels { | |
font-size: 10px; | |
color: steelblue; | |
} | |
.highlighted { | |
fill: orange; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: gray; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
.xlabel{ | |
font-size: 15px; | |
fill: gray; | |
} | |
.ylabel{ | |
font-size: 15px; | |
fill: gray; | |
} | |
#menu { | |
padding-left: 500px; | |
font-weight: bolder; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Time spent in primary activities of the civilian population</h1> | |
<p>Time spent in primary activities of the civilian population engaging in each activity, averages per day by sex, 2014 annual averages.The charts shows the different between men and women about how they spent their day.<a href="http://www.bls.gov/news.release/atus.t01.htm">Source</a></p> | |
<p id="menu"> | |
<select> | |
<option value="all">All activities</option> | |
<option value="woman">Average hour spend woman top 10 </option> | |
<option value="man">Average hour spend man top 10</option> | |
</select> | |
</p> | |
<script type="text/javascript"> | |
// All the global setup is here: | |
var fullwidth = 700; | |
var fullheight = 600; | |
var margin = { top: 20, right: 10, bottom: 50, left: 50 }; | |
var width = fullwidth - margin.right - margin.left; | |
var height = fullheight - margin.top - margin.bottom; | |
// redo this with an object for the margin settings: var margin = {top...} | |
var dotRadius = 4; // fix this to a nice value. | |
// fill in the margin values here. Also, we set domain to 0 to 100 since it's percents, | |
// plus some padding room! | |
var xScale = d3.scale.linear() | |
.range([ 0, width]) | |
.domain([-1, 100]); | |
// top to bottom, padding just in case | |
var yScale = d3.scale.linear() | |
.range([ height, 0 ]) | |
.domain([-1, 100]); | |
// Custom tick count if you want it. | |
// Create your axes here. | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10); // fix this to a good number of ticks for your scale later. | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", fullwidth) | |
.attr("height", fullheight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.right + ")"); | |
// utility for label placement jitter | |
function getRandomInt(min, max) { | |
return Math.floor(Math.random() * (max - min + 1) + min); | |
} | |
d3.csv("Timespent.csv", function(data) { | |
var menu = d3.select("#menu select") | |
.on("change", filter); | |
// Set the intial value of drop-down when page loads | |
menu.property("value", "all"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.append("text") | |
.attr("class", "xlabel") | |
.attr("transform", "translate(" + (width / 2) + " ," + | |
(height + 25) + ")") | |
.style("text-anchor", "middle") | |
.attr("dy", 12) | |
.text("Average hour spend woman"); | |
svg.append("text") | |
.attr("class", "ylabel") | |
.attr("transform", "rotate(-90) translate(" + (-height/2) | |
+ ",0)") | |
.style("text-anchor", "middle") | |
.attr("dy", -30) | |
.text("Average hour spend man"); | |
var curSelection = menu.property("value"); | |
render(data); // do the full dataset render first. | |
// Functions for handling updates and drawing with data | |
function filter() { | |
// Handle the menu change -- filter the data set if needed, rerender: | |
curSelection = menu.property("value"); | |
if (curSelection === "all") { | |
var newData = data; // set it equal to all the data | |
} else if (curSelection === "woman") { //poorest 10 | |
var newData = data.sort(function(a,b) { | |
return b.AvgHourWomen - a.AvgHourWomen; | |
}).slice(0, 10); | |
} else if (curSelection === "man") { // descending | |
var newData = data.sort(function(a,b) { // richest 10 | |
return b.AvgHourMen - a.AvgHourMen; | |
}).slice(0, 10); | |
} | |
console.log(newData); | |
render(newData); | |
} | |
function render(mydata) { | |
// Here we set domains, and draw the circles based on what data set it is. | |
xScale.domain([ | |
d3.min(mydata, function(d) { | |
return +d.AvgHourWomen; | |
}) - 2, | |
d3.max(mydata, function (d) { | |
return +d.AvgHourWomen; | |
}) + 2 | |
]); | |
yScale.domain([ | |
d3.min(mydata, function(d) { | |
return +d.AvgHourMen; | |
}) - 2, | |
d3.max(mydata, function (d) { | |
return +d.AvgHourMen; | |
}) + 2 | |
]); | |
// data join | |
var circles = svg.selectAll("circle") | |
.data(mydata, function(d) {return d.Activity;}); // 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 == "woman") { | |
return width - margin.right; | |
} | |
else if (curSelection == "man") { | |
return margin.left; | |
} | |
}) | |
.attr("cy", function (d) { | |
if (curSelection == "woman") { | |
return margin.top; | |
} | |
else if (curSelection == "man") { | |
return height - margin.bottom; | |
} | |
}) // */ | |
.attr("class", "dots") | |
.append("title") | |
.text(function(d) { | |
return d.Activity +":"+ " man spent" +" "+ d.AvgHourMen + " " +"hours" +" woman spent " + d.AvgHourWomen+" "+"hours" ; | |
}); | |
// transition of them | |
circles | |
.transition() | |
.duration(2000) | |
.attr("cx", function(d) { | |
return xScale(+d.AvgHourWomen); | |
// return the value to use for your x scale here | |
}) | |
.attr("cy", function(d) { | |
return yScale(+d.AvgHourMen); | |
}) | |
.attr("r", function() { | |
if (curSelection !== "all") { | |
return dotRadius * 2; | |
} | |
else { | |
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(mydata, function(d) { | |
return d.Activity; | |
}); | |
// enter and create any news ones we need. Put minimal stuff here. | |
labels | |
.enter() | |
.append("text") | |
.attr("transform", function(d) { | |
return "translate(" + xScale(+d.AvgHourWomen) + "," + yScale(+d.AvgHourMen) + ")"; | |
}) | |
.attr("dx", 5) | |
.attr("dy", function(d) { | |
// adding some space for the overlapping ones | |
if (d.Activity == "Purchasing goods and services" || d.Activity == "Housework" || d.Activity == "Food preparation and cleanup") { | |
return 10; | |
} else { | |
return -4; | |
} | |
}) | |
.attr("class", "dotlabels") | |
.style("opacity", 0) | |
.text(function(d) {return d.Activity}); | |
// transition them. | |
labels.transition() | |
.duration(2000) | |
.style("opacity", 1); | |
// remove ones that we don't have now | |
labels.exit().remove(); // 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 render | |
}); | |
</script> | |
</body> | |
</html> |
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
Activity | AvgHourTotal | AvgHourMen | AvgHourWomen | |
---|---|---|---|---|
Personal care activities | 9.58 | 9.32 | 9.82 | |
Sleeping | 8.8 | 8.69 | 8.9 | |
Eating and drinking | 1.17 | 1.21 | 1.14 | |
Household activities | 1.77 | 1.38 | 2.14 | |
Housework | 0.55 | 0.27 | 0.82 | |
Food preparation and cleanup | 0.59 | 0.34 | 0.82 | |
Lawn and garden care | 0.19 | 0.25 | 0.12 | |
Household management | 0.12 | 0.1 | 0.13 | |
Purchasing goods and services | 0.74 | 0.6 | 0.87 | |
Consumer goods purchases | 0.36 | 0.27 | 0.44 | |
Professional and personal care services | 0.09 | 0.06 | 0.12 | |
Caring for and helping household members | 0.54 | 0.35 | 0.72 | |
Caring for and helping household children | 0.41 | 0.26 | 0.55 | |
Caring for and helping nonhousehold members | 0.18 | 0.15 | 0.21 | |
Caring for and helping nonhousehold adults | 0.06 | 0.07 | 0.06 | |
Working and work-related activities | 3.59 | 4.29 | 2.94 | |
Working | 3.25 | 3.87 | 2.68 | |
Educational activities | 0.42 | 0.4 | 0.44 | |
Attending class | 0.23 | 0.24 | 0.23 | |
Homework and research | 0.15 | 0.12 | 0.18 | |
Organizational, civic, and religious activities | 0.32 | 0.27 | 0.37 | |
Religious and spiritual activities | 0.14 | 0.11 | 0.17 | |
Volunteering (organizational and civic activities) | 0.14 | 0.12 | 0.16 | |
Leisure and sports | 5.3 | 5.71 | 4.93 | |
Socializing and communicating | 0.71 | 0.69 | 0.73 | |
Watching television | 2.82 | 3.05 | 2.61 | |
Participating in sports, exercise, and recreation | 0.29 | 0.38 | 0.21 | |
Telephone calls, mail, and e-mail | 0.14 | 0.1 | 0.19 | |
Other activities, not elsewhere classified | 0.23 | 0.22 | 0.24 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment