erg - Contributions de l’utilisateur [fr]

Plan d'étude interactif

2017-07-13T13:47:14Z

Antoine : /* PLAN D'ETUDE INTERACTIF */

== Github ==

Toutes les informations relatives au projet (code source / todo list) sont disponibles sur le Github du projet : https://github.com/antoine1000/erg-dendrogram

Plan d'étude interactif

2017-07-13T13:46:16Z

Antoine : Contenu remplacé par « == PLAN D'ETUDE INTERACTIF == Voir le Github du projet : https://github.com/antoine1000/erg-dendrogram »

== PLAN D'ETUDE INTERACTIF ==

Voir le Github du projet : https://github.com/antoine1000/erg-dendrogram

Plan d'étude interactif

2017-07-13T12:20:41Z

Antoine :

<syntaxhighlight lang="javascript" line>

var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 1000;
var height = 700;

var i = 0,
duration = 750,
root;

var tree = d3.layout.tree()
.size([height, width]);
/*.size([360, width / 2 - 120]);*/

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Import lightbox
var lightbox;

d3.json("erg.json", function(error, flare) {
if (error) throw error;

root = flare;
root.x0 = height / 2;
root.y0 = 0;

function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}

root.children.forEach(collapse);
update(root);
});

d3.select(self.frameElement).style("height", "800px");

function update(source) {

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
/*.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })*/
.on("click", click);

nodeEnter.append("circle")
.attr("r", 1e-6)
//open lightbox when a node has link and is clicked
.on("click", function (d) {
console.log('click! / this =', this, '/ d =', d);
//open lightbox
if(d.link){
d3.event.preventDefault();
lightbox = lity(d.link);
}
// d3
/*d3.selectAll("circle").filter(function (cd) {return cd == d.parent }).classed('active', true);*/
activate(this, d);
})

nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);

// Transition nodes to their new position.
node.classed("leaf", function(d) { return !d._children; });
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
.attr("r", 4.5);

nodeUpdate.select("text")
.style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();

nodeExit.select("circle")
.attr("r", 1e-6);

nodeExit.select("text")
.style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
/*.attr("d", function(d) {
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});*/

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}

// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}

function activate(elt, d, noclear) {
// Clear all active classes
if(noclear == undefined) {
d3.selectAll("circle.active").classed("active", false);
d3.selectAll("path.link").classed("active", false);
}
// Add active class to elements
d3.select(elt).classed("active", true);
console.log('need to activate', d.parent);

d3.selectAll("circle").each(function (cd) {
if(cd == d.parent){
activate(this, cd, true);
d3.select(this).classed('active', true);
}
// give "active" class to path between clicked node
d3.selectAll("path.link").each(function (cd){
if(cd.target == d){
d3.select(this).classed('active', true);
}
})
});
}

</syntaxhighlight>

Plan d'étude interactif

2017-07-13T12:18:51Z

Antoine :

<syntaxhighlight lang="javascript" line>
var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 1000;
var height = 700;

var i = 0,
duration = 750,
root;

var tree = d3.layout.tree()
.size([height, width]);
/*.size([360, width / 2 - 120]);*/

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Import lightbox
var lightbox;

d3.json("erg.json", function(error, flare) {
if (error) throw error;

root = flare;
root.x0 = height / 2;
root.y0 = 0;

function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}

root.children.forEach(collapse);
update(root);
});

d3.select(self.frameElement).style("height", "800px");

function update(source) {

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
/*.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })*/
.on("click", click);

nodeEnter.append("circle")
.attr("r", 1e-6)
//open lightbox when a node has link and is clicked
.on("click", function (d) {
console.log('click! / this =', this, '/ d =', d);
//open lightbox
if(d.link){
d3.event.preventDefault();
lightbox = lity(d.link);
}
// d3
/*d3.selectAll("circle").filter(function (cd) {return cd == d.parent }).classed('active', true);*/
activate(this, d);
})

nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);

// Transition nodes to their new position.
node.classed("leaf", function(d) { return !d._children; });
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
.attr("r", 4.5);

nodeUpdate.select("text")
.style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();

nodeExit.select("circle")
.attr("r", 1e-6);

nodeExit.select("text")
.style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
/*.attr("d", function(d) {
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});*/

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}

// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}

