Skip to content

Instantly share code, notes, and snippets.

@fdaudens

fdaudens/flare-programs.json

Created April 18, 2015 22:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fdaudens/f779e6c70bdeaa23dbbc to your computer and use it in GitHub Desktop.
Save fdaudens/f779e6c70bdeaa23dbbc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flare-programs.json
{
"name": "flare",
"children": [
{
"name": "Programs",
"children": [
{
"name": "Data",
"children": [
{"name": "D3", "size": 9956},
{"name": "Excel", "size": 9956},
{"name": "Fusion Tables", "size": 9956},
{"name": "Tableau Public", "size": 9956},
{"name": "Dataw,rapper", "size": 9956},
{"name": "OpenRefine", "size": 9956}
]
},
{
"name": "Analytics",
"children": [
{"name": "Chartbeat", "size": 2345},
{"name": "Google Analytics", "size": 2345},
{"name": "Omniture", "size": 2345}
]
},
{
"name": "Mapping",
"children": [
{"name": "CartoDB", "size": 32343},
{"name": "Mapbox", "size": 3436},
{"name": "QGIS", "size": 3657},
{"name": "Google Maps", "size": 343234}
]
},
{
"name": "Photography / Video",
"children": [
{"name": "Photoshop", "size": 983},
{"name": "Sound", "size": 389},
{"name": "Newscutter", "size": 33456},
{"name": "Final Cut Pro", "size": 3345667}
]
},
{
"name": "Web Tools",
"children": [
{"name": "HTML", "size": 3224},
{"name": "CSS", "size": 12334},
{"name": "Git", "size": 34464},
{"name": "ScribbleLive", "size": 356674}
]
}
]
}
]
}
Raw
flare.json
{
"name": "Resume",
"poste": " ",
"startDate": " ",
"endDate": " ",
"summary": " ",
"highlights": " ",
"children": [
{
"name": "Work Experience",
"poste": " ",
"startDate": " ",
"endDate": " ",
"summary": " ",
"highlights": " ",
"children": [
{
"name": "Radio-Canada (CBC) - ",
"poste": "Editor - Innovative Storytelling",
"size": 2,
"startDate": "2013 - ",
"endDate": "2015",
"summary": "Innovative Storytelling Unit - ",
"highlights": "Created many new narrative formats, deployed datavisualization and cartography tools"
},
{
"name": "Radio-Canada (CBC) - ",
"poste": "Social Media Editor",
"size": 2,
"startDate": "2011 - ",
"endDate": "2013",
"summary": "Social media strategy, news coverage",
"highlights": "Created and manage the #1 Twitter account for news in Canada on the French market."
},
{
"name": "Radio-Canada (CBC) - ",
"poste": "Journalist",
"size": 3,
"startDate": "2008 - ",
"endDate": "2011",
"summary": "Online, radio and television - ",
"highlights": "Wrote several exclusive stories"
},
{
"name": "La Presse - ",
"poste": "Journalist",
"size": 2,
"startDate": "2007 - ",
"endDate": "2008",
"summary": "Online edition",
"highlights": " "
},
{
"name": "Federation of Journalists in Quebec - ",
"poste": "Project Manager",
"size": 2,
"startDate": "2005 - ",
"endDate": "2007",
"summary": "Online projects",
"highlights": " "
},
{
"name": "Freelance for French Media (France 3, Rue89) - ",
"poste": "Editor - Innovative Storytelling",
"size": 1,
"startDate": "2006 - ",
"endDate": "2015",
"summary": "Television and online freelance covering major stories in Canada for French media",
"highlights": " "
}
]
},
{
"name": "Education",
"poste": " ",
"startDate": " ",
"endDate": " ",
"summary": " ",
"highlights": " ",
"children": [
{
"name": "McGill University - ",
"poste": "Certificate of Proficiency in English",
"size": 1,
"startDate": "2013",
"endDate": " ",
"summary": " ",
"highlights": " "
},
{
"name": "University of Quebec in Montreal - ",
"poste": "Arabic Culture and Language Certificate",
"size": 1,
"startDate": "2014 - ",
"endDate": "2015",
"summary": " ",
"highlights": " "
},
{
"name": "University of Quebec in Montreal - ",
"poste": "Bachelor of Communications Studies",
"size": 3,
"startDate": "2002 - ",
"endDate": "2005",
"summary": " ",
"highlights": " "
}
]
},
{
"name": "Community Involvement",
"poste": " ",
"startDate": " ",
"endDate": " ",
"summary": " ",
"highlights": " ",
"children": [
{
"name": "Trente Magazine",
"poste": "Editorial Board",
"size": 0.9,
"startDate": "2006 - ",
"endDate": "2015",
"summary": " ",
"highlights": " "
},
{
"name": "Federation of Journalists in Quebec",
"poste": "Board of Directors",
"size": 0.4,
"startDate": "2010 - ",
"endDate": "2014",
"summary": " ",
"highlights": " "
},
{
"name": "L'Hirondelle",
"poste": " Immigrant Integration Program",
"size": 0.1,
"startDate": "2004 - ",
"endDate": "2005",
"summary": " ",
"highlights": " "
}
]
}
]
}
Raw
programs.csv
Program Category
D3 Data
Python Scrapping
CartoDB Mapping
Mapbox Mapping
QGIS Mapping
Google Maps Mapping
Excel Data
OpenRefine Data
Fusion Tables Data
OutWit Hub Scrapping
Chartbeat Analytics
Final Cut Pro Video
HTML/CSS Web tools
Photoshop Photo
Git Web tools
Tableau Data
Newscutter Video
Datawrapper Data
ScribbleLive Web tools
Soundslides Photo
Google Analytics Analytics
Omniture Analytics
Raw
resume-languages.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Florent Daudens Resume - Languages</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Arial, sans-serif;
}
h1 {
font-size: 12px;
margin: 0;
}
p {
font-size: 11px;
margin: 2px 0 0 0;
}
svg {
background-color: white;
}
circle {
shape-rendering: crispEdges;
}
/* AJOUTÉ ceci pour donner l'illusion de barres aux nombres arrondis, car supprimé rangeRoundBands plus bas. */
circle:hover { /* configure le mouse */
fill: #22759D;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
font-color: #0580BC;
}
.y.axis path,
.y.axis line {
opacity: 0; /* rend la barre invisible sur l'axe vertical */
}
</style>
</head>
<body>
<h1>Languages</h1>
<script type="text/javascript">
var w = 600;
var h = 150;
var padding = [ 0, 10, 30, 76 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear() // longueur des barres
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal() // écart entre les barres
.rangeBands([ padding[0], h - padding[2] ], 1);
// enlevé rangeRoundBands, car arrondir causait trop d'espace entre le début du graphique et les barres.
// Aussi, augmenté le padding à 0.2 pour espacer les barres.
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(4);
// .tickFormat(function(d) { return d.Level; });
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("languages.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.value, +b.value);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.value;
}) ]);
heightScale.domain(data.map(function(d) { return d.Language; } )); // va déterminer ce qui va être affiché dans l'axe vertical
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles
.attr("cx", function(d) {
return widthScale(d.value);})
.attr("transform", "translate(" + padding[3] + ")") // l'Ajouter pour aligner les cercles sur l'axe
.attr("cy", function(d) {
return heightScale(d.Language); // détermine où aller chercher les données
})
.attr("r", 0.1)
.attr("fill", "#51A877")
.style("opacity", .7)
.append("title")
.text(function(d) {
return d.Language + ": " + d.Level
});
circles
.transition()
.delay(function(d, i) {
return i * 15;
})
.duration(2000)
.attr("r", 7);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", w - 85)
.attr("y", -2)
.style("text-anchor", "end")
.text("Level");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
resume-programs.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background-color: white;
font-family: Arial, sans-serif;
}
h1 {
font-size: 12px;
margin: 0;
}
p {
font-size: 11px;
margin: 2px 0 0 0;
}
.node {
cursor: pointer;
}
.node circle {
fill: #51A877;
stroke: #51A877;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<body>
<h1>Programs</h1>
<p>(Click to expand)</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 600 - margin.right - margin.left,
height = 300 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
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 + ")");
d3.json("flare-programs.json", function(error, flare) {
root = flare.children[0];
root.x0 = height;
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", "300px");
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 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "51A877" : "#fff"; });
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.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "51A877" : "#fff";
});
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});
});
// 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);
}
</script>
Raw
resume.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background-color: white;
font-family: Arial, sans-serif;
}
h1 {
font-size: 12px;
margin: 0;
}
p {
font-size: 11px;
margin: 2px 0 0 0;
}
</style>
<body>
<h1>Resume</h1>
<p>(Click to interact)</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 600,
height = 600,
radius = Math.min(width, height) / 2.1;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 75, h: 30, s: 3, t: 10
};
var colors = {
"Resume": "#51A877",
"Work Experience": "#4C7D95",
"Education": "#545BB7",
"Community Involvement": "#FFB75E",
"Radio-Canada (CBC) - ": "#0580BC",
"La Presse - ": "#22759D",
"Federation of Journalists in Quebec - ": "#519CC0",
"Federation of Journalists in Quebec": "#519CC0",
"Freelance for French Media (France 3, Rue89) - ": "#5CBAE7",
"McGill University - ": "#6069E1",
"University of Quebec in Montreal - ": "#6D77F8",
"Trente Magazine": "#FF8C00",
"L'Hirondelle": "#FF9615"
};
/*
var color = d3.scale.category20c()
.domain([-1, 0, 1])
.range(["red", "blue", "green"]);
*/
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
//changer scale.linear pour sqrt donne un cercle central plus gros
var y = d3.scale.linear()
.range([0, radius]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(50, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); })
d3.json("flare.json", function(error, root) {
var path = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return colors[d.name]; })
.style("opacity", 0.7)
.style("stroke", "#fff")
.style("stroke-width", 0.2)
//.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click)
.on("mouseover", function(d, i) {
svg.selectAll("text").data([]).exit().remove();
svg.append("text")
.attr("class", "text")
.style("text-anchor", "middle")
.append("tspan")
tooltip.transition()
.duration(1000)
.style("opacity", .9);
tooltip.html(
d.name + d.poste
+ "<br/>" + d.startDate + d.endDate
+ "<br/>" + d.summary + d.highlights
)
.style("text-anchor", "middle")
.style("font-size", "12px")
.style("font-family", "arial")
.style("font-style", "sans-serif");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(1500)
.style("opacity", 0);
});
function click(d) {
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
}
});
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment