xxxxxxxxxx
<head>
<title>Time Use</title>
<!-- <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> -->
<link rel="stylesheet" href="d3.slider.css" type="text/css" media="screen"/>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.slider.js"></script>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
#main-wrapper {
/* width: 1090px;*/
/* margin: 50px auto;*/
font-family: 'Inconsolata', Monaco, "Lucida Console", Consolas, "Courier New";
}
h3 {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 20px 10px;
}
#sliders {
width: 300px;
float: left;
margin-right: 20px;
}
.valuedesc {
height: 24px;
padding: 0 10px;
font-size: 16px;
}
#description {
font-family: "Mercury SSm A", "Mercury SSm B";
font-style: italic;
margin: 30px 0;
padding: 0 10px;
font-size: 13px;
line-height: 1.5em;
}
#note {
margin: 10px 0 30px 0;
padding: 0 10px;
/* font-weight: bold;*/
text-transform: uppercase;
font-size: 14px;
}
.clr { clear: both; }
.bar {
fill: #ccc;
}
#eating .bar.highlight, .eating span {
fill: #5bb923;
color: #5bb923;
}
#education .bar.highlight, .education span {
fill: #db7146;
color: #db7146;
}
#exercise .bar.highlight, .exercise span {
fill: #a15dd4;
color: #a15dd4;
}
#household_activities .bar.highlight, .household_activities span {
fill: #0ecef6;
color: #0ecef6;
}
#household_care .bar.highlight, .household_care span {
fill: #e24062;
color: #e24062;
}
#leisure .bar.highlight, .leisure span {
fill: #5b7be9;
color: #5b7be9;
}
#religion .bar.highlight, .religion span {
fill: #e93360;
color: #e93360;
}
#shopping .bar.highlight, .shopping span {
fill: #ece426;
color: #ece426;
}
#sleeping .bar.highlight, .sleeping span {
fill: #f1e12b;
color: #f1e12b;
}
#traveling .bar.highlight, .traveling span {
fill: #20d08b;
color: #20d08b;
}
#work .bar.highlight, .work span {
fill: #d63ca3;
color: #d63ca3;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-family: 'Inconsolata', Monaco, "Lucida Console", Consolas, "Courier New";
font-size: 14px;
}
.y.axis path { display: none; }
.x.axis path { display: none; }
.baseline line {
stroke: #000;
stroke-width: 2px;
}
#indicator line {
stroke: #666;
stroke-width: 1px;
stroke-dasharray: 1,2;
stroke-linecap: round;
}
#indicator text {
font-family: 'Inconsolata', Monaco, "Lucida Console", Consolas, "Courier New";
text-anchor: middle;
font-size: 15px;
text-transform: uppercase;
}
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<div id="main-wrapper" class="container">
<div id="sliders">
<div id="metric-descrip" class="metric">
<h3>Chart with slider</h3>
<div id="value" class="valuedesc"></div>
<div id="valueslider" class="sliderholder"></div>
</div>
</div>
<div id="chart"></div>
<script>
// Percentages for .5 to 24 hours in half-hour increments.
var sleeping = [0.0152,0.0615,0.0786,0.2101,0.1598,0.2808,0.3163,0.5344,0.7448,1.1549,1.7511,3.2674,4.2434,7.3831,8.587,11.6884,10.8629,10.6469,8.197,8.0785,5.0152,4.6462,2.9325,2.8538,1.6453,1.4282,0.8003,0.6476,0.381,0.3712,0.2621,0.1987,0.1257,0.0701,0.0318,0.0948,0.0212,0.0328,0.0439,0.0025,0.058,0.0106,0.002,0.0319,0.0127,0.0171,0,0];
// Where to initialize indicator
var start_hours = 8;
// User-set hours with slider
var USER_HOURS = start_hours;
// Chart margins and dimensions
var margin = {top: 25, right: 25, bottom: 45, left: 50},
width = 770 - margin.left - margin.right,
height = 340 - margin.top - margin.bottom;
// Scales
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .06);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(function(d) { return d.toFixed(1) + "%"; })
.orient("left");
// Create SVG
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("id", "sleeping")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Set domains for x and y
x.domain(d3.range(0,25,.5));
y.domain([0, d3.max(sleeping, function(d) { return d; })]).nice();
// Indicator line for where user is
var indicator = svg.append("g")
.attr("id", "indicator")
.attr("transform", "translate("+ (x(USER_HOURS)) +", 0)");
indicator.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", height);
indicator.append("text")
.attr("y", 0)
.attr("dy", -11)
.text("You're here");
// Bars
svg.selectAll(".bar")
.data(sleeping)
.enter().append("rect")
.attr("id", function(d,i) { return "bin" + i; })
.attr("class", "bar")
.attr("x", function(d,i) { return x(i * .5) + x.rangeBand(); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return height - y(d); });
// x axis
xAxis.tickValues(x.domain().filter(function(d,i) { return !(i % 4); } ));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", x("0"))
.attr("y", 30)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("Hours per day by those engaged with activity");
// y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Zero baseline
svg.append("g")
.attr("class", "baseline")
.attr("transform", "translate(0,"+ height +")")
.append("line")
.attr("x1", -xAxis.tickSize())
.attr("x2", width)
.attr("y2", 0);
update();
// Slider
var hoursSlider = d3.slider().min(0).max(24).stepValues(d3.range(0,25,.5)).showRange(true).value(USER_HOURS)
.callback(brushed);
// Add slider
d3.select("#valueslider").call(hoursSlider);
// Update user settings when slider brushed, then update
function brushed() {
USER_HOURS = hoursSlider.value();
update();
}
// Update the bar chart
function update() {
// Update word value
d3.select("#value").text(hoursInWords(USER_HOURS));
// Update indicator line
d3.select("#indicator")
.attr("transform", "translate("+ (x(USER_HOURS)+x.rangeBand()/2) +", 0)");
// Highlight appropriate bars
svg.selectAll(".bar").call(highlightBars);
}
// Highlight the bars that are less than or equal to user-defined duration
function highlightBars(bars) {
bars.classed("highlight", function(d,i) {
var max_bin = 2 * USER_HOURS;
if (i < max_bin) {
return true;
} else {
return false;
}
});
}
// Helper to convert hour count into words
function hoursInWords(hours) {
var diff = hours - Math.floor(hours);
if (hours == 1) {
return hours + ' hour'
}
else if (diff > 0) {
return Math.floor(hours) + " hours, 30 minutes";
} else {
return hours + " hours";
}
}
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js