Skip to content

formation-d3js-part1
formation-d3js-part1
Commit 878b20ba by Jérémy FOUQUAT
Options

first commit

parent 5d26ed2b
Showing with 1825 additions and 0 deletions
Correction/lab01/d3js_homework_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Lab 01 (Homework) : Nuage de points</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.chart_viz_01 {
font-size: 14px
}
.x_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.y_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.x_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.y_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.x_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_left_viz_01 .tick text {
fill: blue;
font-size: 14px;
}
.y_axis_right_viz_01 .tick text {
fill: red;
font-size: 14px;
}
.tooltip_viz_01 {
position: absolute;
text-align: center;
padding: 10px;
font: 18px sans-serif;
color : #FFFFFF;
background: #033656;
pointer-events: none;
}
</style>
</head>
<body>
<!--<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>-->
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="d3js_homework_01.js"></script>
</body>
</html>
Correction/lab01/d3js_homework_01.js 0 → 100644
//===========================================================================//
// Visoalisation formation D3.js Par Jérémy FOUQUAT //
//===========================================================================//
//=============================================//
// 1. Dataset management //
//=============================================//
let dataset = null;
d3.csv("shot_logs.csv", function(error, data) {
//=========================================//
// 1.1. Select and rename attributes //
//=========================================//
dataset_field_goal = data.map( function(d){
return {
matchup: d.MATCHUP,
location_game: d.LOCATION,
shot_number: d.SHOT_NUMBER,
dribbles: d.DRIBBLES,
touch_time: d.TOUCH_TIME,
shot_dist: d.SHOT_DIST,
pts_type: d.PTS_TYPE,
shot_result: d.SHOT_RESULT,
fgm: d.FGM,
pts: d.PTS,
player_name: d.player_name,
player_id: d.player_id
}
});
//=========================================//
// 1.2. Call visualisation function //
//=========================================//
visualisation_01(dataset_field_goal);
});
//=============================================//
// 2. Visualisation management //
//=============================================//
function visualisation_01(dataset){
//=========================================//
// 2.1. Variables management //
//=========================================//
let dataset_reworked = [],
dataset_reworked_home = [],
dataset_reworked_away = [],
x_domain_min = 0,
x_domain_home_max = 0,
x_domain_away_max = 0,
y_domain_min = 0,
y_domain_home_max = 0,
y_domain_away_max = 0,
x_scale = null,
y_scale = null,
y_scale_home = null,
y_scale_away = null,
svg_width = 1024,
svg_height = 728,
margin_top = 20,
margin_bottom = 20,
margin_left = 20,
margin_right = 20,
padding_top = 20,
padding_bottom = 40,
padding_left = 40,
padding_right = 40,
width = svg_width - margin_left - margin_right - padding_left - padding_right,
height = svg_height - margin_top - margin_bottom - padding_top - padding_bottom,
svg_viz = null,
x_grid_chart = null,
y_grid_chart = null,
x_axis_chart = null,
y_axis_left_chart = null,
y_axis_right_chart = null,
chart = null,
tooltip_chart = null;
//=========================================//
// 2.2. Dataset modifications //
//=========================================//
dataset.forEach(function(d,i) {
// Première insertion
if (dataset_reworked.find( function(elem) { return elem.nom == d.player_name; } ) == undefined) {
dataset_reworked.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});
if (d.location_game[0] == 'H' ) {
dataset_reworked_home.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});
dataset_reworked_away.push({nom: d.player_name, fgm: 0, fga: 0});
}
if (d.location_game[0] == 'A' ) {
dataset_reworked_away.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});
dataset_reworked_home.push({nom: d.player_name, fgm: 0, fga: 0});
}
}
// Ajout de données
else {
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fgm += Number(d.fgm) ;
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fga++ ;
if (d.location_game[0] == 'H' ) {
dataset_reworked_home[ dataset_reworked_home.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fgm += Number(d.fgm) ;
dataset_reworked_home[ dataset_reworked_home.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fga++ ;
}
if (d.location_game[0] == 'A' ) {
dataset_reworked_away[ dataset_reworked_away.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fgm += Number(d.fgm) ;
dataset_reworked_away[ dataset_reworked_away.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fga++ ;
}
}
});
//=========================================//
// 2.3. Domains and scales management //
//=========================================//
x_domain_home_max = d3.max(dataset_reworked_home, function(d) { return d.fga; });
x_domain_away_max = d3.max(dataset_reworked_away, function(d) { return d.fga; });
y_domain_home_max = d3.max(dataset_reworked_home, function(d) { return d.fgm; });
y_domain_away_max = d3.max(dataset_reworked_away, function(d) { return d.fgm; });
x_scale = d3.scaleLinear()
.domain([x_domain_min, (x_domain_home_max < x_domain_away_max ? x_domain_away_max : x_domain_home_max) * 1.05])
.range([0, width]);
y_scale = d3.scaleLinear()
.domain([y_domain_min, Math.max(y_domain_home_max,y_domain_away_max) * 1.05])
.range([height, 0]);
y_scale_home = d3.scaleLinear()
.domain([y_domain_min, y_domain_home_max * 1.05])
.range([height, 0]);
y_scale_away = d3.scaleLinear()
.domain([y_domain_min, y_domain_away_max * 1.05])
.range([height,0]);
y_scale_home_color = d3.scaleLinear()
.domain([ d3.min(dataset_reworked_home, function(d) { return d.fgm / d.fga; }),
d3.max(dataset_reworked_home, function(d) { return d.fgm / d.fga; }) ])
.range(['#45AFFF','#00297D']);
y_scale_away_color = d3.scaleLinear()
.domain([ d3.min(dataset_reworked_away, function(d) { return d.fgm / d.fga; }),
d3.max(dataset_reworked_away, function(d) { return d.fgm / d.fga; }), ])
.range(["#FF8A87",'#691000']);
//=========================================//
// 2.4. Container management //
//=========================================//
svg_viz = d3.select('body').append('svg')
.attr('class',"svg_viz_01")
.attr('width', svg_width)
.attr('height', svg_height);
x_grid_chart = svg_viz.append('g')
.attr('class',"x_grid_viz_01")
.attr('width', width)
.attr('height', padding_bottom)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");
y_grid_chart = svg_viz.append('g')
.attr('class',"y_grid_viz_01")
.attr('width', padding_left)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");
x_axis_chart = svg_viz.append('g')
.attr('class',"x_axis_viz_01")
.attr('width', width)
.attr('height', padding_bottom)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");
y_axis_left_chart = svg_viz.append('g')
.attr('class',"y_axis_left_viz_01")
.attr('width', padding_left)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");
y_axis_right_chart = svg_viz.append('g')
.attr('class',"y_axis_right_viz_01")
.attr('width', padding_right)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left + width) + "," + (margin_top + padding_top) + ")");
chart = svg_viz.append('g')
.attr('class',"chart_viz_01")
.attr('width', width)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")")
tooltip_chart = d3.select("body").append("div")
.attr("class", "tooltip_viz_01")
.text("LOL")
.style("opacity", 0);
//=========================================//
// 2.5. x-axis/grid management //
//=========================================//
x_grid_chart.call(
d3.axisBottom(x_scale)
.tickSizeInner(-height)
.tickSizeOuter(0)
.tickPadding(20)
);
x_axis_chart.call(
d3.axisBottom(x_scale)
.tickSizeInner(0)
.tickSizeOuter(-height)
.tickPadding(20)
);
//=========================================//
// 2.6. y-axis/grid management //
//=========================================//
y_grid_chart.call(
d3.axisLeft(y_scale)
.tickSizeInner(-width)
.tickSizeOuter(0)
.tickPadding(20)
);
y_axis_left_chart.call(
d3.axisLeft(y_scale_home)
.tickSizeInner(0)
.tickSizeOuter(0)
.tickPadding(20)
);
y_axis_right_chart.call(
d3.axisRight(y_scale_away)
.tickSizeInner(0)
.tickSizeOuter(0)
.tickPadding(20)
);
//=========================================//
// 2.7. Point management //
//=========================================//
chart.selectAll()
.data(dataset_reworked_home)
.enter().append('circle')
.attr("r", 4)
.attr("cx", function(d) {
return x_scale(d.fga);
})
.attr("cy", function(d) {
return y_scale_home(d.fgm);
})
.attr("fill", function(d) {
return "" + y_scale_home_color( (d.fgm / d.fga).toPrecision(2) ) + "" ;
})
.on("mouseover", function(d) {
d3.select(this).attr('r', 15);
tooltip_chart.style("opacity", 1)
.html(d.nom + "<br/>" + (d.fgm / d.fga).toPrecision(2) + " %")
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr('r', 4);
tooltip_chart.style("opacity", 0);
});
chart.selectAll()
.data(dataset_reworked_away)
.enter().append('circle')
.attr("r", 4)
.attr("cx", function(d) {
return x_scale(d.fga);
})
.attr("cy", function(d) {
return y_scale_away(d.fgm);
})
.attr("fill", function(d) {
return "" + y_scale_away_color( (d.fgm / d.fga).toPrecision(2) ) + "" ;
})
.on("mouseover", function(d) {
d3.select(this).attr('r', 15);
tooltip_chart.style("opacity", 1)
.html(d.nom + "<br/>" + (d.fgm / d.fga).toPrecision(2) + " %")
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr('r', 4);
tooltip_chart.style("opacity", 0);
});
}
Correction/lab01/d3js_lab_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Lab 01 : Nuage de points</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.chart_viz_01 {
font-size: 14px
}
.x_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.y_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.x_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.y_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.x_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_left_viz_01 .tick text {
fill: blue;
font-size: 14px;
}
.y_axis_right_viz_01 .tick text {
fill: red;
font-size: 14px;
}
.tooltip_viz_01 {
position: absolute;
text-align: center;
padding: 10px;
font: 18px sans-serif;
color : #FFFFFF;
background: #033656;
pointer-events: none;
}
</style>
</head>
<body>
<!--<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>-->
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="d3js_lab_01.js"></script>
</body>
</html>
Correction/lab01/d3js_lab_01.js 0 → 100644
//===========================================================================//
// Visoalisation formation D3.js Par Jérémy FOUQUAT //
//===========================================================================//
//=============================================//
// 1. Dataset management //
//=============================================//
let dataset = null;
d3.csv("shot_logs.csv", function(error, data) {
//=========================================//
// 1.1. Select and rename attributes //
//=============================================================//
// QUESTION_1 : Utiliser la fonction map sur les données //
// : Retourner le nom du joueur (player_name) et si //
// : le tir est réussi ou non (fgm) //
//=============================================================//
dataset_field_goal = data.map( function(d){
return {
matchup: d.MATCHUP,
location_game: d.LOCATION,
shot_number: d.SHOT_NUMBER,
dribbles: d.DRIBBLES,
touch_time: d.TOUCH_TIME,
shot_dist: d.SHOT_DIST,
pts_type: d.PTS_TYPE,
shot_result: d.SHOT_RESULT,
fgm: d.FGM,
pts: d.PTS,
player_name: d.player_name,
player_id: d.player_id
}
});
//=========================================//
// 1.2. Call visualisation function //
//=========================================//
visualisation_01(dataset_field_goal);
});
//=============================================//
// 2. Visualisation management //
//=============================================//
function visualisation_01(dataset){
//=========================================//
// 2.1. Variables management //
//=============================================================//
// REMARQUE_1 : Nous allons faire une liste de joueurs. Pour //
// : chaque joueur, nous allons retenir le nombre //
// : de panier mis, ainsi que le nombre de tirs //
// : pris dans une saison //
//=============================================================//
let dataset_reworked = [],
x_domain_min = 0,
x_domain_max = 0,
y_domain_min = 0,
y_domain_max = 0,
x_scale = null,
y_scale = null,
svg_width = 1024,
svg_height = 728,
margin_top = 20,
margin_bottom = 20,
margin_left = 20,
margin_right = 20,
padding_top = 20,
padding_bottom = 40,
padding_left = 40,
padding_right = 40,
width = svg_width - margin_left - margin_right - padding_left - padding_right,
height = svg_height - margin_top - margin_bottom - padding_top - padding_bottom,
svg_viz = null,
x_grid_chart = null,
y_grid_chart = null,
x_axis_chart = null,
y_axis_chart = null,
chart = null,
tooltip_chart = null;
//=========================================//
// 2.2. Dataset modifications //
//=============================================================//
// REMARQUE_2 : Nous allons faire une liste de joueurs. Pour //
// : chaque joueur, nous allons retenir le nombre //
// : de panier mis, ainsi que le nombre de tirs //
// : pris dans une saison //
//=============================================================//
dataset.forEach(function(d,i) {
// Première insertion
if (dataset_reworked.find( function(elem) { return elem.nom == d.player_name; } ) == undefined)
dataset_reworked.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});
// Ajout de données
else {
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fgm += Number(d.fgm) ;
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fga++ ;
}
});
//=========================================//
// 2.3. Domains and scales management //
//=============================================================//
// QUESTION_2 : Mettre dans les variables ci-dessous //
// : x_domain_max = Le nombre maximal de tir pris //
// : par un joueur //
// : y_domain_max = Le nombre maximal de panier mis //
// : par un joueur //
//=============================================================//
x_domain_max = d3.max(dataset_reworked, function(d) { return d.fga; });
y_domain_max = d3.max(dataset_reworked, function(d) { return d.fgm; });
//=============================================================//
// QUESTION_3 : Mettre dans les variables ci-dessous //
// : x_scale = L'échelle (linéaire) des X //
// : y_scale = L'échelle (linéaire) des Y //
// : Fixer les paramètres domain et range //
//
//=============================================================//
x_scale = d3.scaleLinear()
.domain([x_domain_min, x_domain_max * 1.05])
.range([0, width]);
y_scale = d3.scaleLinear()
.domain([y_domain_min, y_domain_max * 1.05])
.range([height, 0]);
//=============================================================//
// QUESTION_8 : Créer une échelle de couleur pour les points du//
// : nuage //
//=============================================================//
percentage_scale = d3.scaleLinear()
// .domain([0.3 ,0.7])
.domain([0.3, 0.5 ,0.7])
// .range(['red', 'green'])
.range(['red', 'yellow', 'green'])
//.interpolate(d3.interpolateHsl)
//.interpolate(d3.interpolateHcl)
//.interpolate(d3.interpolateLab)
//.interpolate(d3.interpolateRgb)
//.interpolate(d3.interpolateCubehelixLong)
;
//=========================================//
// 2.4. Container management //
//=============================================================//
// QUESTION_4 : Inspirez-vous de l'exemple 02 du cours et de //
// : d3js_lab01_expected_result.png pour placer vos //
// : balise/containeur <g> //
//=============================================================//
svg_viz = d3.select('body').append('svg')
.attr('class',"svg_viz_01")
.attr('width', svg_width)
.attr('height', svg_height);
x_grid_chart = svg_viz.append('g')
.attr('class',"x_grid_viz_01")
.attr('width', width)
.attr('height', padding_bottom)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");
y_grid_chart = svg_viz.append('g')
.attr('class',"y_grid_viz_01")
.attr('width', padding_left)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");
x_axis_chart = svg_viz.append('g')
.attr('class',"x_axis_viz_01")
.attr('width', width)
.attr('height', padding_bottom)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");
y_axis_chart = svg_viz.append('g')
.attr('class',"y_axis_viz_01")
.attr('width', padding_left)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");
chart = svg_viz.append('g')
.attr('class',"chart_viz_01")
.attr('width', width)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");
//=============================================================//
// QUESTION_9 : Créer une balise <div> avec une opacité de 0 //
// : représentant le tooltip //
//=============================================================//
tooltip_chart = d3.select("body").append("div")
.attr("class", "tooltip_viz_01")
.text("LOL")
.style("opacity", 0);
//=========================================//
// 2.5. x-axis/grid management //
//=============================================================//
// QUESTION_5 : Utiliser la fonction d3.axisBottom() pour //
// : créer l'axe et la grille des x (tirs tentés) //
//=============================================================//
x_grid_chart.call(
d3.axisBottom(x_scale)
.tickSizeInner(-height)
.tickSizeOuter(0)
.tickPadding(20)
);
x_axis_chart.call(
d3.axisBottom(x_scale)
.tickSizeInner(0)
.tickSizeOuter(-height)
.tickPadding(20)
);
//=========================================//
// 2.6. y-axis/grid management //
//=============================================================//
// QUESTION_6 : Utiliser la fonction d3.axisBottom() pour //
// : créer l'axe et la grille des y (tirs réussis) //
//=============================================================//
y_grid_chart.call(
d3.axisLeft(y_scale)
.tickSizeInner(-width)
.tickSizeOuter(0)
.tickPadding(20)
);
y_axis_chart.call(
d3.axisLeft(y_scale)
.tickSizeInner(0)
.tickSizeOuter(-width)
.tickPadding(20)
);
//=========================================//
// 2.7. Point management //
//=============================================================//
// QUESTION_7 : Créer maintenant le nuage de point. Pour cela://
// : 1 - Lier le dataset à des cercles svg //
// : "cercle" == "joueur" //
// : 2 - Placer les cercles dans des coordonnées //
// : (x = tir tenté, y = tir réussi) //
// : 3 - Ajuster la couleur du joueur en fonction //
// : du % de réussite du joueur //
//=============================================================//
// QUESTION_10 : Gérer le tooltip avec la fonction .on() pour //
// : afficher le nom et le % au tir du joueur //
//=============================================================//
chart.selectAll()
.data(dataset_reworked)
.enter().append('circle')
.attr("r", 5)
.attr("cx", function(d) {
return x_scale(d.fga);
})
.attr("cy", function(d) {
return y_scale(d.fgm);
})
.attr("fill", function(d) {
return "" + percentage_scale( (d.fgm / d.fga).toPrecision(2) ) + "" ;
})
.on("mouseover", function(d) {
d3.select(this).attr('r', 15);
tooltip_chart.style("opacity", 1)
.html(d.nom + "<br/>" + (d.fgm / d.fga).toPrecision(2) + " %")
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr('r', 5);
tooltip_chart.style("opacity", 0);
});
}
Correction/lab01/shot_logs.csv 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Correction/minilab01/d3js_minilab_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mini lab 01 : Camembert</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript">
//===========================================================================//
// Question 1 : Mettre dans une variable un tableau d’entier (les donnees) //
// : Mettre dans une variable un tableau de couleurs (CSS) //
//===========================================================================//
let data = [10, 20, 30.5, 4, 23, 7, 4.555],
color = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "EEEEEE"];
//===========================================================================//
// Question 2 : Créer une balise SVG (puis la stocker dans une variable) //
// : Créer une balise g (puis la stocker dans une variable) //
//===========================================================================//
let svg = d3.select('body').append('svg')
.attr('width', 400)
.attr('height', 400);
let g = svg.append('g')
.attr('transform', 'translate(' + 200 + ',' + 200 + ')');
//===========================================================================//
// Question 3 : Créer un objet d3.pie, puis la stocker //
// : Comparer le tableau de données crée dans la question 1, avec //
// l'objet pie ==> variable_pie([variable_données])) //
//===========================================================================//
let pie = d3.pie().value(function(d) { return d; });
console.log
//===========================================================================//
// Question 4 : Créer un objet d3.arc, puis la stocker //
// : Fixer les options innerRadius et outerRadius (voir plus) //
// (Pour tester cette fonction, décommentez le code de la question 5) //
//===========================================================================//
let arc = d3.arc()
.innerRadius( 0 )
.outerRadius( function(d,i){
return 200 - (i * 10);
} );
//===========================================================================//
// Question 5 : Modifier le design du camembert //
// https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes //
//===========================================================================//
let path = g.selectAll('path')
.data(pie(data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color[i];
})
.style("stroke", "black")
.style("stroke-width", 3)
.style("stroke-dasharray", "5,5");
</script>
</body>
</html>
README.md
# Formation D3.js : Partie 1
## Configuration
Aucune. Vous devez seulement posséder un navigateur web (assez) récent, ainsi qu'un éditeur avec de la coloration syntaxique.
Plus d'information dans le Powerpoint. La formation a aussi pour but d'être améliorée, n'hésitez pas à envoyer vos suggestions à __jfouquat@aneo.fr__
## Suivi de la Formation
Tout est dans le diapo. Pour les exercices, les instructions sont situés dans les scripts : minilab01 et lab01.
## Remarques
##### 1. Utiliser des logs
`console.log(...);`
##### 2. Utiliser les outils de développement de vos navigateurs
Pour visualiser ces logs...
##### 3. Utiliser la documentation GitHub de D3.js
##### 4. Si vous ne comprenez pas le fonctionnement d'une méthode
Google => "D3 nom_methode example "
Pour trouver une visualisation avec son code.
TP/d3.v4.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
TP/exemple_cours_01/exemple_cours_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Syntaxe D3.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<!--<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>-->
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="exemple_cours_01.js"></script>
</body>
</html>
TP/exemple_cours_01/exemple_cours_01.js 0 → 100644
var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200)
.style("stroke", "red")
.style("stroke-width", 2)
.append('circle')
.attr("r", 20)
.attr("cx", 50)
.attr("cy", 50)
.attr("transform", "translate(50,50)")
.style("stroke", "black")
.style("stroke-width", 3)
.style("fill", "blue");
TP/exemple_cours_02/exemple_cours_02.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Layouts D3.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.rect_svg {
fill: #fff270;
}
.chart {
stroke: #a70000;
stroke-width: 5px;
fill: #e7e7e7;
}
.g_top {
stroke: #005783;
stroke-width: 5px;
fill: #e7e7e7;
}
.g_left {
stroke: #005783;
stroke-width: 5px;
fill: #e7e7e7;
}
.g_right {
stroke: #005783;
stroke-width: 5px;
fill: #e7e7e7;
}
.g_bottom {
stroke: #005783;
stroke-width: 5px;
fill: #e7e7e7;
}
</style>
</head>
<body>
<!--<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>-->
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="exemple_cours_02.js"></script>
</body>
</html>
TP/exemple_cours_02/exemple_cours_02.js 0 → 100644
let svg_width = 640,
svg_height = 480,
margin_top = 30,
margin_bottom = 30,
margin_left = 30,
margin_right = 30,
//-----------------
padding = 35, // <-- ICI ---
//-----------------
width = svg_width - margin_left - margin_right - (2 * padding),
height = svg_height - margin_top - margin_bottom - (2 * padding);
svg_viz = d3.select('body').append('svg')
.attr('class',"g_svg")
.attr('width', svg_width)
.attr('height', svg_height);
svg_rect = svg_viz.append('g').append('rect')
.attr('class',"rect_svg")
.attr('width', svg_width)
.attr('height', svg_height);
g_top = svg_viz.append('rect')
.attr('class',"g_top")
.attr('width', width)
.attr('height', margin_top)
.attr("transform", "translate(" + (margin_left + padding) + "," + (0 + padding) + ")");
g_left = svg_viz.append('rect')
.attr('class',"g_left")
.attr('width', margin_left)
.attr('height', height)
.attr("transform", "translate(" + (0 + padding) + "," + (margin_top + padding) + ")");
g_right = svg_viz.append('rect')
.attr('class',"g_right")
.attr('width', margin_right)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + width + padding) + "," + (margin_top + padding) + ")");
g_bottom = svg_viz.append('rect')
.attr('class',"g_bottom")
.attr('width', width)
.attr('height', margin_bottom)
.attr("transform", "translate(" + (margin_left + padding) + "," + (margin_top + height + padding) + ")");
chart = svg_viz.append('rect')
.attr('class',"chart")
.attr('width', width)
.attr('height', height)
.attr("transform", "translate(" + (margin_left + padding) + "," + (margin_top + padding) + ")")
paragraphe_1 = d3.select('body').append('p')
.text("Sans padding, on peut voir que certains bords sont tronqué. Dans la pratique, on ajoute aussi un padding. Ici padding = "+padding);
paragraphe_1 = d3.select('body').append('p')
.text("Essayez de faire varier cette valeur");
TP/exemple_cours_03/exemple_cours_03.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Jointure data-element D3.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
text {
font: bold 48px monospace;
}
.enter {
fill: green;
}
.update {
fill: #333;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="exemple_cours_03.js"></script>
</body>
</html>
TP/exemple_cours_03/exemple_cours_03.js 0 → 100644
//=======================================================//
// Par Jeremy FOUQUAT //
// Source : https://bl.ocks.org/mbostock/3808218 //
//=======================================================//
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var text = g.selectAll("text")
.data(data);
console.log( data );
console.log( text );
// UPDATE
// Update old elements as needed.
text.attr("class", "update");
// ENTER
// Create new elements as needed.
//
// ENTER + UPDATE
// After merging the entered elements with the update selection,
// apply operations to both.
text.enter().append("text")
.attr("class", "enter")
.attr("x", function(d, i) { return i * 32; })
.attr("dy", ".35em")
.merge(text)
.text(function(d) { return d; });
// EXIT
// Remove old elements as needed.
text.exit().remove();
}
// The initial display.
update(alphabet);
// Grab a random sample of letters from the alphabet, in alphabetical order.
d3.interval(function() {
update(d3.shuffle(alphabet)
.slice(0, Math.floor(Math.random() * 26))
.sort());
}, 5500);
TP/exemple_cours_04/exemple_cours_04.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Icons / symbols in D3.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="exemple_cours_04.js"></script>
</body>
</html>
TP/exemple_cours_04/exemple_cours_04.js 0 → 100644
//=======================================================//
// Par Jeremy FOUQUAT //
// Source : https://bl.ocks.org/mbostock/3808218 //
//=======================================================//
var width = 960,
height = 500;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
// First solution ===================================
var first = svg.append("g")
.attr('class', "first-image")
.attr("transform", "translate(" + 75 + "," + 75 + ")")
.append("path")
.attr("d", d3.symbol().type(d3.symbolCross).size(10000));
// Second solution ==================================
var second = svg.append('svg:image')
.attr("version", "1.1")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("class", "dvf-table-embedded-chart")
.attr("href", "fart.svg")
.attr("width",150)
.attr("height", 150)
.attr("transform", "translate(" + 160 + "," + 0 + ")");
// Third solution ===================================
var test = null;
d3.xml("flame.svg", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
test = svg.append("svg")
.attr('class', "third-image")
.attr("width", 150)
.attr("height",150)
.attr("transform", "translate(" + 320 + "," + 0 + ")")
.each(function() {
this.appendChild(importedNode);
})
return test;
});
var third = svg.select(".third-image");
TP/exemple_cours_04/fart.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#DBDBDB;" d="M504.986,256.038c0-63.729-49.989-115.778-112.894-119.084c-2.162-0.113-4.125-1.299-5.273-3.135
c-0.807-1.293-1.245-2.775-1.323-4.297c-2.501-48.557-42.258-91.436-91.069-91.436c-56.084,0-99.083,50.216-90.151,105.775
c1.484,9.23-3.178,18.332-11.342,22.886c-22.167,12.369-47.257,20.675-73.651,24.271l-83.202,10.111
c-7.507,1.023-12.398,8.366-10.526,15.709c4.088,16.035,8.438,44.647,0.081,77.613c-1.969,7.766,3.261,15.518,11.2,16.599
l82.448,10.007c29.472,4.016,57.316,13.904,81.283,28.763c4.035,2.501,6.054,7.302,4.97,11.924
c-13.475,57.401,30.121,112.247,88.891,112.247c46.587,0,85.013-41.2,90.596-87.237c0.845-6.966,6.861-11.455,13.329-12.135
C458.281,368.314,504.986,317.636,504.986,256.038z"/>
<path style="fill:#C9C6C5;" d="M253.808,372.674c0.009-0.078,0.015-0.147,0.025-0.228c1.231-10.497-0.576-17.061-1.906-20.265
l-1.2-2.361l-4.721-6.525c-37.923-52.407-39.085-122.919-2.91-176.548c0,0,5.007-8.826,8.37-15.564
c0.779-1.68,2.428-6.024,2.323-12.265c-0.16-1.505-0.28-3.005-0.366-4.5c-0.008-0.057-0.012-0.11-0.021-0.167l-0.127-3.356
c-0.775-41.462,26.803-77.779,65.573-89.136c-7.77-2.383-15.959-3.674-24.42-3.674c-53.742,0-95.461,46.111-90.993,98.848
c0.004,0.045,0.008,0.091,0.012,0.136c0.06,0.698,0.126,1.397,0.202,2.098c0.024,0.221,0.053,0.442,0.078,0.664
c0.063,0.543,0.125,1.086,0.198,1.631c0.106,0.797,0.222,1.597,0.351,2.397c1.469,9.137-2.95,18.186-11.023,22.71
c-22.245,12.468-47.449,20.835-73.97,24.449l-83.202,10.111c-7.507,1.023-12.398,8.366-10.526,15.709
c4.088,16.035,8.438,44.647,0.081,77.613c-1.969,7.766,3.261,15.518,11.2,16.599l82.448,10.007
c29.472,4.016,57.316,13.904,81.283,28.763c0.397,0.246,0.768,0.52,1.125,0.808c0.056,0.045,0.113,0.088,0.168,0.134
c0.336,0.282,0.651,0.583,0.947,0.898c0.053,0.057,0.105,0.114,0.157,0.171c0.295,0.328,0.574,0.669,0.826,1.027
c0.024,0.033,0.045,0.068,0.068,0.103c0.26,0.377,0.5,0.769,0.711,1.174l0.009,0.016c0.213,0.411,0.396,0.835,0.555,1.269
c0.015,0.041,0.031,0.082,0.046,0.123c0.153,0.43,0.28,0.869,0.379,1.316c0.007,0.033,0.014,0.067,0.021,0.1
c0.199,0.94,0.28,1.911,0.226,2.889c-0.035,0.631-0.12,1.265-0.268,1.896c-13.475,57.401,30.121,112.247,88.891,112.247
c8.339,0,16.415-1.327,24.09-3.758C277.059,457.933,248.832,417.102,253.808,372.674z"/>
<path d="M7.507,185.285c2.912,0-2.299,1.404,102.023-43.154c3.806-1.635,5.566-6.045,3.932-9.853
c-1.636-3.806-6.044-5.563-9.853-3.932L4.543,170.891C-2.918,174.096-0.617,185.285,7.507,185.285z"/>
<path d="M109.53,370.287l-99.067-42.544c-3.812-1.634-8.216,0.126-9.853,3.932c-1.635,3.807,0.126,8.217,3.932,9.853
c104.322,44.559,99.106,43.154,102.023,43.154c2.908,0,5.675-1.701,6.896-4.542C115.096,376.332,113.335,371.922,109.53,370.287z"/>
<path d="M182.34,227.344c-0.405-4.123-4.084-7.139-8.196-6.731L41.636,233.613c-4.122,0.404-7.136,4.074-6.731,8.196
c0.402,4.096,4.046,7.138,8.196,6.731l132.508-13.001C179.731,235.136,182.745,231.466,182.34,227.344z"/>
<path d="M175.609,280.241L43.101,267.24c-4.113-0.402-7.791,2.61-8.196,6.731c-0.404,4.122,2.609,7.792,6.731,8.197l132.508,13.001
c4.144,0.406,7.794-2.629,8.196-6.731C182.745,284.316,179.731,280.646,175.609,280.241z"/>
<path d="M338.25,60.365c3.366,2.413,8.053,1.639,10.467-1.728c2.412-3.367,1.639-8.053-1.728-10.467
C274.76-3.583,175.854,66.219,198.202,153.923c-23.914,16.822-52.835,27.932-83.647,32.129l-85.7,11.678
c-4.104,0.56-6.978,4.34-6.419,8.444c0.562,4.122,4.358,6.976,8.444,6.419l85.7-11.678c31.656-4.313,61.503-15.454,86.646-32.269
c7.614,17.619,20.335,32.884,37.04,43.71c1.261,0.816,2.674,1.207,4.072,1.207c7.425,0,10.357-9.731,4.086-13.796
c-23.975-15.54-38.289-41.85-38.289-70.38C210.136,63.711,284.316,21.713,338.25,60.365z"/>
<path d="M430.443,358.27c-14.272,6.317-29.479,9.522-45.198,9.522c-4.143,0-7.5,3.357-7.5,7.5c0,22.654-9.046,45.707-24.818,63.243
c-53.244,59.203-142.789,16.62-142.789-55.85c0-27.885,13.814-53.864,36.953-69.496c3.433-2.319,4.335-6.981,2.017-10.414
c-2.318-3.433-6.982-4.335-10.414-2.017c-15.898,10.741-28.053,25.631-35.434,42.691c-25.148-16.828-55.009-27.977-86.679-32.292
l-85.7-11.677c-4.092-0.558-7.884,2.314-8.444,6.419c-0.559,4.104,2.314,7.885,6.419,8.444l85.7,11.677
c30.821,4.2,59.749,15.314,83.669,32.144c-24.863,97.177,96.28,167.762,165.855,90.401c16.536-18.386,26.669-42.086,28.4-65.982
c15.259-0.852,30.042-4.403,44.036-10.6c3.788-1.677,5.499-6.106,3.821-9.895C438.662,358.302,434.229,356.589,430.443,358.27z"/>
<path d="M392.468,129.493c-1.377-18.939-8.046-37.941-19.147-54.208c-2.336-3.421-7.002-4.3-10.424-1.968
c-3.422,2.335-4.302,7.002-1.968,10.424c18.204,26.676,16.629,51.896,16.875,53.946c-0.726,11.065-3.354,21.888-7.682,31.631
c-5.219-3.315-11.033-5.725-17.255-7.076c-4.045-0.875-8.041,1.689-8.921,5.737c-0.879,4.048,1.689,8.042,5.737,8.922
c20.605,4.476,33.66,24.773,29.184,45.381c-4.467,20.557-24.822,33.65-45.383,29.184c-4.045-0.871-8.041,1.689-8.921,5.737
c-0.879,4.047,1.689,8.041,5.737,8.922c49.621,10.787,84.788-47.978,51.516-86.679c2.14-3.017,8.412-18.093,10.417-34.937
c58.378,3.62,104.767,52.255,104.767,111.529c0,32.538-14.148,63.4-38.816,84.671c-3.137,2.704-3.487,7.44-0.782,10.578
c2.709,3.142,7.447,3.483,10.578,0.782c27.978-24.122,44.022-59.124,44.022-96.03C512.001,188.57,459.013,133.25,392.468,129.493z"
/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
TP/exemple_cours_04/flame.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.269 511.269" style="enable-background:new 0 0 511.269 511.269;" xml:space="preserve">
<path style="fill:#F3705A;" d="M140.367,465.067C116.9,438.4,93.434,410.667,78.5,377.6c-14.933-35.2-19.2-75.733-11.733-114.133
s24.533-74.667,49.067-105.6c-2.133,26.667,7.467,54.4,25.6,74.667c-10.667-51.2,6.4-106.667,40.533-147.2S263.034,18.133,312.1,0
c-24.533,25.6-27.733,66.133-18.133,100.267c9.6,34.133,29.867,64,48,94.933c18.133,30.933,35.2,62.933,36.267,98.133
c9.6-18.133,20.267-36.267,26.667-56.533c6.4-20.267,9.6-41.6,4.267-61.867c19.2,23.467,29.867,46.933,35.2,76.8
c5.333,29.867,4.267,60.8,1.067,90.667c-4.267,33.067-12.8,67.2-30.933,94.933c-21.333,33.067-55.467,56.533-92.8,69.333
C255.567,518.4,190.5,508.8,140.367,465.067z"/>
<path style="fill:#FFD15C;" d="M221.434,504.533C308.9,538.667,395.3,435.2,347.3,355.2c0-1.067-1.067-1.067-1.067-2.133
c4.267,43.733-6.4,75.733-26.667,93.867c10.667-25.6,3.2-55.467-9.6-81.067c-12.8-24.533-30.933-46.933-44.8-70.4
c-13.867-24.533-24.533-52.267-18.133-80c-25.6,19.2-43.733,48-51.2,78.933c-7.467,30.933-3.2,65.067,10.667,93.867
c-16-11.733-27.733-30.933-28.8-51.2c-17.067,20.267-27.733,46.933-26.667,73.6C151.034,452.267,184.1,489.6,221.434,504.533z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
TP/exemple_cours_04/food.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300.167 300.167" style="enable-background:new 0 0 300.167 300.167;" xml:space="preserve">
<g>
<path d="M251.39,157.505c-1.362-1.559-2.517-3.26-3.469-5.056c-0.468,48.27-39.875,87.398-88.254,87.398
c-48.669,0-88.265-39.596-88.265-88.265s39.596-88.265,88.265-88.265c41.868,0,77.02,29.304,86.027,68.477l7.993-59.42l0.18-1.336
c-22.76-26.581-56.544-43.457-94.2-43.457c-29.378,0-56.398,10.276-77.667,27.414v1.283v1.136v25.168v0.999
c0,16.811-8.713,32.159-22.5,40.929v98.378v1.695c22.574,30.89,59.063,50.998,100.167,50.998c43.192,0,81.291-22.203,103.5-55.79
v-1.817V165.28C258.661,163.814,254.578,161.151,251.39,157.505z"/>
<path d="M159.667,78.318c-40.398,0-73.265,32.866-73.265,73.265s32.866,73.265,73.265,73.265s73.265-32.866,73.265-73.265
S200.065,78.318,159.667,78.318z"/>
<path d="M299.833,14.476c0-6.384-5.175-11.559-11.559-11.559c-5.788,0-10.684,4.281-11.455,10.018l-16.89,125.549
c-0.445,3.305,0.56,6.64,2.754,9.15c2.195,2.51,5.366,3.949,8.701,3.949h6.782V286.25c0,6.075,4.925,11,11,11s11-4.925,11-11
L299.833,14.476z"/>
<path d="M67,16.917c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v41.499H41V16.917c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5
v41.499H15V16.917c0-4.143-3.357-7.5-7.5-7.5S0,12.774,0,16.917v67.666c0,14.619,9.417,27.073,22.5,31.636V286.25
c0,6.075,4.925,11,11,11s11-4.925,11-11V116.219C57.583,111.656,67,99.202,67,84.583V16.917z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
TP/exemple_cours_04/fox.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#FF7A53;" d="M481.54,356.126l-14.622,1.35c-27.534,2.56-87.714,15.442-97.965,38.886
c-2.27,5.191-4.571,11.022-7.001,17.203c-8.081,20.543-17.243,43.827-32.635,62.97c-11.192,13.922-24.394,23.784-39.466,29.505
C279.439,510.01,268.147,512,256.005,512h-0.01c-12.142,0-23.444-1.99-33.855-5.961c-15.072-5.721-28.274-15.582-39.466-29.505
c-15.392-19.143-24.554-42.427-32.635-62.96c-2.43-6.181-4.731-12.022-7.001-17.213c-10.252-23.444-70.431-36.326-97.975-38.886
l-14.602-1.36l1.03-14.642c1.16-16.423,3.13-32.265,5.921-47.497c6.951-38.116,18.943-72.401,35.846-102.356
c0.97-1.71,1.95-3.421,2.95-5.101c0,0,0-0.01,0.01-0.01C13.517,128.87,40.601,23.744,41.842,19.123L46.932,0l142.892,84.443
l-0.49,0.82h0.01c21.413-8.301,44.037-12.452,66.65-12.452h0.01c22.614,0,45.227,4.151,66.64,12.452h0.01l-0.49-0.82L465.058,0
l5.091,19.123c1.24,4.621,28.324,109.747-34.375,167.386c0.01,0,0.01,0.01,0.01,0.01c1,1.68,1.98,3.391,2.95,5.101
c16.783,29.745,28.735,63.76,35.696,101.556c2.87,15.482,4.891,31.585,6.071,48.298L481.54,356.126z"/>
<path style="fill:#FF4F19;" d="M481.54,356.126l-14.622,1.35c-27.534,2.56-87.714,15.442-97.965,38.886
c-2.27,5.191-4.571,11.022-7.001,17.203c-8.081,20.543-17.243,43.827-32.635,62.97c-11.192,13.922-24.394,23.784-39.466,29.505
C279.439,510.01,268.147,512,256.005,512V72.811c22.614,0,45.227,4.151,66.64,12.452h0.01l-0.49-0.82L465.058,0l5.091,19.123
c1.24,4.621,28.324,109.747-34.375,167.386c0.01,0,0.01,0.01,0.01,0.01c1,1.68,1.98,3.391,2.95,5.101
c16.783,29.745,28.735,63.76,35.696,101.556c2.87,15.482,4.891,31.585,6.071,48.298L481.54,356.126z"/>
<rect x="306.782" y="250.483" transform="matrix(-0.7085 -0.7057 0.7057 -0.7085 355.7003 696.9269)" style="fill:#3A3A41;" width="30.004" height="49.037"/>
<rect x="165.195" y="259.995" transform="matrix(-0.7057 -0.7085 0.7085 -0.7057 128.7596 603.4773)" style="fill:#57555C;" width="49.037" height="30.004"/>
<path style="fill:#FFD8A6;" d="M481.54,356.126l-14.622,1.35c-27.534,2.56-87.714,15.442-97.965,38.886
c-2.27,5.191-4.571,11.022-7.001,17.203c-8.081,20.543-17.243,43.827-32.635,62.97C310.393,500.068,285.74,512,256.005,512h-0.01
c-29.735,0-54.398-11.932-73.321-35.466c-15.392-19.143-24.554-42.427-32.635-62.96c-2.43-6.181-4.731-12.022-7.001-17.213
c-10.252-23.444-70.431-36.326-97.975-38.886l-14.602-1.36l1.03-14.642c1.16-16.423,3.13-32.265,5.921-47.497
c4.241,0.58,9.231,1.35,14.792,2.38c4.531,0.84,9.451,1.84,14.662,3.05c55.999,13.002,145.603,49.378,155.274,149.643h67.711
c9.982-103.496,101.666-138.922,155.054-150.834c5.321-1.18,10.252-2.13,14.692-2.89c5.921-1.02,10.962-1.7,14.832-2.15
c2.87,15.482,4.891,31.585,6.071,48.298L481.54,356.126z"/>
<path style="fill:#FFC173;" d="M481.54,356.126l-14.622,1.35c-27.534,2.56-87.714,15.442-97.965,38.886
c-2.27,5.191-4.571,11.022-7.001,17.203c-8.081,20.543-17.243,43.827-32.635,62.97C310.393,500.068,285.74,512,256.005,512v-62.95
h33.845c9.982-103.496,101.666-138.922,155.054-150.834c5.321-1.18,10.252-2.13,14.692-2.89c5.921-1.02,10.962-1.7,14.832-2.15
c2.87,15.482,4.891,31.585,6.071,48.298L481.54,356.126z"/>
<path style="fill:#57555C;" d="M289.85,447.37v58.669C279.439,510.01,268.147,512,256.005,512h-0.01
c-12.142,0-23.444-1.99-33.855-5.961V447.37H289.85z"/>
<path style="fill:#3A3A41;" d="M289.85,447.37v58.669C279.439,510.01,268.147,512,256.005,512v-64.63H289.85z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
TP/exemple_cours_05/exemple_cours_05.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Transitions in D3.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="exemple_cours_05.js"></script>
</body>
</html>
TP/exemple_cours_05/exemple_cours_05.js 0 → 100644
//=======================================================//
// Par Jeremy FOUQUAT //
// Source : https://bl.ocks.org/mbostock/3808218 //
//=======================================================//
var svg = d3.select('svg')
.append('rect')
.attr("width", "50px")
.attr("height", "50px")
.attr("x", 0)
.attr("y", 0)
.attr("style", "fill:red;")
.on("touchstart", animate)
.on("click", animate)
.on("load", animate);
function animate() {
var stroke = d3.selectAll("rect");
// Then schedule the new transition.
stroke.transition()
.duration(0)
.attr("x", 0)
.attr("y", 0)
//.attr("transform", "translate(" + 0 + "," + 0 + ")" )
.transition()
.duration(1000)
.attr("x", 0)
.attr("y", 450)
//.attr("transform", "translate(" + 0 + "," + 450 + ")" )
.transition()
.duration(1000)
.attr("x", 450)
.attr("y", 450)
//.attr("transform", "translate(" + 450 + "," + 450 + ")" )
.transition()
.duration(1000)
.attr("x", 450)
.attr("y", 0)
//.attr("transform", "translate(" + 450 + "," + 0 + ")" )
.transition()
.duration(1000)
.attr("x", 0)
.attr("y", 0)
//.attr("transform", "translate(" + 0 + "," + 0 + ")" );
}
TP/lab01/d3js_lab_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Lab 01 : Nuage de points</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.chart_viz_01 {
font-size: 14px
}
.x_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.y_grid_viz_01 .tick line {
stroke: #EEEEEE;
}
.x_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.y_grid_viz_01 .tick text {
stroke: #EEEEEE;
display: none;
}
.x_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_viz_01 .tick text{
font-size: 14px;
}
.y_axis_left_viz_01 .tick text {
fill: blue;
font-size: 14px;
}
.y_axis_right_viz_01 .tick text {
fill: red;
font-size: 14px;
}
.tooltip_viz_01 {
position: absolute;
text-align: center;
padding: 10px;
font: 18px sans-serif;
color : #FFFFFF;
background: #033656;
pointer-events: none;
}
</style>
</head>
<body>
<!--<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>-->
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript" src="d3js_lab_01.js"></script>
</body>
</html>
TP/lab01/d3js_lab_01.js 0 → 100644
//===========================================================================//
// Visoalisation formation D3.js Par Jérémy FOUQUAT //
//===========================================================================//
//=============================================//
// 1. Dataset management //
//=============================================//
let dataset = null;
d3.csv("shot_logs.csv", function(error, data) {
//=========================================//
// 1.1. Select and rename attributes //
//=============================================================//
// QUESTION_1 : Utiliser la fonction map sur les données //
// : Retourner le nom du joueur (player_name) et si //
// : le tir est réussi ou non (fgm) //
//=============================================================//
//dataset_field_goal =
//=========================================//
// 1.2. Call visualisation function //
//=========================================//
visualisation_01(dataset_field_goal);
});
//=============================================//
// 2. Visualisation management //
//=============================================//
function visualisation_01(dataset){
//=========================================//
// 2.1. Variables management //
//=============================================================//
// REMARQUE_1 : Nous allons faire une liste de joueurs. Pour //
// : chaque joueur, nous allons retenir le nombre //
// : de panier mis, ainsi que le nombre de tirs //
// : pris dans une saison //
//=============================================================//
let dataset_reworked = [],
x_domain_min = 0,
x_domain_max = 0,
y_domain_min = 0,
y_domain_max = 0,
x_scale = null,
y_scale = null,
svg_width = 1024,
svg_height = 728,
margin_top = 20,
margin_bottom = 20,
margin_left = 20,
margin_right = 20,
padding_top = 20,
padding_bottom = 40,
padding_left = 40,
padding_right = 40,
width = svg_width - margin_left - margin_right - padding_left - padding_right,
height = svg_height - margin_top - margin_bottom - padding_top - padding_bottom,
svg_viz = null,
x_grid_chart = null,
y_grid_chart = null,
x_axis_chart = null,
y_axis_chart = null,
chart = null,
tooltip_chart = null;
//=========================================//
// 2.2. Dataset modifications //
//=============================================================//
// REMARQUE_2 : Nous allons faire une liste de joueurs. Pour //
// : chaque joueur, nous allons retenir le nombre //
// : de panier mis, ainsi que le nombre de tirs //
// : pris dans une saison //
//=============================================================//
dataset.forEach(function(d,i) {
// Première insertion
if (dataset_reworked.find( function(elem) { return elem.nom == d.player_name; } ) == undefined)
dataset_reworked.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});
// Ajout de données
else {
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fgm += Number(d.fgm) ;
dataset_reworked[ dataset_reworked.findIndex( function(elem) {
return elem.nom == d.player_name;
})
].fga++ ;
}
});
//=========================================//
// 2.3. Domains and scales management //
//=============================================================//
// QUESTION_2 : Mettre dans les variables ci-dessous //
// : x_domain_max = Le nombre maximal de tir pris //
// : par un joueur //
// : y_domain_max = Le nombre maximal de panier mis //
// : par un joueur //
//=============================================================//
//x_domain_max
//y_domain_max
//=============================================================//
// QUESTION_3 : Mettre dans les variables ci-dessous //
// : x_scale = L'échelle (linéaire) des X //
// : y_scale = L'échelle (linéaire) des Y //
// : Fixer les paramètres domain et range //
//
//=============================================================//
//x_scale
//y_scale
//=============================================================//
// QUESTION_8 : Créer une échelle de couleur pour les points du//
// : nuage //
//=============================================================//
//percentage_scale
//=========================================//
// 2.4. Container management //
//=============================================================//
// QUESTION_4 : Inspirez-vous de l'exemple 02 du cours et de //
// : d3js_lab01_expected_result.png pour placer vos //
// : balise/containeur <g> //
//=============================================================//
//svg_viz
//x_grid_chart
//y_grid_chart
//x_axis_chart
//y_axis_chart
//chart
//=============================================================//
// QUESTION_9 : Créer une balise <div> avec une opacité de 0 //
// : représentant le tooltip //
//=============================================================//
//tooltip_chart
//=========================================//
// 2.5. x-axis/grid management //
//=============================================================//
// QUESTION_5 : Utiliser la fonction d3.axisBottom() pour //
// : créer l'axe et la grille des x (tirs tentés) //
//=============================================================//
//x_grid_chart
//x_axis_chart
//=========================================//
// 2.6. y-axis/grid management //
//=============================================================//
// QUESTION_6 : Utiliser la fonction d3.axisBottom() pour //
// : créer l'axe et la grille des y (tirs réussis) //
//=============================================================//
//y_grid_chart
//y_axis_chart
//=========================================//
// 2.7. Point management //
//=============================================================//
// QUESTION_7 : Créer maintenant le nuage de point. Pour cela://
// : 1 - Lier le dataset à des cercles svg //
// : "cercle" == "joueur" //
// : 2 - Placer les cercles dans des coordonnées //
// : (x = tir tenté, y = tir réussi) //
// : 3 - Ajuster la couleur du joueur en fonction //
// : du % de réussite du joueur //
//=============================================================//
// QUESTION_10 : Gérer le tooltip avec la fonction .on() pour //
// : afficher le nom et le % au tir du joueur //
//=============================================================//
//chart
}
TP/lab01/shot_logs.csv 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
TP/minilab01/d3js_minilab_01.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mini lab 01 : Camembert</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="../d3.v4.min.js"></script>
<script type="text/javascript">
//===========================================================================//
// Question 1 : Mettre dans une variable un tableau d’entier (les donnees) //
// : Mettre dans une variable un tableau de couleurs (CSS) //
//===========================================================================//
//let data ,
// color
//===========================================================================//
// Question 2 : Créer une balise SVG (puis la stocker dans une variable) //
// : Créer une balise g (puis la stocker dans une variable) //
//===========================================================================//
//let svg
//let g
//===========================================================================//
// Question 3 : Créer un objet d3.pie, puis la stocker //
// : Comparer le tableau de données crée dans la question 1, avec //
// l'objet pie ==> variable_pie([variable_données])) //
//===========================================================================//
//let pie
//===========================================================================//
// Question 4 : Créer un objet d3.arc, puis la stocker //
// : Fixer les options innerRadius et outerRadius (voir plus) //
// (Pour tester cette fonction, décommentez le code de la question 5) //
//===========================================================================//
//let arc
//===========================================================================//
// Question 5 : Modifier le design du camembert //
// https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes //
//===========================================================================//
//let path = g.selectAll('path')
// .data(pie(data))
// .enter()
// .append('path')
// .attr('d', arc)
// .attr('fill', function(d, i) {
// return color[i];
// });
</script>
</body>
</html>
Markdown is supported
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