function activate(elt, d, noclear) {
// Clear all active classes
if(noclear == undefined) {
d3.selectAll("circle.active").classed("active", false);
d3.selectAll("path.link").classed("active", false);
}
// Add active class to elements
d3.select(elt).classed("active", true);
console.log('need to activate', d.parent);

d3.selectAll("circle").each(function (cd) {
if(cd == d.parent){
activate(this, cd, true);
d3.select(this).classed('active', true);
}
// give "active" class to path between clicked node
d3.selectAll("path.link").each(function (cd){
if(cd.target == d){
d3.select(this).classed('active', true);
}
})
});
}

</syntaxhighlight>

Plan d'étude interactif

2017-07-13T12:16:11Z

Antoine : Page créée avec « <syntaxhighlight lang="javascript" line> var margin = {top: 20, right: 120, bottom: 20, left: 120}; var width = 1000; var height = 700; var i = 0, duration = 750,... »

<syntaxhighlight lang="javascript" line>
var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 1000;
var height = 700;

var i = 0,
duration = 750,
root;

var tree = d3.layout.tree()
.size([height, width]);
/*.size([360, width / 2 - 120]);*/

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Import lightbox
var lightbox;

d3.json("erg.json", function(error, flare) {
if (error) throw error;

root = flare;
root.x0 = height / 2;
root.y0 = 0;

function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}

root.children.forEach(collapse);
update(root);
});

d3.select(self.frameElement).style("height", "800px");

function update(source) {

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
/*.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })*/
.on("click", click);

nodeEnter.append("circle")
.attr("r", 1e-6)
//open lightbox when a node has link and is clicked
.on("click", function (d) {
console.log('click! / this =', this, '/ d =', d);
//open lightbox
if(d.link){
d3.event.preventDefault();
lightbox = lity(d.link);
}
// d3
/*d3.selectAll("circle").filter(function (cd) {return cd == d.parent }).classed('active', true);*/
activate(this, d);
})

nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);

// Transition nodes to their new position.
node.classed("leaf", function(d) { return !d._children; });
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
.attr("r", 4.5);

nodeUpdate.select("text")
.style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();

nodeExit.select("circle")
.attr("r", 1e-6);

nodeExit.select("text")
.style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
/*.attr("d", function(d) {
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});*/

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}

// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}

function activate(elt, d, noclear) {
// Clear all active classes
if(noclear == undefined) {
d3.selectAll("circle.active").classed("active", false);
d3.selectAll("path.link").classed("active", false);
}
// Add active class to elements
d3.select(elt).classed("active", true);
console.log('need to activate', d.parent);

d3.selectAll("circle").each(function (cd) {
if(cd == d.parent){
activate(this, cd, true);
d3.select(this).classed('active', true);
}
// give "active" class to path between clicked node
d3.selectAll("path.link").each(function (cd){
if(cd.target == d){
d3.select(this).classed('active', true);
}
})
});
}

<syntaxhighlight>

Erg.be

2017-07-13T12:12:14Z

Antoine : Page créée avec « Ressources Plan d'étude interactif »

[[Ressources]]

