tc360 reproduced with sanddance

eb7a216e · Elango Bharathi · Elango Dhandapani · 14449d39 · eb7a216e
Commit eb7a216e authored May 09, 2018 by Elango Bharathi Committed by Elango Dhandapani May 09, 2018
--- a/test/tc360.html
+++ b/test/tc360.html
@@ -23,12 +23,24 @@
    .container {
      padding-left: 25px;
    }
-    .xtext, .ytext, .sizetext{
+    .xtext, .ytext, .sizetext, .cpacktext{
      font-size:10.5px;
    }
    .legendtext{
      font-size:12px;
    }
+    div.tooltip {
+      position: absolute;
+      text-align: center;
+      width: 100px;
+      height: 50px;
+      padding: 2px;
+      font: 12px sans-serif;
+      background: lightsteelblue;
+      border: 0px;
+      border-radius: 8px;
+      pointer-events: none;
+    }
  </style>
 </head>
 <body>
@@ -70,6 +82,119 @@
      .style('text-anchor', 'middle')
      .attr('dy', '.71em')

+    var hexpacks_annotations = [
+      {
+        x: 190.5, y: 190.22,
+        dx: -50, dy: 130,
+        curvepath: 'M-40,150 T20,150 T80,150 T125,180',
+        className: 'mfg',
+        connector: { end: 'arrow' },
+        subject: { radius: 67.31 },
+        note: { title: 'Most Favorable Group: 26 Countries', label: '' }
+      },
+      {
+        x: 35.5, y: 285.22,
+        dx: 0, dy: 405,
+        curvepath: 'M180,415 T90,415 T0,415 T-30,380',
+        className: 'sf',
+        connector: { end: 'arrow' },
+        subject: { radius: 112.31 },
+        note: { title: 'Somewhat Favorable: Scope for progress: 64 Countries', label: '', wrap:160 }
+      },
+      {
+        x: 333.5, y: 232.22,
+        dx: 312.6, dy: 365,
+        curvepath: 'M475,350 T405,350 T335,350 T320,320',
+        className: 'lf',
+        connector: { end: 'arrow' },
+        subject: { radius: 74.31},
+        note: { title: 'Least Favorable: Tough Challenges: 33 Countries', label: '' }
+      },
+      {
+        x: 225.5, y: 325.22,
+        dx: 292.5, dy: 415,
+        curvepath: 'M425,430 T345,430 T262.5,430 T240,395',
+        className: 'f',
+        connector: { end: 'arrow' },
+        subject: { radius: 68.31},
+        note: { title: 'Favorable: Strong in Tech & Innovation: 27 Countries', label: '', wrap:150 }
+      }
+    ]
+
+    svg_hexpacks = svg.append('g')
+      .attr('opacity', 0)
+
+    svg_hexpacks.append("svg:defs").append("svg:marker")
+      .attr("id", "triangle")
+      .attr("refX", 6)
+      .attr("refY", 6)
+      .attr("markerUnits", "strokeWidth")
+      .attr("markerWidth", 12)
+      .attr("markerHeight", 12)
+      .attr("orient", "auto")
+      .attr("viewBox", "0 0 12 12")
+      .append("path")
+      .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
+      .style("fill", "black");
+
+    hexpacks_annotations.forEach( function(d,i) {
+      svg_hexpacks.append('circle')
+        .attr('class', 'manual')
+        .attr('cx', function(){
+          return d.x
+        })
+        .attr('cy', function(){
+          return d.y
+        })
+        .attr('r', function(){
+          return d['subject']['radius']
+        })
+        .attr('opacity', 0.5)
+        .style('fill', 'none')
+        .attr('stroke-dasharray', '25,25')
+        .attr('stroke-dashoffset', 100)
+        .transition()
+        .duration(3000)
+        .ease(d3.easeLinear)
+        .attr('stroke','#000')
+        .attr('stroke-width',1)
+        .attr('stroke-dasharray', '2,2')
+        .attr('stroke-dashoffset', 0)
+
+      svg_hexpacks.append('text')
+        .attr('class', 'cpacktext')
+        .text(function() {
+          return d.note.title
+        })
+        .attr('x', function(){
+          return d.dx;
+        })
+        .attr('y', function(){
+          return d.dy;
+        })
+        .call(wrap, 150)
+
+      svg_hexpacks.append("path")
+        .attr("class", "cpack")
+        .attr("id", function(){
+          return d.className
+        })
+        .attr("d", function(){
+         return d.curvepath
+        })
+        .attr("fill","none")
+        .attr("stroke-dasharray", "25,25")
+        .attr("stroke-dashoffset", 100)
+        .transition()
+        .duration(3000)
+        .ease(d3.easeLinear)
+        .attr("stroke","#000")
+        .attr("stroke-width",1)
+        .attr("stroke-dasharray", "2,2")
+        .attr('stroke-dashoffset', 0)
+        .attr("marker-end","url(#triangle)")
+    })
+
    var svg_legend = d3.select('.legend')
      .attr('width', 300)
      .attr('height', height + margin.top + margin.bottom)
@@ -95,13 +220,13 @@
    var y = d3.scaleLinear().range([height, 0]);

    var sanddances = {}
+    var sanddances_hexpack = []
    var selection
    var duration = 1000

    d3.json('tc360-data.json', function(error, data) {
      var default_indicator = 'Availability of latest technologies';      

-      //TODO: Consider using g1.scale
      var region_color_dict = {
        'East Asia & Pacific': '#000000',
        'Europe & Central Asia': '#9564BF',
@@ -112,13 +237,29 @@
        'Sub-Saharan Africa': '#FF7F00'
      }

-      selection = svg.selectAll('circle').data(data).enter()
+      var div = d3.select("body").append("div")
+        .attr("class", "tooltip")
+        .style("opacity", 0);
+
+      selection = svg.append('g').selectAll('circle').data(data).enter()
        .append('circle')
        .attr('fill', function(d) { return region_color_dict[d.Region] })
        .attr('stroke', 'white')
        .attr('cx', 0)
        .attr('cy', 0)
-        .on('mouseover', function(d) { console.log(d.Country, ',', d.Region) })
+        .on("mouseover", function(d) {
+          div.transition()
+            .duration(200)
+            .style("opacity", .9);
+          div.html(d.Country + '<hr style="border-top: 1px;" />' + d.Region)
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
+          })
+        .on("mouseout", function(d) {
+          div.transition()
+            .duration(500)
+            .style("opacity", 0);
+          });

      state(
        {
@@ -129,16 +270,113 @@
          layout: 'spiral',
          data: data,
          duration: duration,
-          spiral_size: 1,
+          spiral_size: 1.25,
          spiral_angle: 15,
          width: 200,
          height: 200
        }
      )

-      state(
+      d3.select('.states').append('a').text('hexpack')
+        .on('click', function() { 
+          d3.select('#title').text('hexpack')
+          
+          if (d3.select('.legendgroup').empty())
+            generate_color_legend(region_color_dict)
+
+          show_hexpack_layout()
+          hide_scatter()
+          sanddances_hexpack.map(function(state) {
+            selection.call(state)  
+          }) 
+        })
+
+      state_hexpack(
+        {
+          name: 'hexpack 1',
+          sel_size: 'Availability of latest technologies'
+        },
+        {},
+        {
+          layout: 'hexpack',
+          data: data,
+          duration: duration,
+          filter: function(d) { return d['cluster'] === 2 },
+          group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
+            d.Region === 'Europe & Central Asia' ? 1 :
+            d.Region === 'Middle East & North Africa' ? 2 :
+            d.Region === 'North America' ? 3 : 4
+          },
+          facets: [
+            { x: 120.5, y: 120, width: 75, height: 75 },
+            { x: 130.5, y: 180, width: 90, height: 90 },
+            { x: 170, y: 130, width: 50, height: 50 },
+            { x: 200, y: 170, width: 50, height: 50 },
+          ],
+        }
+      )
+
+      state_hexpack(
+        {
+          name: 'hexpack 2',
+          sel_size: 'Availability of latest technologies'
+        },
+        {},
+        {
+          layout: 'hexpack',
+          data: data,
+          duration: duration,
+          filter: function(d) { return d['cluster'] === 0 },
+          group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
+            d.Region === 'Europe & Central Asia' ? 1 :
+            d.Region === 'Latin America & Caribbean' ? 2 :
+            d.Region === 'Middle East & North Africa' ? 3 :
+            d.Region === 'South Asia' ? 4 :
+            d.Region === 'Sub-Saharan Africa' ? 5 : 6
+          },
+          facets: [
+            { x: -20, y: 200, width: 40, height: 40 },
+            { x: 30, y: 200, width: 90, height: 90 },
+            { x: -40, y: 240, width: 70, height: 70 },
+            { x: -40, y: 320, width: 40, height: 40 },
+            { x: 0, y: 340, width: 40, height: 40 },
+            { x: 60, y: 300, width: 70, height: 70 }
+          ],
+        }
+      )
+
+      state_hexpack(
+        {
+          name: 'hexpack 3',
+          sel_size: 'Availability of latest technologies'
+        },
+        {},
        {
-          name: 'hexpack',
+          layout: 'hexpack',
+          data: data,
+          duration: duration,
+          filter: function(d) { return d['cluster'] === 3 },
+          group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
+            d.Region === 'Europe & Central Asia' ? 1 :
+            d.Region === 'Latin America & Caribbean' ? 2 :
+            d.Region === 'Middle East & North Africa' ? 3 :
+            d.Region === 'South Asia' ? 4 :
+            d.Region === 'Sub-Saharan Africa' ? 5 : 6
+          },
+          facets: [
+            { x: 170, y: 280, width: 40, height: 40 },
+            { x: 200, y: 250, width: 80, height: 80 },
+            { x: 170, y: 320, width: 50, height: 50 },
+            { x: 230, y: 320, width: 50, height: 50 },
+            { x: 200, y: 370, width: 10, height: 10 },
+            { x: 220, y: 360, width: 40, height: 40 },
+          ],
+        }
+      )
+
+      state_hexpack(
+        {
+          name: 'hexpack 4',
          sel_size: 'Availability of latest technologies'
        },
        {},
@@ -146,23 +384,21 @@
          layout: 'hexpack',
          data: data,
          duration: duration,
-          // filter: function(d) { return d['Business and Innovation Environment'] > 5 },
+          filter: function(d) { return d['cluster'] === 1 },
          group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
            d.Region === 'Europe & Central Asia' ? 1 :
            d.Region === 'Latin America & Caribbean' ? 2 :
            d.Region === 'Middle East & North Africa' ? 3 :
-            d.Region === 'North America' ? 4 :
-            d.Region === 'South Asia' ? 5 :
-            d.Region === 'Sub-Saharan Africa' ? 6 : 7
+            d.Region === 'South Asia' ? 4 :
+            d.Region === 'Sub-Saharan Africa' ? 5 : 6
          },
          facets: [
-            { x: 0, y: 0, width: 100, height: 100 },
-            { x: 110, y: 0, width: 100, height: 100 },
-            { x: 220, y: 0, width: 100, height: 100 },
-            { x: 0, y: 110, width: 100, height: 100 },
-            { x: 110, y: 110, width: 100, height: 100 },
-            { x: 220, y: 110, width: 100, height: 100 },
-            { x: 0, y: 220, width: 100, height: 100 },
+            { x: 290, y: 180, width: 20, height: 20 },
+            { x: 340, y: 170, width: 10, height: 10 },
+            { x: 270, y: 210, width: 40, height: 40 },
+            { x: 350, y: 210, width: 40, height: 40 },
+            { x: 270, y: 250, width: 30, height: 30 },
+            { x: 320, y: 250, width: 60, height: 60 },
          ],
        }
      )
