Skip to content
Snippets Groups Projects
Commit c6519764 authored by CodyneKen's avatar CodyneKen
Browse files

Visu_Circles manque répartition données

parent 332b5ecd
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Visu_Circles/final_combined_with_all_data.json 0 → 100644
+ 41023
− 0
View file @ c6519764
This diff is collapsed.
Visu_Circles/index.html 0 → 100644
+ 17
− 0
View file @ c6519764
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comportement de Santé Mois/Année</title>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="visualization"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
Visu_Circles/script.js 0 → 100644
+ 278
− 0
View file @ c6519764
// Template from https://codepen.io/markni/pen/qBJWNd
//based on https://bl.ocks.org/mbostock/1096355
//apple design:https://images.apple.com/watch/features/images/fitness_large.jpg
"use strict";
(function(){
var gap = 2;
var ranDataset = function () {
var ran = Math.random();
return [
{index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30},
{index: 1, name: 'exercise', icon: "\uF101", percentage: ran * 60 + 30},
{index: 2, name: 'stand', icon: "\uF106", percentage: ran * 60 + 30}
];
};
var ranDataset2 = function () {
var ran = Math.random();
return [
{index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30}
];
};
// Dataset shape:
/*
[
{
"date":"2018-03-22",
"Steps_Corentin":1905.0,
"Steps_Maya":-1.0,
"Steps_Anis":-1.0,
"Steps_Amira":-1.0,
"Calories_Corentin":-1.0,
"Calories_Maya":-1.0,
"Calories_Anis":-1.0,
"Calories_Amira":-1.0,
"Sleep_Corentin":-1.0,
"Sleep_Maya":-1.0,
"Sleep_Anis":-1.0,
"Sleep_Amira":-1.0,
"Distance_Corentin":1.30466,
"Distance_Maya":-1.0,
"Distance_Anis":-1.0,
"Distance_Amira":-1.0
},
...
]
*/
// What we want instead of a random data set :
// For every date
// For every person of the group {Corentin, Maya, Anis, Amira}
// The csv data of steps, calories, sleep, distance and date
// for every month of the year, do average of all the data
// and then display it in the circles
// Do it for the average on a week (every day), the monthly (every day), the yearly (every month)
/*
// Load json data
d3.json("final_combined_with_all_data.json").then(function(data) {
// Process the JSON data
var dataset = processData(data);
// Initial build
build(dataset);
// Update the visualization every 2 seconds with new data
setInterval(function() {
update(processData(data));
}, 2000);
}).catch(function(error) {
console.error("Error loading JSON data: ", error);
});
function processData(data) {
// Initialize totals for each person
var people = ["Corentin", "Maya", "Anis", "Amira"];
var totals = {};
people.forEach(function(person) {
totals[person] = { steps: 0, calories: 0, sleep: 0, distance: 0, count: 0 };
});
// Calculate totals for each person
data.forEach(function(d) {
people.forEach(function(person) {
if (d["Steps_" + person] > 0) {
totals[person].steps += +d["Steps_" + person];
totals[person].calories += +d["Calories_" + person];
totals[person].sleep += +d["Sleep_" + person];
totals[person].distance += +d["Distance_" + person];
totals[person].count++;
}
});
});
// Calculate averages and create dataset
var dataset = people.map(function(person, index) {
return {
index: index,
name: person,
icon: "\uF105", // You can customize the icon if needed
percentage: (totals[person].steps / totals[person].count) / 100
};
});
return dataset;
}
// Make function that feeds the data to the circles
// function feedDataset(data)
*/
var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];
var width = 500,
height = 500,
τ = 2 * Math.PI;
function build(dataset,singleArcView){
var arc = d3.arc()
.startAngle(0)
.endAngle(function (d) {
return d.percentage / 100 * τ;
})
.innerRadius(function (d) {
return 140 - d.index * (40 + gap)
})
.outerRadius(function (d) {
return 180 - d.index * (40 + gap)
})
.cornerRadius(20);//modified d3 api only
var background = d3.arc()
.startAngle(0)
.endAngle(τ)
.innerRadius(function (d, i) {
return 140 - d.index * (40 + gap)
})
.outerRadius(function (d, i) {
return 180 - d.index * (40 + gap)
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//add linear gradient, notice apple uses gradient alone the arc..
//meh, close enough...
var gradient = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "100%")
.attr("x2", "50%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "#fe08b5")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "#ff1410")
.attr("stop-opacity", 1);
//add some shadows
var defs = svg.append("defs");
var filter = defs.append("filter")
.attr("id", "dropshadow")
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 4)
.attr("result", "blur");
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 1)
.attr("dy", 1)
.attr("result", "offsetBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur");
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
var field = svg.selectAll("g")
.data(dataset)
.enter().append("g");
field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)");
field.append("path").attr("class", "bg")
.style("fill", function (d) {
return colors[d.index];
})
.style("opacity", 0.2)
.attr("d", background);
field.append("text").attr('class','icon');
if(singleArcView){
field.append("text").attr('class','goal').text("OF 600 CALS").attr("transform","translate(0,50)");
field.append("text").attr('class','completed').attr("transform","translate(0,0)");
}
d3.transition().duration(1750).each(update);
function update() {
field = field
.each(function (d) {
this._value = d.percentage;
})
.data(dataset)
.each(function (d) {
d.previousValue = this._value;
});
field.select("path.progress").transition().duration(1750).delay(function (d, i) {
return i * 200
})
.ease(d3.easeElastic)
.attrTween("d", arcTween)
.style("fill", function (d) {
if(d.index===0){
return "url(#gradient)"
}
return colors[d.index];
});
field.select("text.icon").text(function (d) {
return d.icon;
}).attr("transform", function (d) {
return "translate(10," + -(150 - d.index * (40 + gap)) + ")"
});
field.select("text.completed").text(function (d) {
return Math.round(d.percentage /100 * 600);
});
setTimeout(update, 3000);
}
function arcTween(d) {
var i = d3.interpolateNumber(d.previousValue, d.percentage);
return function (t) {
d.percentage = i(t);
return arc(d);
};
}
}
build(ranDataset);
build(ranDataset2,true);
})()
Visu_Circles/script_proto.js 0 → 100644
+ 190
− 0
View file @ c6519764
// Template from https://codepen.io/markni/pen/qBJWNd
//based on https://bl.ocks.org/mbostock/1096355
//apple design:https://images.apple.com/watch/features/images/fitness_large.jpg
"use strict";
(function(){
var gap = 2;
var ranDataset = function () {
var ran = Math.random();
return [
{index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30},
{index: 1, name: 'exercise', icon: "\uF101", percentage: ran * 60 + 30},
{index: 2, name: 'stand', icon: "\uF106", percentage: ran * 60 + 30}
];
};
var ranDataset2 = function () {
var ran = Math.random();
return [
{index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30}
];
};
var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];
var width = 500,
height = 500,
τ = 2 * Math.PI;
function build(dataset,singleArcView){
var arc = d3.arc()
.startAngle(0)
.endAngle(function (d) {
return d.percentage / 100 * τ;
})
.innerRadius(function (d) {
return 140 - d.index * (40 + gap)
})
.outerRadius(function (d) {
return 180 - d.index * (40 + gap)
})
.cornerRadius(20);//modified d3 api only
var background = d3.arc()
.startAngle(0)
.endAngle(τ)
.innerRadius(function (d, i) {
return 140 - d.index * (40 + gap)
})
.outerRadius(function (d, i) {
return 180 - d.index * (40 + gap)
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//add linear gradient, notice apple uses gradient alone the arc..
//meh, close enough...
var gradient = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "100%")
.attr("x2", "50%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "#fe08b5")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "#ff1410")
.attr("stop-opacity", 1);
//add some shadows
var defs = svg.append("defs");
var filter = defs.append("filter")
.attr("id", "dropshadow")
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 4)
.attr("result", "blur");
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 1)
.attr("dy", 1)
.attr("result", "offsetBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur");
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
var field = svg.selectAll("g")
.data(dataset)
.enter().append("g");
field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)");
field.append("path").attr("class", "bg")
.style("fill", function (d) {
return colors[d.index];
})
.style("opacity", 0.2)
.attr("d", background);
field.append("text").attr('class','icon');
if(singleArcView){
field.append("text").attr('class','goal').text("OF 600 CALS").attr("transform","translate(0,50)");
field.append("text").attr('class','completed').attr("transform","translate(0,0)");
}
d3.transition().duration(1750).each(update);
function update() {
field = field
.each(function (d) {
this._value = d.percentage;
})
.data(dataset)
.each(function (d) {
d.previousValue = this._value;
});
field.select("path.progress").transition().duration(1750).delay(function (d, i) {
return i * 200
})
.ease("elastic")
.attrTween("d", arcTween)
.style("fill", function (d) {
if(d.index===0){
return "url(#gradient)"
}
return colors[d.index];
});
field.select("text.icon").text(function (d) {
return d.icon;
}).attr("transform", function (d) {
return "translate(10," + -(150 - d.index * (40 + gap)) + ")"
});
field.select("text.completed").text(function (d) {
return Math.round(d.percentage /100 * 600);
});
setTimeout(update, 2000);
}
function arcTween(d) {
var i = d3.interpolateNumber(d.previousValue, d.percentage);
return function (t) {
d.percentage = i(t);
return arc(d);
};
}
}
build(ranDataset);
build(ranDataset2,true);
})()
Visu_Circles/style.css 0 → 100644
+ 29
− 0
View file @ c6519764
html{
height: 100%;
}
body {
min-height: 100%;
background: #ffffff;
padding:0;
margin:0;
}
.icon{
font-family:fontawesome;
font-weight:bold;
font-size:30px;
}
.goal,.completed{
font-family: 'Roboto','Myriad Set Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
fill:white;
text-anchor:middle;
}
.goal{
font-size: 30px;
}
.completed{
font-size: 95px;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment