Skip to content

Instantly share code, notes, and snippets.

@luluwuluying
Created March 12, 2016 18:38
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 luluwuluying/ed843a39eb2883e32911 to your computer and use it in GitHub Desktop.
Save luluwuluying/ed843a39eb2883e32911 to your computer and use it in GitHub Desktop.
My Update Plot
<!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>
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