@@ -250,8 +486,11 @@
            .range([2, 10]);

        if (typeof attrs != 'undefined') {
-          options.x = function(d) { return x(d[sel_x]) }
-          options.y = function(d) { return y(d[sel_y]) }
+          if (name !== 'spiral') {
+            options.x = function(d) { return x(d[sel_x]) }
+            options.y = function(d) { return y(d[sel_y]) }
+          }
+          
          attrs.r = name === 'spiral' ? 7 : function(d) { return rScale(d[sel_size]) }
          d3.select('.states').append('a').text(name)
            .on('click', function() { state(params) })
@@ -260,10 +499,11 @@
        }

        d3.select('#title').text(name)
+        hide_hexpack_layout()
        if (d3.select('.legendgroup').empty())
          generate_color_legend(region_color_dict)

-        if (name !== 'spiral' && name !== 'hexpack')
+        if (name !== 'spiral')
          show_scatter(sel_x, sel_y, sel_size)
        else
          hide_scatter()
@@ -271,6 +511,21 @@
        selection.call(sanddances[name])
      }

+      function state_hexpack(params, attrs, options) {
+        var sel_size = params.sel_size,
+          rScale = d3.scaleLinear()
+            .domain([
+              d3.min(data, function(d) { return +d[sel_size]; }),
+              d3.max(data, function(d) { return +d[sel_size]; })
+            ])
+            .range([2, 10]);
+
+        if (typeof attrs != 'undefined') {
+          attrs.r = function(d) { return rScale(d[sel_size]) }
+          sanddances_hexpack.push(g1.sanddance(attrs, options))
+        }
+      }
+
      function show_scatter(sel_x, sel_y, sel_size) {
        x.domain([d3.min(data, function(d) { return +d[sel_x]; }), d3.max(data, function(d) { return +d[sel_x]; })]);
        y.domain([d3.min(data, function(d) { return +d[sel_y]; }), d3.max(data, function(d) { return +d[sel_y]; })]);
@@ -316,25 +571,25 @@
        d3.select('.xaxis')
          .transition()
          .ease(d3.easeLinear)
-          .duration(1000)
+          .duration(duration)
          .attr('opacity', 0)

        d3.select('.yaxis')
          .transition()
          .ease(d3.easeLinear)
-          .duration(1000)
+          .duration(duration)
          .attr('opacity', 0)

        d3.select('.xaxislabel')
          .transition()
          .ease(d3.easeLinear)
-          .duration(1000)
+          .duration(duration)
          .attr('opacity', 0)

        d3.select('.yaxislabel')
          .transition()
          .ease(d3.easeLinear)
-          .duration(1000)
+          .duration(duration)
          .attr('opacity', 0)

        d3.select('.xtext')
@@ -345,7 +600,22 @@

        d3.select('.sizetext')
          .attr('opacity', 0)
+      }
+
+      function show_hexpack_layout() {
+        svg_hexpacks
+          .transition()
+          .ease(d3.easeLinear)
+          .duration(duration)
+          .attr('opacity', 1)
+      }

