Skip to content

Instantly share code, notes, and snippets.

@joshuarrrr

joshuarrrr/_.md

Last active August 29, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshuarrrr/8ea45000d4d17c0a0fea to your computer and use it in GitHub Desktop.
Save joshuarrrr/8ea45000d4d17c0a0fea to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
_.md
Raw
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}
Raw
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;
});
}
Raw
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}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment