test

_.md

[ Launch: test ] 8ea45000d4d17c0a0fea by joshuarrrr
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[{"name":"tabletop","url":"//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"},{"name":"nvd3","url":"//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true,"inline-console":true}

oil.js

Tabletop.init( { 
      key: '1jJzPwjelCfRPbY49-L7R2gAo_uV0kRWQib9JAh2VnNg',
      callback: renderCharts
    } 
  );

  function renderCharts(sheets) {
    var data = sheets['Sheet1'];
    //console.log(data);
    
    /* create nvd3 chart */
    function myData(data) {
      var series1 = [];
      var series2 = [];
      var series3 = [];
      for(var i = 0; i < data.length; i ++) {
        series1.push({
          x: +data[i]['year'], 
          y: +data[i]['crudeprice']
        });
        series2.push({
          x: +data[i]['year'], 
          y: +data[i]['crudeprice']
        });
        series3.push({
          x: +data[i]['year'], 
          y: +data[i]['crudeprice(inflation adjusted)']
        });
      }

      console.log(series1);
      console.log(series2);
      console.log(series3);

      return [
        {
          key: 'Unadjusted Price',
          values: series1,
          color: '#00f'
        },
        {
          key: 'Adjusted for Inflation',
          values: series2,
          color: '#00f'
        },
        {
          key: 'Adjusted for Inflation and Intensity',
          values: series3,
          color: '#00f'
        }
      ];
    }

    /* global nv */
    nv.addGraph(function() {
      var container = d3.select('svg');
      var chart = nv.models.lineChart()
        .options({
          duration: 1200,
          useInteractiveGuideline: true,
          yDomain: [0,120],
          interpolate: 'monotone'
        })
      ;

      var series = myData(data.elements);

      var annoText = 'Oil in 2014 seems to be <span class="highlight-number">50x</span> more expensive than in 1970&hellip;';

      var adjust = container
        .append('button')
        .attr('id','adjust')
        .attr('class','initial')
        .text('compare prices');

      chart.xAxis
        .axisLabel('Year');

      chart.yAxis
        .axisLabel('US$ per barrel of oil (WTI)')
        .tickFormat(d3.format(',f'))
        .showMaxMin(false);
        // .tickValues(function () {
        //   var ticks = [];
        //   for(var i = 1; i < 120; i++) {
        //     ticks.push(i * 20);
        //   }
        //   return ticks;
        // });

      // chart.interactiveLayer.tooltip
      //   // works as expected
      //   .headerFormatter(function(d) {
      //     var formatter = d3.format(',.2f');
      //     return formatter(d);
      //   })
      //   // doesn't work as expected
      //   .valueFormatter(function(d,i) {
      //     var formatter = d3.format(',.2f');
      //     return formatter(d);
      //   });

      var svg = d3.select('svg')
        .datum([series[0]])
        .call(chart);

      

      // svg.select('g').selectAll('.barrel-2')
      //     .data([series[0]])
      //   .enter().append('rect')
      //     .attr('class', 'barrel-2')
      //     .attr('x', chart.xAxis.scale()(1970))
      //     .attr('width', chart.xAxis.scale()(1971))
      //     .attr('height', function (d) {
      //       console.log(d);
      //       return chart.yAxis.scale()(0) - chart.yAxis.scale()(d.values[0].y);
      //     })
      //     .attr('y', function (d) {
      //       return chart.yAxis.scale()(d.values[0].y);
      //     })
      //     .attr('stroke', 'black')
      //     .attr('stroke-width', 2)
      //     .attr('fill', 'white');
      


      adjust.on('click', function() {
        var button = d3.select(this);
        var i = 0;

        if (button.classed('initial')) {
          drawMultiples(series[0]);

          button
            .attr('class','inflation')
            .text('adjust for inflation');
        }
        else if (button.classed('inflation')) {
          svg
            .datum([series[0],series[1]])
            .transition().duration(chart.duration()).call(chart);

          for(i = 0; i < data.elements.length; i ++) {
            series[1].values[i].y = +data.elements[i]['crude price (inflation adjusted)'];
          }

          series[0].color = '#ddd';

          chart.update();

          annoText = 'But with inflation, oil in 2014 was only <span class="highlight-number">8x</span> more expensive than in 1970&hellip;';

          drawMultiples(series[1]);

          button
            .attr('class','oil-intensity')
            .text('adjust for oil intensity');
        }
        else if (button.classed('oil-intensity')) {
          svg
            .datum(series)
            .transition().duration(chart.duration()).call(chart);


          for(i = 0; i < data.elements.length; i ++) {
            series[2].values[i].y = +data.elements[i]['crude price (inflation and intensity adjusted)'];
          }

          series[1].color = '#bbb';

          chart.update();

          annoText = 'Correct for intensity, and oil in 2014 was only <span class="highlight-number">3x</span> more expensive than in 1970&mdash;still a large increase, but one the global economy could handle.';

          drawMultiples(series[2]);

          button
            .attr('class','reset')
            .text('reset chart');
        }
        else {
          for(i = 0; i < data.elements.length; i ++) {
            series[2].values[i].y = series[1].values[i].y;
            series[1].values[i].y = series[0].values[i].y;
          }

          series[0].color = '#00f';
          series[1].color = '#00f';

          svg.datum([series[0]]).transition().delay(chart.duration()).call(chart);

          annoText = 'Oil in 2014 seems to be <span class="highlight-number">50x</span> more expensive than in 1970&hellip;';

          drawMultiples(series[0]);

          button
            .attr('class','inflation')
            .text('adjust for inflation');
        }
        
        // chart.update();
      });
      
      

      /***** For an HTML tooltip *****/ 
          
      //for the HTML tooltip, we're not interested in a
      //transformation relative to an internal SVG coordinate
      //system, but relative to the page body
      
      //We can't get that matrix directly,
      //but we can get the conversion to the
      //screen coordinates.

      

      nv.utils.windowResize(
        function() {
            chart.update();
          }
      );

      function drawMultiples (criteria) {
        var base = criteria.values[0];
        var comparison = criteria.values[criteria.values.length - 2];
        var multiples = d3.range(comparison.y / base.y);

        console.log(criteria.values[0]);

        var ref = svg.select('g').selectAll('.ref-price')
          .data([base]);

        var comp = svg.select('g').selectAll('.comp')
          .data(multiples);

        ref
            .transition()
          .duration(chart.duration())
            .attr('height', function (d) {
              return chart.yAxis.scale()(0) - chart.yAxis.scale()(d.y);
            })
            .attr('y', chart.yAxis.scale()(criteria.values[0].y));

        
        ref.enter().append('rect')
            .attr('id', 'ref-price')
            .attr('class', 'ref-price barrel')
            .attr('x', chart.xAxis.scale()(1970))
            .attr('width', chart.xAxis.scale()(1971))
            .attr('stroke', 'black')
            .attr('stroke-width', 1)
            .attr('fill-opacity', '0')
            .attr('height', function (d) {
              return chart.yAxis.scale()(0) - chart.yAxis.scale()(d.y);
            })
            .attr('y', chart.yAxis.scale()(criteria.values[0].y));

        console.log(comparison.y / base.y);

        comp
          .attr('stroke-opacity', 0)
          .attr('xlink:href', '#ref-price')
          .attr('y', function (d,i) {
            return chart.yAxis.scale()(0) - chart.yAxis.scale()(base.y * -i);
          })
            .transition()
          .delay(function (d,i) {
              console.log(i / multiples.length * chart.duration());
              return chart.duration() + (i / multiples.length * chart.duration());
            })
            .attr('stroke-opacity', 1)
            .each('start', function() {
              transitions++;
            })
            .each('end', function() {
              if( --transitions === 0 ) {
                updateAnnotation();
              }
            });

        var transitions = 0;

        comp.enter().append('use')
            .attr('class', 'comp barrel')
            .attr('xlink:href', '#ref-price')
            .attr('x', chart.xAxis.scale()(2014))
            .attr('y', function (d,i) {
              return chart.yAxis.scale()(0) - chart.yAxis.scale()(base.y * -i);
            })
            .attr('stroke-opacity', 0)
            .transition()
          .delay(function (d,i) {
              return (i / multiples.length * chart.duration());
            })
            .attr('stroke-opacity', 1)
            .each('start', function() {
              transitions++;
            })
            .each('end', function() {
              if( --transitions === 0 ) {
                updateAnnotation();
              }
            });

        comp.exit()
          .remove();

        // for(var i = 0; i < comparison.y / base.y; i ++) {
        //   svg.select('g').append('use')
        //     .attr('class', 'comp barrel')
        //     .attr('xlink:href', '#ref-price')
        //     .transition()
        //   .delay(chart.duration())
        //     .attr('x', chart.xAxis.scale()(2014))
        //     .attr('y', chart.yAxis.scale()(0) - chart.yAxis.scale()(base.y * (-i)));
        // }

        function updateAnnotation() {
          var anno = d3.select('div.anno-layer');
          console.log(annoText);
          console.log(anno);

          anno
            .html(annoText);

          anno
            .style('opacity', 1);
        }

        // function addSvgAnnotation () {
        //   var annoWidth = 0;

        //   var anno = svg.select('g').append('g')
        //     .attr('class', 'annotation')
        //   .append('text')
        //     .attr('x', chart.xAxis.scale()(1995))
        //     .attr('y', 45)
        //     .attr('width', annoWidth)
        //     .attr('height', annoWidth)
        //     .attr('transform', 'translate('+ chart.xAxis.scale()(1995) +',80)')
        //     .attr('style', 'text-align: center; text-anchor: middle;');

        //   anno.append('tspan')
        //     .attr('x', annoWidth / 2)
        //     .attr('y', '-3.0em')
        //     .attr('class', 'anno-line-pre-2')
        //     .text('Oil in 2014');

        //   anno.append('tspan')
        //     .attr('x', annoWidth / 2)
        //     .attr('y', '-1.8em')
        //     .attr('class', 'anno-line-pre-1')
        //     .text('seems to be');

        //   anno.append('tspan')
        //     .attr('x', annoWidth / 2)
        //     .attr('y', '0')
        //     .attr('class', 'anno-line-number')
        //     .attr('style', 'font-size:2em; line-height: 1em;')
        //     .text('50x');

        //   anno.append('tspan')
        //     .attr('x', annoWidth / 2)
        //     .attr('y', '1.2em')
        //     .attr('class', 'anno-line-post-1')
        //     .text('more expensive');

        //   anno.append('tspan')
        //     .attr('x', annoWidth / 2)
        //     .attr('y', '2.4em')
        //     .attr('class', 'anno-line-post-2')
        //     .text('than in 1970…');
        // }
        
      }

      return chart;
    });
  }

style.css

svg.nvd3-svg{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;display:block}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.nvtooltip{position:absolute;background-color:rgba(255,255,255,1);padding:1px;border:1px solid rgba(0,0,0,.2);z-index:10000;font-family:Arial;font-size:13px;text-align:left;pointer-events:none;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nvtooltip.with-transitions,.with-transitions .nvtooltip{transition:opacity 50ms linear;-moz-transition:opacity 50ms linear;-webkit-transition:opacity 50ms linear;transition-delay:200ms;-moz-transition-delay:200ms;-webkit-transition-delay:200ms}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{margin:0;padding:4px 14px;line-height:18px;font-weight:400;background-color:rgba(247,247,247,.75);text-align:center;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:1px 5px 0 0}.nvtooltip p{margin:0;padding:5px 14px;text-align:center}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.key{font-weight:400}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{width:8px;height:8px;vertical-align:middle}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{position:absolute;pointer-events:none}.nvd3 text{font:400 12px Arial}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .extent{fill-opacity:.125;shape-rendering:crispEdges}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.axis{opacity:1}.axis.nv-disabled{opacity:0}.nvd3 .nv-axis{pointer-events:none}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero{stroke-opacity:.75}.nvd3 .nv-axis .nv-axisMaxMin text{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nv-brush .resize path{fill:#eee;stroke:#666}.nvd3 .nv-bars .negative rect{zfill:brown}.nvd3 .nv-bars rect{zfill:#4682b4;fill-opacity:.75;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-bars rect.hover{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:rgba(0,0,0,0)}.nvd3 .nv-bars .hover text{fill:rgba(0,0,0,1)}.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect,.nvd3 .nv-discretebar .nv-groups rect{stroke-opacity:0;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover{fill-opacity:1}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:rgba(0,0,0,1);stroke:rgba(0,0,0,0)}.nvd3.nv-pie path{stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:rgba(19,196,249,.59)}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3.nv-pie path{stroke:#fff;stroke-width:1px;stroke-opacity:1}.nvd3.nv-pie .hover path{fill-opacity:.7}.nvd3.nv-pie .nv-label{pointer-events:none}.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3 .nv-groups path.nv-line{fill:none;stroke-width:1.5px}.nvd3 .nv-groups path.nv-line.nv-thin-line{stroke-width:1px}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3 .nv-line.hover path{stroke-width:6px}.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{fill-opacity:0;stroke-opacity:0}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.with-transitions .nvd3 .nv-groups .nv-point{transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-scatter .nv-groups .nv-point.hover,.nvd3 .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}.nvd3 .nv-distribution{pointer-events:none}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3 .nv-scatter .nv-point.hover{fill-opacity:1}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3.nv-linePlusBar .nv-bar rect:hover{fill-opacity:1}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-measure:hover{fill-opacity:1}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-sparkline path{fill:none}.nvd3.nv-sparklineplus g.nv-hoverValue{pointer-events:none}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3 .nv-hoverArea{fill-opacity:0;stroke-opacity:0}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel{font-weight:700}.nvd3.nv-historicalStockChart .nv-dragTarget{fill-opacity:0;stroke:none;cursor:move}.nvd3 .nv-brush .extent{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}.nvd3 .background path{fill:none;stroke:#EEE;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .brush .extent{fill-opacity:.3;stroke:#fff;shape-rendering:crispEdges}.nvd3 .axis line,.axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.nvd3 .axis text{text-shadow:0 1px 0 #fff}.nvd3 .nv-interactiveGuideLine{pointer-events:none}.nvd3 line.nv-guideline{stroke:#ccc}
    
    body{background:#fafafa;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333}.hero-unit{margin:50px auto 0;width:300px;font-size:18px;font-weight:200;line-height:30px;background-color:#eee;border-radius:6px;padding:60px}.hero-unit h1{font-size:60px;line-height:1;letter-spacing:-1px}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.tick.zero{display:none}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:.75}.barrel,.barrel-2{shape-rendering:crispEdges}.anno-layer{position:absolute;max-width:140px;text-align:center;opacity:0}.highlight-number{font-size:2em;display:block}