+      function hide_hexpack_layout() {
+        svg_hexpacks
+          .transition()
+          .ease(d3.easeLinear)
+          .duration(duration)
+          .attr('opacity', 0)
      }

      function generate_color_legend(legend_obj) {
@@ -383,6 +653,48 @@

    })

+    function wrap (text, width) {
+
+      text.each(function() {
+
+        var breakChars = ['/', '&', '-'],
+          text = d3.select(this),
+          textContent = text.text(),
+          spanContent;
+
+        breakChars.forEach(char => {
+          // Add a space after each break char for the function to use to determine line breaks
+          textContent = textContent.replace(char, char + ' ');
+        });
+
+        var words = textContent.split(/\s+/).reverse(),
+          word,
+          line = [],
+          lineNumber = 0,
+          lineHeight = 1.1, // ems
+          x = text.attr('x'),
+          y = text.attr('y'),
+          dy = parseFloat(text.attr('dy') || 0),
+          tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em');
+
+        while (word = words.pop()) {
+          line.push(word);
+          tspan.text(line.join(' '));
+          if (tspan.node().getComputedTextLength() > width) {
+            line.pop();
+            spanContent = line.join(' ');
+            breakChars.forEach(char => {
+              // Remove spaces trailing breakChars that were added above
+              spanContent = spanContent.replace(char + ' ', char);
+            });
+            tspan.text(spanContent);
+            line = [word];
+            tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
+          }
+        }
+      });
+    }
+
  </script>
 </body>
 </html>