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}
     ]
  }
]
}
 ]
}

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": " "
     }
     ]
  }
 ]
}

programs.csv

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>

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>

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>