[[Plan d'étude interactif]]

Réseaux

2017-07-13T12:09:35Z

Antoine :

[https://www.facebook.com/Erg-Esa-496862707176057/ Page Facebook ]

[https://www.facebook.com/groups/21907376918/ groupe erg - Facebook ]

[http://ergoteur.be/ ergoteur]

Les anciens :

After Howl : http://afterhowl.tumblr.com/
Eric Adam : http://www.saatchiart.com/ERICADAM
Eric Angenot : http://www.ericangenot.net/
Damien Aresta & Pierre Smeets — http://plmd.me
Christian Aschman — http://www.christian-aschman.com
Caroline Balon — http://carolinebalon.be
Sophie Balbeur — jolicoeurmusic.com
Sarah Louise Barbett : https://aisselles.wordpress.com/
Raphaël Bastide : http://www.raphaelbastide.com/
Aline Bouvy — http://alinebouvy.info
Abdel Bouzbiba : http://abdeldebruxelles.tumblr.com
Matthieu Becker — http://matthieubecker.com/
Nicolas Belayew & Maud Dallemagne — http://www.lestontonsracleurs.be
Marcel Berlanger — http://www.marcelberlanger.info
Anne Bossuroy — http://annebossuroy.tumblr.com
Laetitia Bica — http://laetitiabica.be
Théophile Calot — http://www.theophilespapers.com
Charlotte Chauvin — http://chacoco.tumblr.com
Isabelle Copet — http://www.isabellecopet.com
Floriana Da Silva & Cécile Boche— http://www.moxs.eu/projets/
Caroline Dath & Damien Safie — http://www.kidnapyourdesigner.com
Grégory Dapra — http://eurogroupe.org
Antonin De Bemels — https://vimeo.com/antonindebemels
Thierry de Crombrugghe & Pierre Lovens — http://www.typi.be/fr/accueil
François De Jonge — http://superstructurestructure.tictail.com/
Manuela Dechamps Otamendi — http://www.otamendi.eu
Alienor de Vassal & Vincent Moisan — http://studio-alvin.com
Quentin Delègue — http://www.atelier-manufacture.fr
Jean-François Delhez— http://www.warmgeometry.be
Guillaume Deman — http://www.ekta.be
Maxime Dendraën — http://maximedendraen.com
Jean-Paul Deridder : http://www.galeriezander.com/en/artist/jean_paul_deridder
Pierre-Philippe Duchâtelet & Lionel Maes— http://www.lavillahermosa.com
Pierre-Philippe Duchâtelet — http://pierrephilippeduchatelet.be
Elzo Durt — http://elzodurt.com
Silio Durt : http://siliodurt.com/
Daniel Dutrieux — http://danieldutrieux.be
Eitan Efrat : http://www.tilfar.com/
Vincent Evrard : http://www.ogre.be/
Arnaud Fontaine — http://arnaudfontaine.com
Anne Fontenelle — http://annefontenelle.com
Michel François — http://www.xavierhufkens.com/artists/michel-francois
Alizee Freudenthal — http://www.alizeefreudenthal.com
Sacha Goerg — http://sachagoerg.com
Orfée Grandhomme — http://www.uberknackig.com
Loraine Furter — http://designed.with.meteor.com/by
Olivier Foulon — http://www.olivierfoulon.com
Maxim Frank — http://maximfrank.com
Marine Gabaut — http://www.marinegabaut.com
Bernard Gilbert : http://www.bernardgilbert.be/
Jean-Michel Hannecart : http://jeanmichelhannecart.blogspot.fr/
Meryll Hardt : http://meryllhardt.blogspot.fr/
Benoit Henken — http://www.tentwelve.com
Pierre Huyghebaert — http://www.speculoos.com
Benjamin Installé — http://benjamininstalle.net
Maxime Jacobs — http://maximejacobs.com/
Alice Janne — http://www.alicejanne.com
Antoine Jaunard — http://www.variable.club
Corentine Jaunard & Alice Merveille — http://halopublications.com
Jean-Marc Joseph — http://superjeanmarc.com
Anouk Jurdant — almostadrawaweek.tumblr.com
Simon Lagneaux — http://www.simonlagneaux.be
Rémi Lambert : http://doomjest.tumblr.com/
Mike Lamy — http://www.mikelamy.com
Steven Lang — http://www.STVNSTRM.com
Pierre Lecrenier — http://www.lapetiteusine.org
Marie Lécrivain — http://marielecrivain.com
Jonas Locht — http://www.jonaslocht.be
Charlotte Maison — http://www.soldout.be
Xavier Mary — http://www.xaviermary.com
Axelle Minne — https://abmag.be
Marie Nepper — http://marienepper.com
Bertrand Panier — http://www.myowncottage.org
Baptiste Péron — http://baptisteperon.com
Carol Piron — http://fillesapapa.com
Benoit Platéus — http://www.benoitplateus.be
Pascal Popesco — http://www.kaligram.be/contact et [http://leschosesimprimées.com->http://leschosesimprimées.com]
Sacha Rein — http://www.taste.lu
Deborah Robbiano — http://deborahrobbiano.com
Carl Roosens — http://carlroosens.tumblr.com
Roberto Salvador — http://thatdesignbastard.tumblr.com/
Pierre Smeets— http://www.legacylegacy.com
Olivier Stevenart : http://www.ostsa.be/
Boris Thiebaut — http://boristhiebaut.be
Frédéric Vanhorenbeke (1995), Celia Carrera Schmidt & David Nerinckx— http://www.coast-agency.com
Antoine Puel — https://antoine.cool

Utilisateur:Antoine

2017-07-13T12:07:57Z

Antoine : Antoine

Je m'appelle Antoine. J'ai terminé le master de l'ERG en arts numériques en 2017.

Lien vers mon site web : [https://antoine.cool]