Difference between revisions of "Team:GO Paris-Saclay/WikiDraft"

m
m
Line 12: Line 12:
  
 
<script>
 
<script>
 +
var matrix = [
 +
  [11975,  5871, 8916, 2868],
 +
  [ 1951, 10048, 2060, 6171],
 +
  [ 8010, 16145, 8090, 8045],
 +
  [ 1013,  990,  940, 6907]
 +
];
  
−
var width = 960,
+
var svg = d3.select("svg"),
−
     height = 136,
+
    width = +svg.attr("width"),
−
     cellSize = 17;
+
     height = +svg.attr("height"),
 +
    outerRadius = Math.min(width, height) * 0.5 - 40,
 +
     innerRadius = outerRadius - 30;
  
−
var formatPercent = d3.format(".1%");
+
var formatValue = d3.formatPrefix(",.0", 1e3);
  
−
var color = d3.scaleQuantize()
+
var chord = d3.chord()
−
     .domain([-0.05, 0.05])
+
     .padAngle(0.05)
−
     .range(["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"]);
+
     .sortSubgroups(d3.descending);
  
−
var svg = d3.select("body")
+
var arc = d3.arc()
−
  .selectAll("svg")
+
     .innerRadius(innerRadius)
−
  .data(d3.range(1990, 2011))
+
     .outerRadius(outerRadius);
−
  .enter().append("svg")
+
−
     .attr("width", width)
+
−
     .attr("height", height)
+
−
  .append("g")
+
−
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
+
  
−
svg.append("text")
+
var ribbon = d3.ribbon()
−
     .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
+
     .radius(innerRadius);
−
    .attr("font-family", "sans-serif")
+
−
    .attr("font-size", 10)
+
−
    .attr("text-anchor", "middle")
+
−
    .text(function(d) { return d; });
+
  
−
var rect = svg.append("g")
+
var color = d3.scaleOrdinal()
−
     .attr("fill", "none")
+
     .domain(d3.range(4))
−
    .attr("stroke", "#ccc")
+
     .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
−
  .selectAll("rect")
+
−
  .data(function(d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+
−
  .enter().append("rect")
+
−
     .attr("width", cellSize)
+
−
    .attr("height", cellSize)
+
−
    .attr("x", function(d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; })
+
−
    .attr("y", function(d) { return d.getDay() * cellSize; })
+
−
    .datum(d3.timeFormat("%Y-%m-%d"));
+
  
−
svg.append("g")
+
var g = svg.append("g")
−
     .attr("fill", "none")
+
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
−
    .attr("stroke", "#000")
+
    .datum(chord(matrix));
−
  .selectAll("path")
+
−
  .data(function(d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+
−
  .enter().append("path")
+
−
    .attr("d", pathMonth);
+
  
−
d3.csv("dji.csv", function(error, csv) {
+
var group = g.append("g")
−
   if (error) throw error;
+
    .attr("class", "groups")
 +
  .selectAll("g")
 +
  .data(function(chords) { return chords.groups; })
 +
   .enter().append("g");
  
−
  var data = d3.nest()
+
group.append("path")
−
      .key(function(d) { return d.Date; })
+
    .style("fill", function(d) { return color(d.index); })
−
      .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
+
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
−
     .object(csv);
+
     .attr("d", arc);
  
−
   rect.filter(function(d) { return d in data; })
+
var groupTick = group.selectAll(".group-tick")
−
      .attr("fill", function(d) { return color(data[d]); })
+
   .data(function(d) { return groupTicks(d, 1e3); })
−
     .append("title")
+
  .enter().append("g")
−
      .text(function(d) { return d + ": " + formatPercent(data[d]); });
+
     .attr("class", "group-tick")
−
});
+
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
  
−
function pathMonth(t0) {
+
groupTick.append("line")
−
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
+
    .attr("x2", 6);
−
      d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
+
−
      d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
+
−
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+
−
      + "H" + w0 * cellSize + "V" + 7 * cellSize
+
−
      + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+
−
      + "H" + (w1 + 1) * cellSize + "V" + 0
+
−
      + "H" + (w0 + 1) * cellSize + "Z";
+
−
}
+
  
 +
groupTick
 +
  .filter(function(d) { return d.value % 5e3 === 0; })
 +
  .append("text")
 +
    .attr("x", 8)
 +
    .attr("dy", ".35em")
 +
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
 +
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
 +
    .text(function(d) { return formatValue(d.value); });
 +
 +
g.append("g")
 +
    .attr("class", "ribbons")
 +
  .selectAll("path")
 +
  .data(function(chords) { return chords; })
 +
  .enter().append("path")
 +
    .attr("d", ribbon)
 +
    .style("fill", function(d) { return color(d.target.index); })
 +
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
 +
 +
// Returns an array of tick angles and values for a given group and step.
 +
function groupTicks(d, step) {
 +
  var k = (d.endAngle - d.startAngle) / d.value;
 +
  return d3.range(0, d.value, step).map(function(value) {
 +
    return {value: value, angle: value * k + d.startAngle};
 +
  });
 +
}
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 16:14, 24 May 2018

Test section

This is text blabla

Test JavaScript

This is a nice, procedurally generate figure, to demonstrate D3 JS integration