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 svg = d3.select("svg"),
+
var width = 960,
−
    width = +svg.attr("width"),
+
     height = 136,
−
     height = +svg.attr("height"),
+
     cellSize = 17;
−
    outerRadius = Math.min(width, height) * 0.5 - 40,
+
−
     innerRadius = outerRadius - 30;
+
  
−
var formatValue = d3.formatPrefix(",.0", 1e3);
+
var formatPercent = d3.format(".1%");
  
−
var chord = d3.chord()
+
var color = d3.scaleQuantize()
−
     .padAngle(0.05)
+
     .domain([-0.05, 0.05])
−
     .sortSubgroups(d3.descending);
+
     .range(["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"]);
  
−
var arc = d3.arc()
+
var svg = d3.select("body")
−
     .innerRadius(innerRadius)
+
  .selectAll("svg")
−
     .outerRadius(outerRadius);
+
  .data(d3.range(1990, 2011))
 +
  .enter().append("svg")
 +
     .attr("width", width)
 +
     .attr("height", height)
 +
  .append("g")
 +
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
  
−
var ribbon = d3.ribbon()
+
svg.append("text")
−
     .radius(innerRadius);
+
     .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
 +
    .attr("font-family", "sans-serif")
 +
    .attr("font-size", 10)
 +
    .attr("text-anchor", "middle")
 +
    .text(function(d) { return d; });
  
−
var color = d3.scaleOrdinal()
+
var rect = svg.append("g")
−
     .domain(d3.range(4))
+
     .attr("fill", "none")
−
     .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
+
    .attr("stroke", "#ccc")
 +
  .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"));
  
−
var g = svg.append("g")
+
svg.append("g")
−
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
+
     .attr("fill", "none")
−
    .datum(chord(matrix));
+
    .attr("stroke", "#000")
 +
  .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);
  
−
var group = g.append("g")
+
d3.csv("dji.csv", function(error, csv) {
−
    .attr("class", "groups")
+
   if (error) throw error;
−
  .selectAll("g")
+
−
  .data(function(chords) { return chords.groups; })
+
−
   .enter().append("g");
+
  
−
group.append("path")
+
  var data = d3.nest()
−
    .style("fill", function(d) { return color(d.index); })
+
      .key(function(d) { return d.Date; })
−
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
+
      .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
−
     .attr("d", arc);
+
     .object(csv);
  
−
var groupTick = group.selectAll(".group-tick")
+
   rect.filter(function(d) { return d in data; })
−
   .data(function(d) { return groupTicks(d, 1e3); })
+
      .attr("fill", function(d) { return color(data[d]); })
−
  .enter().append("g")
+
     .append("title")
−
     .attr("class", "group-tick")
+
      .text(function(d) { return d + ": " + formatPercent(data[d]); });
−
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
+
});
  
−
groupTick.append("line")
+
function pathMonth(t0) {
−
    .attr("x2", 6);
+
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
 +
      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:13, 24 May 2018

Test section

This is text blabla

Test JavaScript

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