var chart = c3.generate({
data: {
x: 'x',
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '1999', '2001', '2003', '2005', '2007', '2009'],
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['2-5 yo', 0,0,0,0,0,0,]
],
selection: {
enabled: true
}
}
});
d3.select("svg").append("text")
.attr("x", 40 )
.attr("y", 20)
.style("text-anchor", "left")
.text("Body Mass Index")
.style('fill', 'darkPink');
var defaultMessage = document.getElementById('message').innerHTML,
currentIndex = 0,
timer, duration = 3000,
demos = [
function () {
setMessage('Childhood obesity is on the rise...');
},
function () {
chart.load({
columns: [
['2-5 yo', 16.2, 16.5, 16.7, 16.3, 16.3, 16.6]
]
})
setMessage('among toddlers,');
},
function () {
chart.load({
columns: [
['6-11 yo', 17.9, 18.5, 18.4, 18.2, 18.6, 18.3]
]
})
chart.focus('6-11 yo');
setMessage('kids,');
},
function () {
chart.load({
columns: [
['12-19 yo', 22.9, 23.1, 23.4, 23.2, 23.5, 23.8]
]
})
chart.focus('12-19 yo');
setMessage('and teens. (Ogden, 2012)');
},
function () {
setMessage('We assessed the use of a robotic toy dragon to teach children about healthy eating.');
chart.revert();
},
function () {
setMessage("26 U.S. children participated in a 3-week study on healthy eating with the robot.");
},
function () {
setMessage('Their engagement improved over the three week study, and indicated by lower response times over weeks 1-3:');
chart.load({
columns: [
['x', 1, 2, 3],
['time to respond to robot', 4.3, 2.5, 3.5]
],
unload: ['2-5 yo', '6-11 yo', '12-19 yo']
})
chart.focus('time to respond to robot');
d3.select("svg").append("text")
.attr("x", 40 )
.attr("y", 20)
.style("text-anchor", "left")
.text("Body Mass Index")
.style('fill', 'white');
d3.select("svg").append("text")
.attr("x", 40 )
.attr("y", 20)
.style("text-anchor", "left")
.text("Response time (s)")
.style('fill', 'darkPink');
},
function () {
setMessage('However, no statistically significant difference was found on the selection of food choices betwen different weeks.');
},
function () {
setMessage('The robot also received extremely high likeability ratings from the children.');
},
function () {
setMessage('Further research into the use of robotic agents to create behavior change in childhood eating habits is recommended.');
chart.load({
unload: ['time to respond to robot']
})
},
function () {
// wait for end of transition for flow
},
];
function setMessage(message) {
document.getElementById('message').innerHTML = message;
}
d3.select('#start_btn').on("click", function(){
if(this.innerHTML === "Stop Demo"){
stopDemo();
this.innerHTML = "Continue Demo";
return;
}
this.innerHTML = "Stop Demo";
setMessage('Starting Demo..');
timer = setInterval(function () {
if (currentIndex == demos.length) currentIndex = 0;
demos[currentIndex++]();
}, duration);
});
function stopDemo() {
clearInterval(timer);
};
<div class="container-fluid">
<div class="row">
<div class="col-md-6 well pull-right">
<h2>Feeding Your Inner Dragon-bot: A Robot that Helps Children Select Healthy Foods</h2>
<p>Data from Short et al. (2014) </p>
<hr>
<p id="message" class="bg-info"> </p>
<button id="start_btn" class="btn btn-primary pull-right">Start Demo</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart"></div>
</div>
</div>
</div>
External resources loaded into this fiddle: