rCharts + dimple | Slopegraph

James Keirstead implemented slopegraphs in R based on the the very thorough post from Charlie Park. I couldn't resist trying to do something similar with rCharts and dimplejs.

First Try | Out of the Box

A slopegraph most closely resembles a line graph. Let's plot the data in a simple line graph using type = 'line' with dimple.

  1. d1 <- dPlot2(  #dPlot2 for minor internal change to iframesrc
  2.   value ~ year,
  3.   groups = "group",
  4.   data = data,
  5.   type = "line",
  6.   height = 800,
  7.   width = 550,
  8.   bounds = list(x=200,y=30,height=700,width=300)
  9. )
  10. d1$show("iframesrc")

With Some Javascript Adjustments

Let's transform this simple line with some javascript. I'll incorporate this nice labelling example to help us avoid overlapping labels on our y axis.

  1. #with improvements from afterScript template
  2. d1$setTemplate(
  3.   afterScript = "
  4. <script>
  5.   //axes adjustments for slopegraph
  7.   //based on template myChart.axes[2] should be y
  8.   //but just to make sure do map
  9.   var ySlope = myChart.axes.filter(function(axis){return axis.position==='y'})[0];
  10.   var xSlope = myChart.axes.filter(function(axis){return axis.position==='x'})[0]
  12.   //remove axis labels if desired
  13.   ySlope.shapes.remove();
  14.   //remove gridlines
  15.   ySlope.gridlineShapes.remove();
  16.   //remove axis title
  17.   ySlope.titleShape.remove();
  19.   var slopelabels = d3.select('#'+opts.id).select('svg').select('g').append('g')
  20.    .attr('class','slopelabels')
  22.   //get unique values for groups in data
  23.   //note will only work with one group level
  24.   var firstPoints = data.filter(function(d){
  25.     return d[opts.x] == myChart.axes[0]._draw.scale().domain()[0];
  26.   });
  28.   slopelabels.selectAll('text')
  29.     .data(firstPoints)
  30.     .enter()
  31.     .append('text')
  32.     .attr('class','labels')
  33.     //.attr('x', function(d){
  34.     //  return xSlope._scale(d[opts.x])
  35.     //})
  36.     .attr('x',d3.select('.axis').select('.tick text').attr('x') - 20)
  37.     .attr('y', function(d){
  38.       return ySlope._scale(d[opts.y])
  39.     })
  40.     .attr('dy','0.2em')
  41.     .attr('transform',d3.select('.axis').select('.tick').attr('transform'))
  42.     .attr('fill',function(d)  {
  43.       return myChart._assignedColors[d[opts.groups]].fill
  44.     })
  45.     //.attr('stroke',function(d){return myChart._assignedColors[d[opts.groups]].stroke})
  46.     .attr('opacity',function(d){return myChart._assignedColors[d[opts.groups]].opacity})
  47.     .style('text-anchor','end')
  48.     .text(function(d){
  49.       return d[opts.groups]
  50.     });
  52.     // constraint relaxation on labels
  53.     // from http://bl.ocks.org/syntagmatic/4053096
  54.     //add y for each of these to use code as is
  55.     firstPoints.forEach(function(d){
  56.       d.y = ySlope._scale(d[opts.y]);
  57.     })
  59.     var alpha = 0.5;
  60.     var spacing = 12;
  61.     function relax() {
  62.       var again = false;
  63.       firstPoints.forEach(function(a,i) {
  64.         firstPoints.slice(i+1).forEach(function(b) {
  65.           var dy = a.y - b.y;
  66.           if (Math.abs(dy) < spacing) {
  67.             again = true;
  68.             var sign = dy > 0 ? 1 : -1;
  69.             a.y += sign*alpha;
  70.             b.y -= sign*alpha;
  71.           }
  72.         });
  73.       });
  74.       d3.selectAll('.labels')
  75.         .attr('y', function(d) {
  76.         return d.y;
  77.       });
  78.       if (again) setTimeout(relax,20);
  79.     };
  81.     relax();  
  84.     //add numbers to each point
  85.     var pointtext = d3.select('#'+opts.id).select('svg').select('g').append('g')
  86.       .attr('class','pointtext')
  87.     pointtext.selectAll('text')
  88.       .data(data)
  89.       .enter()
  90.       .append('g')
  91.       .attr('transform',function(d){
  92.         return d3.select(d3.select('.axis').selectAll('.tick')[0].filter(function(dd){
  93.           return d3.select(dd).datum() == d[opts.x]
  94.         })[0]).attr('transform')
  95.       })
  96.       .append('text')
  97.       .attr('x',function(d){
  98.         return d3.select('.axis').select('.tick text').attr('x')
  99.       })
  100.       .attr('y',function(d){
  101.         return ySlope._scale(d[opts.y])})
  102.       .attr('dy','0.2em')
  103.       //.attr('fill',function(d){return myChart._assignedColors[d[opts.groups]].fill})
  104.       //.attr('stroke',function(d){return myChart._assignedColors[d[opts.groups]].stroke})
  105.       //.attr('opacity',function(d){return myChart._assignedColors[d[opts.groups]].opacity})
  106.       .attr('text-anchor','middle')
  107.       .style('font-size','12')
  108.       .style('pointer-events','none')
  109.       .text(function(d){
  110.         return d[opts.y]
  111.       })
  112. </script>"
  113. )
  114. d1$show("iframesrc")