[ { "path": "Fonts/fake_receipt.css", "content": "@font-face {\n font-family: 'fake_receiptregular';\n src: url('fake_receipt-webfont.eot');\n src: url('fake_receipt-webfont.eot?#iefix') format('embedded-opentype'),\n url('fake_receipt-webfont.woff2') format('woff2'),\n url('fake_receipt-webfont.woff') format('woff'),\n url('fake_receipt-webfont.ttf') format('truetype'),\n url('fake_receipt-webfont.svg#fake_receiptregular') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n" }, { "path": "Fonts/hcb.css", "content": "\n@font-face {\n font-family: 'hcb';\n src: url('hcb-webfont.eot');\n src: url('hcb-webfont.eot?#iefix') format('embedded-opentype'),\n url('hcb-webfont.woff2') format('woff2'),\n url('hcb-webfont.woff') format('woff'),\n url('hcb-webfont.ttf') format('truetype'),\n url('hcb-webfont.svg#helvetica_condensedbold') format('svg');\n font-weight: normal;\n font-style: normal;\n\n}" }, { "path": "Fonts/hcm.css", "content": "@font-face {\n font-family: 'hcm';\n src: url('hcm-webfont.eot');\n src: url('hcm-webfont.eot?#iefix') format('embedded-opentype'),\n url('hcm-webfont.woff2') format('woff2'),\n url('hcm-webfont.woff') format('woff'),\n url('hcm-webfont.ttf') format('truetype'),\n url('hcm-webfont.svg#helvetica_condensedmedium') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n" }, { "path": "Fonts/sourcesanspro.css", "content": "\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('sourcesanspro-bold-webfont.eot');\n src: url('sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),\n url('sourcesanspro-bold-webfont.woff2') format('woff2'),\n url('sourcesanspro-bold-webfont.woff') format('woff'),\n url('sourcesanspro-bold-webfont.ttf') format('truetype'),\n url('sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');\n font-weight: bold;\n font-style: normal;\n\n}\n\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('sourcesanspro-boldit-webfont.eot');\n src: url('sourcesanspro-boldit-webfont.eot?#iefix') format('embedded-opentype'),\n url('sourcesanspro-boldit-webfont.woff2') format('woff2'),\n url('sourcesanspro-boldit-webfont.woff') format('woff'),\n url('sourcesanspro-boldit-webfont.ttf') format('truetype'),\n url('sourcesanspro-boldit-webfont.svg#source_sans_probold_italic') format('svg');\n font-weight: bold;\n font-style: italic;\n\n}\n\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('sourcesanspro-it-webfont.eot');\n src: url('sourcesanspro-it-webfont.eot?#iefix') format('embedded-opentype'),\n url('sourcesanspro-it-webfont.woff2') format('woff2'),\n url('sourcesanspro-it-webfont.woff') format('woff'),\n url('sourcesanspro-it-webfont.ttf') format('truetype'),\n url('sourcesanspro-it-webfont.svg#source_sans_proitalic') format('svg');\n font-weight: normal;\n font-style: italic;\n\n}\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('sourcesanspro-regular-webfont.eot');\n src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),\n url('sourcesanspro-regular-webfont.woff2') format('woff2'),\n url('sourcesanspro-regular-webfont.woff') format('woff'),\n url('sourcesanspro-regular-webfont.ttf') format('truetype'),\n url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');\n font-weight: normal;\n font-style: normal;\n\n}" }, { "path": "Lib/Tangle.js", "content": "//\n// Tangle.js\n// Tangle 0.1.0\n//\n// Created by Bret Victor on 5/2/10.\n// (c) 2011 Bret Victor. MIT open-source license.\n//\n// ------ model ------\n//\n// var tangle = new Tangle(rootElement, model);\n// tangle.setModel(model);\n//\n// ------ variables ------\n//\n// var value = tangle.getValue(variableName);\n// tangle.setValue(variableName, value);\n// tangle.setValues({ variableName:value, variableName:value });\n//\n// ------ UI components ------\n//\n// Tangle.classes.myClass = {\n// initialize: function (element, options, tangle, variable) { ... },\n// update: function (element, value) { ... }\n// };\n// Tangle.formats.myFormat = function (value) { return \"...\"; };\n//\n\nvar Tangle = this.Tangle = function (rootElement, modelClass) {\n\n var tangle = this;\n tangle.element = rootElement;\n tangle.setModel = setModel;\n tangle.getValue = getValue;\n tangle.setValue = setValue;\n tangle.setValues = setValues;\n\n var _model;\n var _nextSetterID = 0;\n var _setterInfosByVariableName = {}; // { varName: { setterID:7, setter:function (v) { } }, ... }\n var _varargConstructorsByArgCount = [];\n\n\n //----------------------------------------------------------\n //\n // construct\n\n initializeElements();\n setModel(modelClass);\n return tangle;\n\n\n //----------------------------------------------------------\n //\n // elements\n\n function initializeElements() {\n var elements = rootElement.getElementsByTagName(\"*\");\n var interestingElements = [];\n \n // build a list of elements with class or data-var attributes\n \n for (var i = 0, length = elements.length; i < length; i++) {\n var element = elements[i];\n if (element.getAttribute(\"class\") || element.getAttribute(\"data-var\")) {\n interestingElements.push(element);\n }\n }\n\n // initialize interesting elements in this list. (Can't traverse \"elements\"\n // directly, because elements is \"live\", and views that change the node tree\n // will change elements mid-traversal.)\n \n for (var i = 0, length = interestingElements.length; i < length; i++) {\n var element = interestingElements[i];\n \n var varNames = null;\n var varAttribute = element.getAttribute(\"data-var\");\n if (varAttribute) { varNames = varAttribute.split(\" \"); }\n\n var views = null;\n var classAttribute = element.getAttribute(\"class\");\n if (classAttribute) {\n var classNames = classAttribute.split(\" \");\n views = getViewsForElement(element, classNames, varNames);\n }\n \n if (!varNames) { continue; }\n \n var didAddSetter = false;\n if (views) {\n for (var j = 0; j < views.length; j++) {\n if (!views[j].update) { continue; }\n addViewSettersForElement(element, varNames, views[j]);\n didAddSetter = true;\n }\n }\n \n if (!didAddSetter) {\n var formatAttribute = element.getAttribute(\"data-format\");\n var formatter = getFormatterForFormat(formatAttribute, varNames);\n addFormatSettersForElement(element, varNames, formatter);\n }\n }\n }\n \n function getViewsForElement(element, classNames, varNames) { // initialize classes\n var views = null;\n \n for (var i = 0, length = classNames.length; i < length; i++) {\n var clas = Tangle.classes[classNames[i]];\n if (!clas) { continue; }\n \n var options = getOptionsForElement(element);\n var args = [ element, options, tangle ];\n if (varNames) { args = args.concat(varNames); }\n \n var view = constructClass(clas, args);\n \n if (!views) { views = []; }\n views.push(view);\n }\n \n return views;\n }\n \n function getOptionsForElement(element) { // might use dataset someday\n var options = {};\n\n var attributes = element.attributes;\n var regexp = /^data-[\\w\\-]+$/;\n\n for (var i = 0, length = attributes.length; i < length; i++) {\n var attr = attributes[i];\n var attrName = attr.name;\n if (!attrName || !regexp.test(attrName)) { continue; }\n \n options[attrName.substr(5)] = attr.value;\n }\n \n return options; \n }\n \n function constructClass(clas, args) {\n if (typeof clas !== \"function\") { // class is prototype object\n var View = function () { };\n View.prototype = clas;\n var view = new View();\n if (view.initialize) { view.initialize.apply(view,args); }\n return view;\n }\n else { // class is constructor function, which we need to \"new\" with varargs (but no built-in way to do so)\n var ctor = _varargConstructorsByArgCount[args.length];\n if (!ctor) {\n var ctorArgs = [];\n for (var i = 0; i < args.length; i++) { ctorArgs.push(\"args[\" + i + \"]\"); }\n var ctorString = \"(function (clas,args) { return new clas(\" + ctorArgs.join(\",\") + \"); })\";\n ctor = eval(ctorString); // nasty\n _varargConstructorsByArgCount[args.length] = ctor; // but cached\n }\n return ctor(clas,args);\n }\n }\n \n\n //----------------------------------------------------------\n //\n // formatters\n\n function getFormatterForFormat(formatAttribute, varNames) {\n if (!formatAttribute) { formatAttribute = \"default\"; }\n\n var formatter = getFormatterForCustomFormat(formatAttribute, varNames);\n if (!formatter) { formatter = getFormatterForSprintfFormat(formatAttribute, varNames); }\n if (!formatter) { log(\"Tangle: unknown format: \" + formatAttribute); formatter = getFormatterForFormat(null,varNames); }\n\n return formatter;\n }\n \n function getFormatterForCustomFormat(formatAttribute, varNames) {\n var components = formatAttribute.split(\" \");\n var formatName = components[0];\n if (!formatName) { return null; }\n \n var format = Tangle.formats[formatName];\n if (!format) { return null; }\n \n var formatter;\n var params = components.slice(1);\n \n if (varNames.length <= 1 && params.length === 0) { // one variable, no params\n formatter = format;\n }\n else if (varNames.length <= 1) { // one variable with params\n formatter = function (value) {\n var args = [ value ].concat(params);\n return format.apply(null, args);\n };\n }\n else { // multiple variables\n formatter = function () {\n var values = getValuesForVariables(varNames);\n var args = values.concat(params);\n return format.apply(null, args);\n };\n }\n return formatter;\n }\n \n function getFormatterForSprintfFormat(formatAttribute, varNames) {\n if (!sprintf || !formatAttribute.match(/\\%/)) { return null; }\n\n var formatter;\n if (varNames.length <= 1) { // one variable\n formatter = function (value) {\n return sprintf(formatAttribute, value);\n };\n }\n else {\n formatter = function (value) { // multiple variables\n var values = getValuesForVariables(varNames);\n var args = [ formatAttribute ].concat(values);\n return sprintf.apply(null, args);\n };\n }\n return formatter;\n }\n\n \n //----------------------------------------------------------\n //\n // setters\n \n function addViewSettersForElement(element, varNames, view) { // element has a class with an update method\n var setter;\n if (varNames.length <= 1) {\n setter = function (value) { view.update(element, value); };\n }\n else {\n setter = function () {\n var values = getValuesForVariables(varNames);\n var args = [ element ].concat(values);\n view.update.apply(view,args);\n };\n }\n\n addSetterForVariables(setter, varNames);\n }\n\n function addFormatSettersForElement(element, varNames, formatter) { // tangle is injecting a formatted value itself\n var span = null;\n var setter = function (value) {\n if (!span) { \n span = document.createElement(\"span\");\n element.insertBefore(span, element.firstChild);\n }\n span.innerHTML = formatter(value);\n };\n\n addSetterForVariables(setter, varNames);\n }\n \n function addSetterForVariables(setter, varNames) {\n var setterInfo = { setterID:_nextSetterID, setter:setter };\n _nextSetterID++;\n\n for (var i = 0; i < varNames.length; i++) {\n var varName = varNames[i];\n if (!_setterInfosByVariableName[varName]) { _setterInfosByVariableName[varName] = []; }\n _setterInfosByVariableName[varName].push(setterInfo);\n }\n }\n\n function applySettersForVariables(varNames) {\n var appliedSetterIDs = {}; // remember setterIDs that we've applied, so we don't call setters twice\n \n for (var i = 0, ilength = varNames.length; i < ilength; i++) {\n var varName = varNames[i];\n var setterInfos = _setterInfosByVariableName[varName];\n if (!setterInfos) { continue; }\n \n var value = _model[varName];\n \n for (var j = 0, jlength = setterInfos.length; j < jlength; j++) {\n var setterInfo = setterInfos[j];\n if (setterInfo.setterID in appliedSetterIDs) { continue; } // if we've already applied this setter, move on\n appliedSetterIDs[setterInfo.setterID] = true;\n \n setterInfo.setter(value);\n }\n }\n }\n \n\n //----------------------------------------------------------\n //\n // variables\n\n function getValue(varName) {\n var value = _model[varName];\n if (value === undefined) { log(\"Tangle: unknown variable: \" + varName); return 0; }\n return value;\n }\n\n function setValue(varName, value) {\n var obj = {};\n obj[varName] = value;\n setValues(obj);\n }\n\n function setValues(obj) {\n var changedVarNames = [];\n\n for (var varName in obj) {\n var value = obj[varName];\n var oldValue = _model[varName];\n if (oldValue === undefined) { log(\"Tangle: setting unknown variable: \" + varName); continue; }\n if (oldValue === value) { continue; } // don't update if new value is the same\n\n _model[varName] = value;\n changedVarNames.push(varName);\n }\n \n if (changedVarNames.length) {\n applySettersForVariables(changedVarNames);\n updateModel();\n }\n }\n \n function getValuesForVariables(varNames) {\n var values = [];\n for (var i = 0, length = varNames.length; i < length; i++) {\n values.push(getValue(varNames[i]));\n }\n return values;\n }\n\n \n //----------------------------------------------------------\n //\n // model\n\n function setModel(modelClass) {\n var ModelClass = function () { };\n ModelClass.prototype = modelClass;\n _model = new ModelClass;\n\n updateModel(true); // initialize and update\n }\n \n function updateModel(shouldInitialize) {\n var ShadowModel = function () {}; // make a shadow object, so we can see exactly which properties changed\n ShadowModel.prototype = _model;\n var shadowModel = new ShadowModel;\n \n if (shouldInitialize) { shadowModel.initialize(); }\n shadowModel.update();\n \n var changedVarNames = [];\n for (var varName in shadowModel) {\n if (!shadowModel.hasOwnProperty(varName)) { continue; }\n if (_model[varName] === shadowModel[varName]) { continue; }\n \n _model[varName] = shadowModel[varName];\n changedVarNames.push(varName);\n }\n \n applySettersForVariables(changedVarNames);\n }\n\n\n //----------------------------------------------------------\n //\n // debug\n\n function log (msg) {\n if (window.console) { window.console.log(msg); }\n }\n\n}; // end of Tangle\n\n\n//----------------------------------------------------------\n//\n// components\n\nTangle.classes = {};\nTangle.formats = {};\n\nTangle.formats[\"default\"] = function (value) { return \"\" + value; };\n\n" }, { "path": "Lib/Touchable.js", "content": "//\n// Touchable.js\n//\n// Created by Bret Victor on 3/10/11.\n// (c) 2011 Bret Victor. MIT open-source license.\n//\n\nfunction makeTouchable (el, delegate) {\n\n var initialize = function () {\n el.addEventListener(\"mousedown\", mouseDown);\n el.addEventListener(\"touchstart\", touchStart);\n };\n \n\tvar mouseDown = function (e) {\n\t\te.preventDefault();\n document.body.addEventListener(\"mousemove\", mouseMove);\n document.body.addEventListener(\"mouseup\", mouseUp);\n delegate.touchDown(e, e.pageX, e.pageY);\n };\n\n\tvar mouseMove = function (e) {\n\t\te.preventDefault();\n delegate.touchMove(e, e.pageX, e.pageY);\n };\n\n\tvar mouseUp = function (e) {\n\t\te.preventDefault();\n delegate.touchUp(e, e.pageX, e.pageY);\n document.body.removeEventListener(\"mousemove\", mouseMove);\n document.body.removeEventListener(\"mouseup\", mouseUp);\n };\n \n var touchStart = function (e) {\n e.preventDefault();\n document.body.addEventListener(\"touchmove\", touchMove);\n document.body.addEventListener(\"touchend\", touchEnd);\n document.body.addEventListener(\"touchcancel\", touchCancel);\n var pt = getTouchPoint(e);\n delegate.touchDown(e,pt[0],pt[1]);\n\t};\n\n\tvar touchMove = function (e) {\n\t\te.preventDefault();\n var pt = getTouchPoint(e);\n delegate.touchMove(e,pt[0],pt[1]);\n };\n\t\n\tvar touchEnd = function (e) {\n\t\te.preventDefault();\n var pt = getTouchPoint(e);\n delegate.touchUp(e,pt[0],pt[1]);\n document.body.removeEventListener(\"touchmove\", touchMove);\n document.body.removeEventListener(\"touchend\", touchEnd);\n document.body.removeEventListener(\"touchcancel\", touchCancel);\n\t};\n\n\tvar touchCancel = function (e) {\n\t touchEnd(e);\n\t};\n\t\n\tvar getTouchPoint = function (e) {\n\t if (e.pageX !== undefined) { return [e.pageX, e.pageY]; }\n\t if (e.targetTouches && e.targetTouches[0]) { return [e.targetTouches[0].pageX, e.targetTouches[0].pageY]; }\n\t return [0,0];\n\t};\n\t\n\tinitialize();\n}\n" }, { "path": "Lib/sprintf.js", "content": "/**\r\nsprintf() for JavaScript 0.7-beta1\r\nhttp://www.diveintojavascript.com/projects/javascript-sprintf\r\n\r\nCopyright (c) Alexandru Marasteanu \r\nAll rights reserved.\r\n\r\nRedistribution and use in source and binary forms, with or without\r\nmodification, are permitted provided that the following conditions are met:\r\n * Redistributions of source code must retain the above copyright\r\n notice, this list of conditions and the following disclaimer.\r\n * Redistributions in binary form must reproduce the above copyright\r\n notice, this list of conditions and the following disclaimer in the\r\n documentation and/or other materials provided with the distribution.\r\n * Neither the name of sprintf() for JavaScript nor the\r\n names of its contributors may be used to endorse or promote products\r\n derived from this software without specific prior written permission.\r\n\r\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\r\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\r\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\r\nDISCLAIMED. IN NO EVENT SHALL Alexandru Marasteanu BE LIABLE FOR ANY\r\nDIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\r\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\r\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND\r\nON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\r\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\r\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r\n\r\n\r\nChangelog:\r\n2010.09.06 - 0.7-beta1\r\n - features: vsprintf, support for named placeholders\r\n - enhancements: format cache, reduced global namespace pollution\r\n\r\n2010.05.22 - 0.6:\r\n - reverted to 0.4 and fixed the bug regarding the sign of the number 0\r\n Note:\r\n Thanks to Raphael Pigulla (http://www.n3rd.org/)\r\n who warned me about a bug in 0.5, I discovered that the last update was\r\n a regress. I appologize for that.\r\n\r\n2010.05.09 - 0.5:\r\n - bug fix: 0 is now preceeded with a + sign\r\n - bug fix: the sign was not at the right position on padded results (Kamal Abdali)\r\n - switched from GPL to BSD license\r\n\r\n2007.10.21 - 0.4:\r\n - unit test and patch (David Baird)\r\n\r\n2007.09.17 - 0.3:\r\n - bug fix: no longer throws exception on empty paramenters (Hans Pufal)\r\n\r\n2007.09.11 - 0.2:\r\n - feature: added argument swapping\r\n\r\n2007.04.03 - 0.1:\r\n - initial release\r\n**/\r\n\r\nvar sprintf = (function() {\r\n\tfunction get_type(variable) {\r\n\t\treturn Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();\r\n\t}\r\n\tfunction str_repeat(input, multiplier) {\r\n\t\tfor (var output = []; multiplier > 0; output[--multiplier] = input) {/* do nothing */}\r\n\t\treturn output.join('');\r\n\t}\r\n\r\n\tvar str_format = function() {\r\n\t\tif (!str_format.cache.hasOwnProperty(arguments[0])) {\r\n\t\t\tstr_format.cache[arguments[0]] = str_format.parse(arguments[0]);\r\n\t\t}\r\n\t\treturn str_format.format.call(null, str_format.cache[arguments[0]], arguments);\r\n\t};\r\n\r\n\tstr_format.format = function(parse_tree, argv) {\r\n\t\tvar cursor = 1, tree_length = parse_tree.length, node_type = '', arg, output = [], i, k, match, pad, pad_character, pad_length;\r\n\t\tfor (i = 0; i < tree_length; i++) {\r\n\t\t\tnode_type = get_type(parse_tree[i]);\r\n\t\t\tif (node_type === 'string') {\r\n\t\t\t\toutput.push(parse_tree[i]);\r\n\t\t\t}\r\n\t\t\telse if (node_type === 'array') {\r\n\t\t\t\tmatch = parse_tree[i]; // convenience purposes only\r\n\t\t\t\tif (match[2]) { // keyword argument\r\n\t\t\t\t\targ = argv[cursor];\r\n\t\t\t\t\tfor (k = 0; k < match[2].length; k++) {\r\n\t\t\t\t\t\tif (!arg.hasOwnProperty(match[2][k])) {\r\n\t\t\t\t\t\t\tthrow(sprintf('[sprintf] property \"%s\" does not exist', match[2][k]));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\targ = arg[match[2][k]];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\telse if (match[1]) { // positional argument (explicit)\r\n\t\t\t\t\targ = argv[match[1]];\r\n\t\t\t\t}\r\n\t\t\t\telse { // positional argument (implicit)\r\n\t\t\t\t\targ = argv[cursor++];\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (/[^s]/.test(match[8]) && (get_type(arg) != 'number')) {\r\n\t\t\t\t\tthrow(sprintf('[sprintf] expecting number but found %s', get_type(arg)));\r\n\t\t\t\t}\r\n\t\t\t\tswitch (match[8]) {\r\n\t\t\t\t\tcase 'b': arg = arg.toString(2); break;\r\n\t\t\t\t\tcase 'c': arg = String.fromCharCode(arg); break;\r\n\t\t\t\t\tcase 'd': arg = parseInt(arg, 10); break;\r\n\t\t\t\t\tcase 'e': arg = match[7] ? arg.toExponential(match[7]) : arg.toExponential(); break;\r\n\t\t\t\t\tcase 'f': arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg); break;\r\n\t\t\t\t\tcase 'o': arg = arg.toString(8); break;\r\n\t\t\t\t\tcase 's': arg = ((arg = String(arg)) && match[7] ? arg.substring(0, match[7]) : arg); break;\r\n\t\t\t\t\tcase 'u': arg = Math.abs(arg); break;\r\n\t\t\t\t\tcase 'x': arg = arg.toString(16); break;\r\n\t\t\t\t\tcase 'X': arg = arg.toString(16).toUpperCase(); break;\r\n\t\t\t\t}\r\n\t\t\t\targ = (/[def]/.test(match[8]) && match[3] && arg >= 0 ? '+'+ arg : arg);\r\n\t\t\t\tpad_character = match[4] ? match[4] == '0' ? '0' : match[4].charAt(1) : ' ';\r\n\t\t\t\tpad_length = match[6] - String(arg).length;\r\n\t\t\t\tpad = match[6] ? str_repeat(pad_character, pad_length) : '';\r\n\t\t\t\toutput.push(match[5] ? arg + pad : pad + arg);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn output.join('');\r\n\t};\r\n\r\n\tstr_format.cache = {};\r\n\r\n\tstr_format.parse = function(fmt) {\r\n\t\tvar _fmt = fmt, match = [], parse_tree = [], arg_names = 0;\r\n\t\twhile (_fmt) {\r\n\t\t\tif ((match = /^[^\\x25]+/.exec(_fmt)) !== null) {\r\n\t\t\t\tparse_tree.push(match[0]);\r\n\t\t\t}\r\n\t\t\telse if ((match = /^\\x25{2}/.exec(_fmt)) !== null) {\r\n\t\t\t\tparse_tree.push('%');\r\n\t\t\t}\r\n\t\t\telse if ((match = /^\\x25(?:([1-9]\\d*)\\$|\\(([^\\)]+)\\))?(\\+)?(0|'[^$])?(-)?(\\d+)?(?:\\.(\\d+))?([b-fosuxX])/.exec(_fmt)) !== null) {\r\n\t\t\t\tif (match[2]) {\r\n\t\t\t\t\targ_names |= 1;\r\n\t\t\t\t\tvar field_list = [], replacement_field = match[2], field_match = [];\r\n\t\t\t\t\tif ((field_match = /^([a-z_][a-z_\\d]*)/i.exec(replacement_field)) !== null) {\r\n\t\t\t\t\t\tfield_list.push(field_match[1]);\r\n\t\t\t\t\t\twhile ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {\r\n\t\t\t\t\t\t\tif ((field_match = /^\\.([a-z_][a-z_\\d]*)/i.exec(replacement_field)) !== null) {\r\n\t\t\t\t\t\t\t\tfield_list.push(field_match[1]);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse if ((field_match = /^\\[(\\d+)\\]/.exec(replacement_field)) !== null) {\r\n\t\t\t\t\t\t\t\tfield_list.push(field_match[1]);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tthrow('[sprintf] huh?');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthrow('[sprintf] huh?');\r\n\t\t\t\t\t}\r\n\t\t\t\t\tmatch[2] = field_list;\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\targ_names |= 2;\r\n\t\t\t\t}\r\n\t\t\t\tif (arg_names === 3) {\r\n\t\t\t\t\tthrow('[sprintf] mixing positional and named placeholders is not (yet) supported');\r\n\t\t\t\t}\r\n\t\t\t\tparse_tree.push(match);\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthrow('[sprintf] huh?');\r\n\t\t\t}\r\n\t\t\t_fmt = _fmt.substring(match[0].length);\r\n\t\t}\r\n\t\treturn parse_tree;\r\n\t};\r\n\r\n\treturn str_format;\r\n})();\r\n\r\nvar vsprintf = function(fmt, argv) {\r\n\targv.unshift(fmt);\r\n\treturn sprintf.apply(null, argv);\r\n};\r\n" }, { "path": "Notes/01-private.txt", "content": "Cleantech funding numbers are from the PriceWaterhouseCoopers Money Tree reports.\n\n2009-2011: see figure 6 in http://worrydream.com/ClimateChange/refs/moneytree-tech-summary-Q4-2011.pdf\n2012-2013: see figure 5 in http://worrydream.com/ClimateChange/refs/pwc-moneytree-cleantech-venture-funding-q4-2013.pdf\n2014: see figure 5 in http://worrydream.com/ClimateChange/refs/Cleantech_2015-1.pdf\n" }, { "path": "Notes/02-solar-land.txt", "content": "land in us\n 2,300,000 square miles of land\n http://www.ers.usda.gov/amber-waves/2012-march/data-feature-how-is-land-used.aspx#.Vh7T37SXL5c\n\nland devoted to agriculture\n 1,173,000 square miles of farm (51%)\n http://www.ers.usda.gov/amber-waves/2012-march/data-feature-how-is-land-used.aspx#.Vh7T37SXL5c\n\nland devoted to roads\n 17,929 square miles of road (0.6%)\n http://www.artba.org/about/transportation-faqs/#11\n\nland required for PVs to power all US energy\n 38,900 trillion btu/year = 11,400,464 GWh/year\n https://flowcharts.llnl.gov/content/assets/images/energy/us/Energy_US_2014.png\n at 3.0 acres/GWh/year\n http://www.nrel.gov/docs/fy13osti/56290.pdf table 4\n = 34.2 million acres\n = 53,400 square miles (1.8%)\n\nland required for PVs to power all US electricity\n 3,700,000 GWh/year\n http://www.eia.gov/electricity/annual/html/epa_01_02.html\n at 3.0 acres/GWh/year\n http://www.nrel.gov/docs/fy13osti/56290.pdf table 4\n = 11.1 million acres = 17,300 square miles (0.58%)\n \n" }, { "path": "Notes/03-all-the-batteries.txt", "content": "Bill Gates: Innovating to zero, 12:00\nhttps://www.ted.com/talks/bill_gates\n\"All the batteries on Earth can store only 10 minutes of the world's electricity needs.\"\n\nDanielle Fong, private correspondence:\n\"There's about 100 GWh of batteries produced every year. These batteries last about 3-5 years, but let's be generous and suppose they last for 10 years -- leaving 1000 GWh of batteries available for storage. The world uses about 10 TW on average, or 240,000 GWh per day, or 240x the total amount of battery storage used per day. That's actually about 6 minutes of storage -- so maybe Bill has been even more generous than I.\"\n\n(Her references are in here: http://worrydream.com/ClimateChange/refs/DanielleFong-GrowthRateRequiredInEnergyStorage.pdf)\n\n" }, { "path": "Notes/03-carbon-budget.txt", "content": "carbon emissions 1950-2013:\n http://www.globalcarbonproject.org/carbonbudget/14/data.htm\n Global_Carbon_Budget_2014_v1.1.xlsx\n C. Le Quere, et al, Global Carbon Budget 2014. Earth System Science Data, doi:10.5194/essd-7-47-2015\n \ncarbon emissions 2014-2050:\n interpolated from \"IEA 4DS\" scenario\n http://www.iea.org/etp/explore/\n \ncarbon budget 2000-2050:\n http://www.carbontracker.org/wp-content/uploads/2014/09/Unburnable-Carbon-Full-rev2-1.pdf\n Carbon Tracker Initiative, Unburnable Carbon\n (citing http://www.nature.com/nature/journal/v458/n7242/full/nature08017.html)\n \"The Potsdam Climate Institute has calculated a global carbon budget for the world to stay below 2C of warming. This uses probabilistic climate change modelling to calculate the total volume of carbon dioxide (CO2) emissions permitted in the first half of the 21st century to achieve the target. This revealed that to reduce the chance of exceeding 2 C warming to 20%, the global carbon budget for 2000-2050 is 886 GtCO2.\"\n \ncarbon budget 2015-2050:\n From the 886 GtCO2 budget for 2000-2050, I subtracted out the 440 GtCO2 already spent 2000-2014, leaving 446 GtCO2 remaining for 2015-2050.\n\n" }, { "path": "Notes/03-demand-curve.html", "content": "\n\n \n \n \n\n\n\n\n

These are screenshots from the California ISO's Today's Outlook page, taken at the end of Oct 22, 2015.

\n\n

As far as I can tell, the ISO website doesn't offer historical data.

\n\n
\n\n

\n

\n

\n \n\n" }, { "path": "Notes/06-clunker.txt", "content": "You can download the raw data, cleaned data, and add-up-the-distribution script at\n\n http://worrydream.com/ClimateChange/Notes/06-clunker.zip\n \n\nMPG data for all cars of a given model year is at \n \n https://www.fueleconomy.gov/feg/download.shtml\n \nI used the \"combined MPG\" column, which I believe assumes 55% city-miles and 45% highway-miles, harmonic average.\n\n\nFor \"MPG distribution for cars currently on the road (in 2008)\", I added up the data from the years 1984-2004. Most cars earlier than 1984 won't be on the road, and cars later than 2004 are unlikely to be sold so soon. Cars from 2001 and 2002 were excluded because the data was in an old Excel file format which I couldn't open.\n\nThe data was sales-weighted by *year*. Total car sales by year is at \n\n http://www.statista.com/statistics/199974/us-car-sales-since-1951/\n\nThe data was *not* sales-weighted by *model*, because I couldn't figure out how to find and join that data. So we're assuming that there are just as many Aston Martins as Honda Civics. Hopefully it will come out in the wash.\n\n\nFor \"MPG distribution for new cars on sale (in 2008)\", I used the data just from year 2008. Again, not sales-weighted by model, just one tick per available model.\n\n\n" }, { "path": "README.md", "content": "What can a technologist do about climate change? A personal view.\nhttp://worrydream.com/ClimateChange/\n" }, { "path": "Script/autocomplete-video.js", "content": "//\n// autocomplete-video.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\n\n(function(){\n\nvar setupAutocompleteVideo = this.setupAutocompleteVideo = function () {\n var div = document.querySelector(\".autocomplete-video\");\n var video = div.querySelector(\"video\");\n prepareVideo(video, div);\n}\n\n\nfunction prepareVideo (video, div) {\n var ua = navigator.userAgent.toLowerCase();\n var noPlayButton = ua.match(/iphone/) || ua.match(/ipod/);\n\n var width = parseInt(video.getAttribute(\"width\"));\n var height = parseInt(video.getAttribute(\"height\"));\n \n var chrome = div.querySelector(\".videoChrome\");\n\n var videoOverlay = chrome.querySelector(\".videoOverlay\");\n var videoPlayButton = chrome.querySelector(\".videoPlayButton\");\n var videoDarken = chrome.querySelector(\".videoDarken\");\n var marker = chrome.querySelector(\".marker\");\n var markerProgressCanvas = chrome.querySelector(\".markerProgressCanvas\");\n var markerProgressOverlay = chrome.querySelector(\".markerProgressOverlay\");\n var markerPlayAgain = chrome.querySelector(\".markerPlayAgain\");\n \n var insetTop = parseInt(div.getAttribute(\"data-top\") || \"0\");\n var insetBottom = parseInt(div.getAttribute(\"data-bottom\") || \"0\");\n var insetRight = parseInt(div.getAttribute(\"data-right\") || \"0\");\n var insetRightPost = parseInt(div.getAttribute(\"data-postright\") || insetRight.toString());\n var insetLeft = parseInt(div.getAttribute(\"data-left\") || \"0\");\n var pushLeft = parseInt(div.getAttribute(\"data-push-left\") || \"0\");\n var verboseButton = parseInt(div.getAttribute(\"data-verbose-button\") || \"0\");\n var noMarker = parseInt(div.getAttribute(\"data-no-marker\") || \"0\");\n\n height -= insetTop + insetBottom;\n width -= insetLeft + insetRight + pushLeft;\n\n chrome.style.display = \"block\";\n\n if (verboseButton) { addClass(videoPlayButton, \"verbose\"); } \n else { removeClass(videoPlayButton, \"verbose\"); }\n \n if (noPlayButton) { videoPlayButton.style.display = \"none\"; }\n if (noMarker) { marker.setStyle.display = \"none\"; }\n\n\n // sizes\n \n var updateSizes = function () {\n div.style.left = -pushLeft + \"px\";\n chrome.style.width = width + \"px\";\n chrome.style.height = height + \"px\";\n chrome.style.top = insetTop + \"px\";\n chrome.style.left = pushLeft + \"px\";\n videoOverlay.style.width = (width - 2) + \"px\";\n videoOverlay.style.height = (height - 2) + \"px\";\n videoOverlay.style.left = insetLeft + \"px\";\n \n videoDarken.style.left = insetLeft + \"px\";\n videoPlayButton.style.left = Math.round(0.5 * (width - 78)) + \"px\";\n videoPlayButton.style.top = Math.round(0.5 * (height - (verboseButton ? 88 : 78))) + \"px\";\n };\n\n updateSizes();\n \n\n // playing\n\n var isPlaying = false;\n var didPlay = false;\n \n var playVideo = function () {\n isPlaying = true;\n didPlay = true;\n\n videoOverlay.style.display = \"none\";\n videoDarken.style.backgroundColor = \"transparent\";\n videoDarken.style.cursor = \"none\";\n\n markerProgressCanvas.style.display = \"block\";\n markerProgressOverlay.style.display = \"block\";\n markerPlayAgain.style.display = \"none\";\n \n width += insetRight - insetRightPost;\n insetRight = insetRightPost;\n updateSizes();\n \n updateCurrentTime();\n video.play();\n };\n \n var videoWasClicked = function () {\n if (isPlaying && !video.paused) {\n video.setAttribute(\"controls\", \"controls\");\n videoDarken.style.display = \"none\";\n video.pause();\n }\n else {\n video.removeAttribute(\"controls\");\n videoDarken.style.display = \"block\";\n playVideo();\n }\n };\n \n var updateCurrentTime = function () {\n var duration = video.duration;\n if (isNaN(duration) || duration <= 0) { return; }\n var currentTime = video.currentTime;\n if (isNaN(currentTime)) { currentTarget = 0; }\n \n updateCanvasWithProgress(markerProgressCanvas, currentTime / duration);\n };\n\n\n // video events\n\n video.addEventListener(\"timeupdate\", function () {\n updateCurrentTime();\n }, false);\n \n video.addEventListener(\"ended\", function () {\n isPlaying = false;\n \n videoDarken.style.cursor = \"pointer\";\n markerProgressCanvas.style.display = \"none\";\n markerProgressOverlay.style.display = \"none\";\n markerPlayAgain.style.display = \"block\";\n\n }, false);\n \n\n // marker mousing\n\n marker.addEventListener(\"click\", function () {\n videoWasClicked();\n });\n\n\n // video mousing\n // (events added to videoDarken because iPad can't deal with click event on video element itself)\n \n videoDarken.addEventListener(\"click\", function () {\n videoWasClicked();\n });\n\n videoDarken.addEventListener(\"mouseenter\", function () {\n if (isPlaying) { return; }\n\n if (didPlay) {\n videoOverlay.style.display = \"block\";\n }\n else {\n videoDarken.style.backgroundColor = \"rgba(0,0,0,0.1)\";\n }\n });\n \n videoDarken.addEventListener(\"mouseleave\", function () {\n if (isPlaying) { return; }\n\n if (didPlay) {\n videoOverlay.style.display = \"none\";\n }\n videoDarken.style.backgroundColor = \"transparent\";\n });\n}\n\n\nfunction updateCanvasWithProgress (canvas, progress) {\n var width = parseInt(canvas.getAttribute(\"width\"));\n var height = parseInt(canvas.getAttribute(\"height\"));\n var ctx = canvas.getContext(\"2d\");\n \n ctx.clearRect(0,0,width,height);\n ctx.save();\n ctx.translate(width/2, height/2);\n \n var radius = width/2 - 1;\n\n ctx.beginPath();\n ctx.arc(0,0, radius, -Math.PI * 0.5, -Math.PI * 0.5 + progress * Math.PI * 2);\n ctx.lineTo(0,0);\n ctx.lineTo(0, radius);\n ctx.fillStyle = \"rgba(0,0,0,0.2)\";\n ctx.fill();\n \n ctx.restore();\n}\n\n\n//====================================================================================\n\n})();\n\n" }, { "path": "Script/carbon-budget.js", "content": "//\n// carbon-budget.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\n(function () {\n\nvar carbonBudgetTangle;\n\nvar x0 = 286, y0 = 176.5;\nvar x1 = 432, y1 = 18.5;\nvar A = (327.8 - x0) * (y0 - (18.5 + 13.3)/2);\n\nvar h1 = y0 - y1;\n\nvar setupCarbonBudget = this.setupCarbonBudget = function () {\n var root = document.getElementById(\"carbon-budget-figure\");\n carbonBudgetTangle = new Tangle(root, {\n initialize: function () {\n this.knobPoint = [ x1, 0 ];\n },\n update: function () {\n var budgetArea = document.getElementById(\"carbon-budget-future-budget\");\n var overdrawnArea = document.getElementById(\"carbon-budget-future-overdrawn\");\n if (!budgetArea || !overdrawnArea) { return; }\n \n var p = getInterceptionPoint(this.knobPoint);\n \n var budgetPath = sprintf(\"M286,18.5L%.1f,%.1fV176.5H286Z\", p[0], p[1]);\n var overdrawnPath = sprintf(\"M%.1f,%.1fL%.1f,%.1fV176.5H%.1fZ\", p[0], p[1], this.knobPoint[0], this.knobPoint[1], p[0]);\n \n budgetArea.setAttribute(\"d\", budgetPath);\n overdrawnArea.setAttribute(\"d\", overdrawnPath);\n }\n });\n}\n\nfunction getInterceptionPoint (knobPoint) {\n var h2 = y0 - knobPoint[1];\n var w = knobPoint[0] - x0;\n \n // If I could put a diagram here, I could explain how this works.\n // But this is a \"text file\". So no explanation for you.\n\n var w1 = (h1 - Math.sqrt(h1*h1 - 2*A*(h1-h2) / w)) / ((h1-h2)/w);\n if (Math.abs(h1-h2) < 1e-5) { w1 = A/h1; }\n var hh = h1 - (w1/w)*(h1-h2);\n \n if (isNaN(w1)) { return [ knobPoint[0], knobPoint[1] ]; }\n\n return [ x0 + w1, y0 - hh ];\n}\n\n\nTangle.classes[\"carbon-budget-knob\"] = {\n\n initialize: function (element, options, tangle, variable) {\n this.element = element;\n this.tangle = tangle;\n this.variable = variable;\n \n this.helpElement = this.element.parentNode.querySelector(\".carbon-budget-knob-help\");\n \n this.initializeHover();\n this.initializeDrag();\n },\n\n update: function (element, value) {\n element.style.left = value[0] + \"px\";\n element.style.top = value[1] + \"px\";\n },\n \n // hover\n \n initializeHover: function () {\n this.isHovering = false;\n this.element.addEventListener(\"mouseenter\", (function () { this.setHovering(true) }).bind(this));\n this.element.addEventListener(\"mouseleave\", (function () { this.setHovering(false) }).bind(this));\n },\n \n setHovering: function (hovering) {\n this.isHovering = hovering;\n this.updateRolloverEffects();\n },\n \n updateRolloverEffects: function () {\n this.updateStyle();\n this.updateCursor();\n },\n \n isActive: function () {\n return this.isDragging || this.isHovering;\n },\n\n updateStyle: function () {\n var figure = ancestorWithClass(this.element, \"figure\");\n if (this.isDragging) { \n addClass(this.element, \"dragging\");\n if (figure) { addClass(figure, \"hold-cite\"); }\n }\n else {\n removeClass(this.element, \"dragging\");\n if (figure) { removeClass(figure, \"hold-cite\"); }\n }\n },\n\n updateCursor: function () {\n var body = document.body;\n if (this.isActive()) { addClass(body,\"TKCursorDrag\"); }\n else { removeClass(body,\"TKCursorDrag\"); }\n },\n\n\n // drag\n \n initializeDrag: function () {\n this.isDragging = false;\n makeTouchable(this.element, this);\n },\n \n touchDown: function (e,x,y) {\n isAnyAdjustableNumberDragging = true;\n this.isDragging = true;\n this.valueAtMouseDown = this.tangle.getValue(this.variable);\n this.pointAtMouseDown = [x,y];\n\n this.updateRolloverEffects(true);\n this.updateStyle();\n\n if (this.helpElement) { \n this.helpElement.style.display = \"none\"; \n this.helpElement = undefined;\n }\n },\n \n touchMove: function (e,x,y) {\n var delta = [ x - this.pointAtMouseDown[0], y - this.pointAtMouseDown[1] ];\n var unclippedValue = [ this.valueAtMouseDown[0] + delta[0], this.valueAtMouseDown[1] + delta[1] ];\n \n var isRightEdge = Math.abs(unclippedValue[0] - x1) < Math.abs(unclippedValue[1] - y0);\n var value = isRightEdge ? [ x1, clip(unclippedValue[1], 0, y0) ] : [ clip(unclippedValue[0], x0 + 20, x1), y0 ];\n \n this.tangle.setValue(this.variable, value);\n },\n \n touchUp: function (e) {\n this.isDragging = false;\n\n this.updateRolloverEffects();\n this.updateStyle();\n }\n};\n\nfunction clip (x,min,max) { return x < min ? min : x > max ? max : x; }\n\n})();\n" }, { "path": "Script/chart-data.js", "content": "var chart_data = {};\n\nchart_data[\"01-private-late\"] = {\n title:\"late-stage venture capital funding in cleantech\",\n href:\"Notes/01-private.txt\",\n source:\"PricewaterhouseCoopers Cleantech MoneyTree Report\",\n format: function (x) { return sprintf(\"$%.1f B\", x/1000); },\n labelWidth: 66,\n topValue:3806.5 - 890.0,\n bars: [\n [\"2009\", 2481.8 - 619.2 ],\n [\"2010\", 3806.5 - 890.0 ],\n [\"2011\", 4278.2 - 1386.6 ],\n [\"2012\", 2754.3 - 574.8 ],\n [\"2013\", 1379.9 - 252.9 ],\n [\"2014\", 1980.1 - 142.3 ],\n ],\n};\n\nchart_data[\"01-private-early\"] = {\n title:\"early-stage venture capital funding in cleantech\",\n href:\"Notes/01-private.txt\",\n source:\"PricewaterhouseCoopers Cleantech MoneyTree Report\",\n format: function (x) { return sprintf(\"$%.1f B\", x/1000); },\n labelWidth: 66,\n topValue:3806.5 - 890.0,\n bars: [\n [\"2009\", 619.2 ],\n [\"2010\", 890.0 ],\n [\"2011\", 1386.6, { \"annotation\":\"(peak)\" } ],\n [\"2012\", 574.8, { \"annotation\":\"(crash)\" } ],\n [\"2013\", 252.9 ],\n [\"2014\", 142.3, { \"annotation\":\"(all but disappeared)\" } ],\n ],\n};\n\nchart_data[\"02-pollutants\"] = {\n title:\"contribution to global warming from things dumped into the sky\",\n href:\"Notes/02-pollutants.jpg\",\n source:\"Al Gore. Our Choice, p 47\",\n format: \"%d%%\",\n topValue: 87,\n labelWidth: 124,\n bars: [\n [ \"carbon dioxide (CO2)\", 43 ],\n [ \"methane (CH4)\", 27 ],\n [ \"black carbon (soot)\", 12 ],\n [ \"halocarbons\", 8 ],\n [ \"CO and VOCs\", 7 ],\n [ \"nitrous oxide (N2O)\", 4 ],\n ],\n};\n\nchart_data[\"02-sources\"] = {\n title:\"human sources of carbon dioxide\",\n href:\"http://whatsyourimpact.org/greenhouse-gases/carbon-dioxide-sources\",\n format: \"%d%%\",\n topValue: 87,\n labelWidth: 124,\n bars: [\n [ \"burning fossil fuels\", 87 ],\n [ \"land use changes\", 9, { \"annotation\":\"(primarily deforestation, primarily for agriculture)\" } ],\n [ \"industrial processes\", 4 ],\n ],\n};\n\nchart_data[\"02-solar-land\"] = {\n title:\"percent of land in continental U.S.\",\n href:\"Notes/02-solar-land.txt\",\n format: function (x) { return sprintf(\"%.1f%%\", (x / 2300000) * 100); },\n labelWidth: 240,\n bars: [\n [ \"land devoted to agriculture\", 1173000 ],\n [ \"land required for solar to provide all U.S. energy\", 53400, ],\n [ \"land required for solar to provide U.S. electricity\", 17300, \n { \"annotation\":\"(excluding cars, heating, etc.)\" } ],\n [ \"land devoted to roads\", 17929 ],\n ],\n};\n\nchart_data[\"02-solarcost\"] = {\n title:\"breakdown of solar cost per watt, 2014-2017 (projected)\",\n href:\"http://www.qualenergia.it/sites/default/files/articolo-doc/Solar%202015%20Outlook(1).pdf\",\n comment:\"figure 26: cost reduction example\",\n format: function (x) { return sprintf(\"$%.2f\", x / 100); },\n topValue: 290,\n labelWidth: 58,\n lineHeight: 14,\n labels: [ \"panel\", \"inverter\", \"rack\", \"BoS\", \"installation\", \"sales\", \"other\" ],\n chart:\"stacked\",\n bars: [\n [ \"2014\", [ 75, 25, 25, 30, 65, 50, 20 ] ],\n [ \"2015\", [ 70, 23, 23, 25, 60, 47, 18 ] ],\n [ \"2016\", [ 65, 20, 19, 20, 45, 30, 16 ] ],\n [ \"2017\", [ 50, 17, 16, 17, 45, 20, 12 ] ],\n ]\n};\n\n\nvar transportationPixelsPerValue = 0.017;\n\nchart_data[\"04-sectors\"] = {\n title:\"U.S. energy consumption, 2014\",\n page:\"https://flowcharts.llnl.gov\",\n href:\"https://flowcharts.llnl.gov/content/assets/images/energy/us/Energy_US_2014.png\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(Math.round(100*x/sum))); },\n pixelsPerValue: transportationPixelsPerValue,\n labelWidth: 94,\n bars: [\n [ \"transportation\", 27100, { \"class\":\"transportation\" } ],\n [ \"manufacturing\", 24700, { \"class\":\"manufacturing\" } ],\n [ \"residential\", 11800, { \"class\":\"residential\" } ],\n [ \"commercial\", 8930, { \"class\":\"commercial\" } ],\n ],\n};\n\nchart_data[\"04-residential\"] = {\n title:\"residential breakdown\",\n icon:'',\n href:\"http://www.eia.gov/consumption/residential/data/2009/index.cfm?view=consumption\",\n page:\"http://www.eia.gov/consumption/data.cfm#rec\",\n comment:\"CE3.1\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n pixelsPerValue: transportationPixelsPerValue,\n scaleToSum: 11800,\n labelWidth: 94,\n rectClass: \"residential\",\n bars: [\n [ \"space heating\", 4226 ],\n [ \"water heating\", 1803 ],\n [ \"air conditioning\", 635 ],\n [ \"refrigerators\", 484 ],\n [ \"other\", 3035 ],\n ],\n};\n\nchart_data[\"04-commercial\"] = {\n title:'commercial breakdown',\n icon:'',\n href:\"http://www.eia.gov/consumption/commercial/data/2003/pdf/e01a.pdf\",\n page:\"http://www.eia.gov/consumption/data.cfm#cec\",\n comment:\"Table E1A\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n pixelsPerValue: transportationPixelsPerValue,\n scaleToSum: 8930,\n labelWidth: 94,\n rectClass: \"commercial\",\n bars: [\n [ \"space heating\", 2365 ],\n [ \"lighting\", 1340 ],\n [ \"cooling\", 516 ],\n [ \"water heating\", 501 ],\n [ \"ventilation\", 436 ],\n [ \"refrigeration\", 381 ],\n [ \"cooking\", 190 ],\n [ \"computers\", 156 ],\n [ \"office equipment\", 69 ],\n [ \"other\", 569 ],\n ],\n};\n\nchart_data[\"04-manufacturing\"] = {\n title:'manufacturing breakdown',\n icon:'',\n page:\"http://www.eia.gov/consumption/data.cfm#mfg\",\n href:\"http://www.eia.gov/consumption/manufacturing/data/2010/pdf/Table1_1.pdf\",\n comment:\"Table 1_1\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n pixelsPerValue: transportationPixelsPerValue,\n scaleToSum: 24700,\n labelWidth: 154,\n rectClass: \"manufacturing\",\n bars: [\n [ \"petroleum and coal products\", 6137 ],\n [ \"chemicals\", 4995 ],\n [ \"paper\", 2109 ],\n [ \"primary metals\", 1608 ],\n [ \"food\", 1162 ],\n [ \"nonmetallic mineral products\", 716 ],\n [ \"wood products\", 473 ],\n [ \"fabricated metal products\", 302 ],\n [ \"transportation equipment\", 279 ],\n [ \"plastics and rubber products\", 275 ],\n [ \"other\", 760 ],\n ],\n};\n\nchart_data[\"04-transportation\"] = {\n title:'transportation breakdown',\n icon:'',\n page:\"http://cta.ornl.gov/data/chapter2.shtml\",\n href:\"http://cta.ornl.gov/data/tedb34/Spreadsheets/Table2_08.xls\",\n comment:\"Table 2.8 Transportation Energy Use by Mode, 2012–2013\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n pixelsPerValue: transportationPixelsPerValue,\n scaleToSum: 27100,\n labelWidth: 84,\n rectClass: \"transportation\",\n bars: [\n [ \"cars\", 7046.6 ],\n [ \"light trucks\", 8076.9 ],\n [ \"heavy trucks\", 5923.8 ],\n [ \"air\", 2037 ],\n [ \"water\", 1054.9 ],\n [ \"rail\", 610.8 ],\n [ \"pipeline\", 1140.8 ],\n ],\n};\n\n\nchart_data[\"04-transportation-CO2\"] = {\n title:\"transportation-related CO2 emissions in U.S., 2013\",\n href:\"http://cta.ornl.gov/data/tedb34/Edition34_Chapter11.pdf\",\n comment:\"table 11.8: Transportation Carbon Dioxide Emissions by Mode, 1990–2013\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n topValue: 1032,\n labelWidth: 114,\n bars: [\n [ \"passenger vehicles\", 1032 ],\n [ \"heavy trucks\", 410.8 ],\n [ \"air\", 148.6 ],\n [ \"rail\", 44.4 ],\n [ \"water\", 38.8 ],\n [ \"pipeline\", 47.7 ],\n ],\n};\n\nchart_data[\"04-ev-grid\"] = {\n title:\"well-to-wheels greenhouse gas emissions per vehicle, in CO2-equiv tons per year\",\n href: \"http://www.afdc.energy.gov/vehicles/electric_emissions.php\",\n format: \"%.1f\",\n labelWidth: 154,\n bars: [\n [ \"gasoline car\", 14815 / 2000 ],\n [ \"electric car in Illinois\", 9074 / 2000 ],\n [ \"electric car, U.S. average\", 7657 / 2000 ],\n [ \"electric car in California\", 4152 / 2000 ],\n [ \"electric car in New York\", 3431 / 2000 ],\n [ \"electric car, 100% renewables\", 0 ],\n ],\n};\n\nchart_data[\"04-trip-distribution\"] = {\n title:\"distribution of U.S. car trips\",\n href: \"http://www.solarjourneyusa.com/EVdistanceAnalysis7.php\",\n format: \" \",\n labelWidth: 40,\n lineHeight: 3,\n barHeight: 2,\n barYOffset: 7,\n fullHeight: 180,\n bars: [\n [ \" 0 miles\", 208 ],\n [ \"\", 241 ],\n [ \"\", 266 ],\n [ \"\", 215 ],\n [ \"\", 157 ],\n [ \"\", 157 ],\n [ \"\", 104 ],\n [ \"\", 90 ],\n [ \"\", 79 ],\n [ \"\", 45 ],\n [ \"10 miles\", 83 ],\n [ \"\", 30 ],\n [ \"\", 52 ],\n [ \"\", 27 ],\n [ \"\", 24 ],\n [ \"\", 56 ],\n [ \"\", 19 ],\n [ \"\", 20 ],\n [ \"\", 21 ],\n [ \"\", 9 ],\n [ \"20 miles\", 34 ],\n [ \"\", 10 ],\n [ \"\", 12 ],\n [ \"\", 10 ],\n [ \"\", 8 ],\n [ \"\", 22 ],\n [ \"\", 8 ],\n [ \"\", 7 ],\n [ \"\", 7 ],\n [ \"\", 4 ],\n [ \"30 miles\", 17 ],\n [ \"\", 3 ],\n [ \"\", 6 ],\n [ \"\", 4 ],\n [ \"\", 4 ],\n [ \"\", 10 ],\n [ \"\", 4 ],\n [ \"\", 3 ],\n [ \"\", 3 ],\n [ \"\", 1 ],\n [ \"40 miles\", 8 ],\n [ \"\", 1 ],\n [ \"\", 3 ],\n [ \"\", 2 ],\n [ \"\", 0 ],\n [ \"\", 6 ],\n [ \"\", 0 ],\n [ \"\", 1 ],\n [ \"\", 0 ],\n [ \"\", 0 ],\n [ \"50 miles\", 6 ],\n ],\n};\n\nchart_data[\"04-truck-emissions\"] = {\n title:\"long-haul truck emissions in ten years, under different tech adoption scenarios\",\n href: \"http://www.grahampeacedesignmail.com/cwr/cwr2012_trucking_finall_download_singles.pdf\",\n source: \"Road Transport: Unlocking Fuel-Saving Technologies In Trucking And Fleets, Nov 2012, figure 5\",\n format: function (x) { return sprintf(\"%d%%\", Math.round(100*x)); },\n labelWidth: 126,\n bars: [\n [ \"business as usual\", 394698 / 306034 ], // ktons CO2, 2021 value / 2011 value\n [ \"base tech adoption\", 370619 / 306034 ],\n [ \"aggressive adoption\", 359817 / 306034 ],\n [ \"complete adoption\", 310084 / 306034 ],\n [ \"and better logistics\", 274304 / 306034 ],\n ],\n};\n\nchart_data[\"04-residential-electricity\"] = {\n title:\"residential electricity consumption in U.S.\",\n href: \"http://www.eia.gov/tools/faqs/faq.cfm?id=96&t=3\",\n format: function (x,i,sum) { return sprintf(\"%d%%\", Math.round(100*x/sum)); },\n labelWidth: 98,\n bars: [\n [ \"space cooling\", 0.64 ],\n [ \"lighting\", 0.51 ],\n [ \"water heating\", 0.45 ],\n [ \"space heating\", 0.45 ],\n [ \"refrigeration\", 0.36 ],\n [ \"television etc\", 0.33 ],\n [ \"clothes dryers\", 0.20 ],\n [ \"furnace fans etc\", 0.15 ],\n [ \"other\", 1.74 ],\n ],\n};\n\nchart_data[\"04-per-capita\"] = {\n title: \"per capita electricity use in MWh\",\n href: \"http://www.arb.ca.gov/research/seminars/chu/chu.pdf\",\n lines: [\n { label:\"California\",\n units: \"kWh\",\n values: [ 3632, 3754, 3799, 3920, 4238, 4435, 4813, 5040, 5388, 5645, 5933, 6175, 6554, 6690, 6190, 6886, 7098, 7083, 7098, 7280, 7008, 7144, 6826, 6796, 7174, 7280, 7114, 7295, 7477, 7522, 7613, 7265, 7310, 7250, 7295, 7280, 7492, 7613, 7431, 7568, 7719, 7280 ],\n },\n { label:\"U.S.\",\n units: \"kWh\",\n values: [3814, 3935, 4177, 4419, 4677, 4919, 5282, 5555, 6024, 6508, 6826, 7098, 7598, 8082, 7976, 8082, 8521, 8854, 9066, 9202, 9232, 9338, 8990, 9187, 9671, 9762, 9853, 10125, 10534, 10701, 10897, 10943, 10822, 11094, 11261, 11457, 11669, 11715, 11972, 12123, 12411, 12214],\n },\n ],\n domain: [ 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001 ],\n};\n\n\n" }, { "path": "Script/charts.js", "content": "//\n// charts.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\nvar svgns = \"http://www.w3.org/2000/svg\";\n\nfunction placeChart(div, name) {\n var data = chart_data[name];\n \n var figure = div;\n\n var titleHTML = (data.icon ? data.icon + \" \" : \"\") + data.title;\n titleHTML += ' ' + \n getHTMLForCitation(\"source\", data.href) +\n getHTMLForCitation(\"data\", \"data.html?id=\" + name) +\n '';\n var title = createElement(\"div\", { \"class\":\"figure-caption\" + (data.icon ? \" with-icon\" : \"\"), \"html\":titleHTML });\n figure.appendChild(title);\n\n var svg = document.createElementNS(svgns, \"svg\");\n svg.setAttribute(\"class\", \"chart\");\n figure.appendChild(svg);\n \n if (!data.chart) { \n drawBarChart(svg,data);\n }\n else if (data.chart === \"stacked\") {\n drawStackedBars(svg,data);\n }\n else {\n console.log(\"unknown chart type\", data.chart);\n }\n}\n\nfunction getHTMLForCitation(what, href) {\n if (!href) { return \"\"; }\n return '(' + what + ')';\n}\n\n\n// draw\n\nfunction drawBarChart (svg,data) {\n var sum = data.bars.reduce(function (acc,bar) { return acc + bar[1]; }, 0);\n var max = data.bars.reduce(function (acc,bar) { return Math.max(acc, bar[1]); }, 0);\n \n var topValue = data.topValue || max;\n var fullWidth = data.fullWidth || 440;\n var labelWidth = data.labelWidth || 120;\n var barHeight = data.barHeight || 6;\n var barYOffset = data.barYOffset || 4;\n var lineHeight = data.lineHeight || 13;\n var format = data.format || \"%d\";\n var scale = data.scaleToSum ? (data.scaleToSum / sum) : 1;\n \n if (data.pixelsPerValue) {\n fullWidth = labelWidth + Math.ceil(data.pixelsPerValue * max * scale) + 5;\n }\n\n var barWidth = fullWidth - labelWidth;\n var fullHeight = data.fullHeight || (data.bars.length * lineHeight);\n \n var x = function (a) { return remap(a, 0, topValue, 0, barWidth); };\n \n svg.setAttributeNS(null, \"width\", fullWidth);\n svg.setAttributeNS(null, \"height\", fullHeight);\n \n data.bars.forEach(function (d, i) {\n var g = document.createElementNS(svgns, \"g\");\n g.setAttributeNS(null, \"transform\", \"translate(0,\" + (i * lineHeight) + \")\");\n \n var rect = document.createElementNS(svgns, \"rect\");\n rect.setAttributeNS(null, \"class\", (d[2] && d[2].class) || data.rectClass || \"\" );\n rect.setAttributeNS(null, \"x\", labelWidth);\n rect.setAttributeNS(null, \"y\", barYOffset);\n rect.setAttributeNS(null, \"width\", x(d[1]));\n rect.setAttributeNS(null, \"height\", barHeight);\n g.appendChild(rect);\n\n var label = document.createElementNS(svgns, \"text\");\n label.setAttributeNS(null, \"class\", \"label\");\n label.setAttributeNS(null, \"x\", 0);\n label.setAttributeNS(null, \"y\", 0);\n label.setAttributeNS(null, \"dy\", \"1em\");\n label.appendChild(document.createTextNode(d[0]));\n g.appendChild(label);\n \n var amount = document.createElementNS(svgns, \"text\");\n amount.setAttributeNS(null, \"class\", \"amount\");\n amount.setAttributeNS(null, \"x\", labelWidth - 5);\n amount.setAttributeNS(null, \"y\", 0);\n amount.setAttributeNS(null, \"dy\", \"1em\");\n amount.appendChild(document.createTextNode(\n typeof(format) == \"function\" ? format(d[1]*scale, i, sum*scale) : sprintf(format, d[1]*scale)));\n g.appendChild(amount);\n \n if (d[2] && d[2].annotation) {\n var annotation = document.createElementNS(svgns, \"text\"); \n annotation.setAttributeNS(null, \"class\", \"annotation\")\n annotation.setAttributeNS(null, \"x\", labelWidth + x(d[1] * scale) + 5);\n annotation.setAttributeNS(null, \"y\", 0);\n annotation.setAttributeNS(null, \"dy\", \"1em\");\n annotation.appendChild(document.createTextNode(d[2].annotation));\n g.appendChild(annotation);\n } \n\n svg.appendChild(g);\n });\n}\n\nfunction drawStackedBars (svg,data) {\n var fullWidth = data.fullWidth || 440;\n var labelWidth = data.labelWidth || 120;\n var lineHeight = data.lineHeight || 13;\n var captionHeight = 13;\n var format = data.format || \"%d\";\n\n var barWidth = fullWidth - labelWidth;\n var fullHeight = captionHeight + data.bars.length * lineHeight;\n \n var x = function (a) { return remap(a, 0, data.topValue, 0, barWidth); };\n \n svg.setAttributeNS(null, \"width\", fullWidth);\n svg.setAttributeNS(null, \"height\", fullHeight);\n\n data.bars.forEach(function (bar) {\n var cumsum = 0;\n bar.segments = bar[1].map(function (n,i) {\n var segment = { left:cumsum, width:n };\n cumsum += n;\n return segment;\n });\n bar.sum = cumsum;\n });\n\n var labeldata = data.labels.map(function (label, i) {\n return { label:label, segment:data.bars[0].segments[i] };\n });\n \n \n // captions\n \n var captions = document.createElementNS(svgns, \"g\");\n captions.setAttributeNS(null, \"transform\", \"translate(\" + labelWidth + \",0)\");\n \n labeldata.forEach(function (d,i) {\n var caption = document.createElementNS(svgns, \"text\");\n caption.setAttributeNS(null, \"class\", \"label stack-caption\")\n caption.setAttributeNS(null, \"x\", x(d.segment.left + 0.5 * d.segment.width));\n caption.setAttributeNS(null, \"y\", captionHeight - 1);\n caption.appendChild(document.createTextNode(d.label));\n captions.appendChild(caption);\n });\n\n svg.appendChild(captions);\n \n \n // bars\n\n data.bars.forEach(function (d, i) {\n var g = document.createElementNS(svgns, \"g\");\n g.setAttributeNS(null, \"transform\", \"translate(0,\" + (captionHeight + i * lineHeight) + \")\");\n\n var label = document.createElementNS(svgns, \"text\");\n label.setAttributeNS(null, \"class\", \"label\");\n label.setAttributeNS(null, \"x\", 0);\n label.setAttributeNS(null, \"y\", 0);\n label.setAttributeNS(null, \"dy\", \"1em\");\n label.appendChild(document.createTextNode(d[0]));\n g.appendChild(label);\n\n var amount = document.createElementNS(svgns, \"text\");\n amount.setAttributeNS(null, \"class\", \"amount\");\n amount.setAttributeNS(null, \"x\", labelWidth - 5);\n amount.setAttributeNS(null, \"y\", 0);\n amount.setAttributeNS(null, \"dy\", \"1em\");\n amount.appendChild(document.createTextNode(\n typeof(format) == \"function\" ? format(d.sum) : sprintf(format, d.sum)));\n g.appendChild(amount);\n \n var stack = document.createElementNS(svgns, \"g\");\n stack.setAttributeNS(null, \"transform\", \"translate(\" + labelWidth + \",0)\");\n \n d.segments.forEach(function (d,i) {\n var rect = document.createElementNS(svgns, \"rect\");\n rect.setAttributeNS(null, \"class\", \"segment\" + i);\n rect.setAttributeNS(null, \"x\", x(d.left));\n rect.setAttributeNS(null, \"y\", 4);\n rect.setAttributeNS(null, \"width\", x(d.width) - 2);\n rect.setAttributeNS(null, \"height\", 6);\n stack.appendChild(rect);\n });\n \n g.appendChild(stack);\n svg.appendChild(g);\n });\n}\n" }, { "path": "Script/clunker.js", "content": "//\n// clunker.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\n(function () {\n\nvar clunkerTangle;\nvar clunkerCalculationDivs = {};\n\n//--------------------------------------------------------------------------------\n//\n// calculations for each calculated variable\n//\n// These are both eval'd and turned into HTML for display\n\nvar clunkerModels = [\n {\n name:\"cars_traded\",\n lines: [\n \"this.budget = params.budget\",\n \"this.rebate = params.rebate\",\n \"this.overhead = params.overhead\",\n\n { spacer:2, },\n { comment:\"Assume that the program “sells out”, and all available rebates are collected. Given the demand for new cars, this will be true for any reasonable rebate amount.\" },\n { spacer:1 },\n \"this.cars_traded = ( this.budget - this.overhead ) / this.rebate\",\n ],\n },\n {\n name:\"gallons_saved\",\n lines: [\n \"this.old_MPG_limit = params.old_MPG_limit\",\n \"this.old_MPGs = params.old_MPGs\",\n { spacer:1 },\n \"this.eligible_old_MPGs = select this.old_MPGs where mpg < this.old_MPG_limit\",\n \n { spacer:2 },\n { comment:\"Assume that traded-in cars are chosen with equal probability from the pool of eligible cars. We use the harmonic average because we'll be calculating gallons consumed for constant miles, so we really want to be averaging gallons-per-mile.\" },\n { spacer:1 },\n \"this.average_old_MPG = harmonic-average this.eligible_old_MPGs\",\n \n { separator:1 },\n \n \"this.new_MPG_limit = params.new_MPG_limit\",\n \"this.new_MPGs = params.new_MPGs\",\n { spacer:1 },\n \"this.eligible_new_MPGs = select this.new_MPGs where mpg > this.new_MPG_limit\",\n \n { spacer:2 },\n { comment:\"Assume that new cars are purchased with equal probability from the pool of eligible cars. The distribution really should be sales-weighted. I'm sure the data is available, but I couldn't find it.\" },\n { spacer:1 },\n \"this.average_new_MPG = harmonic-average this.eligible_new_MPGs\",\n \n { separator:1 },\n \n { comment:\"Assume that everyone who is buying a new car now would have eventually bought a similar car when their current car got too old. So the fuel savings from the program should be calculated over the remaining lifetime of the old car. Ideally we'd like the joint distribution of MPGs and age of the current fleet, but I can't find that data. So we'll just use averages.\",\n style:\"margin-bottom:10px;\" },\n \n \"this.car_lifetime_miles = params.car_lifetime_miles\",\n \"this.average_miles_left = params.fraction_lifetime_left * this.car_lifetime_miles\",\n { spacer:1 },\n \"this.gallons_used_by_old_car = this.average_miles_left / this.average_old_MPG\",\n \"this.gallons_used_by_new_car = this.average_miles_left / this.average_new_MPG\",\n \"this.gallons_saved_per_car = this.gallons_used_by_old_car - this.gallons_used_by_new_car\",\n\n { separator:1 },\n \n \"this.cars_traded = params.cars_traded\",\n \"this.gallons_saved = this.gallons_saved_per_car * this.cars_traded\",\n ],\n },\n {\n name:\"hours_of_gas\",\n lines: [\n \"this.gallons_saved = params.gallons_saved\",\n { spacer:1 },\n \"this.gallons_consumed_per_day = params.gallons_consumed_per_day\",\n \"this.gallons_consumed_per_hour = this.gallons_consumed_per_day / params.hours_per_day\",\n { spacer:1 },\n \"this.hours_of_gas = this.gallons_saved / this.gallons_consumed_per_hour\",\n ],\n },\n {\n name:\"tons_CO2e_saved\",\n lines: [\n \"this.gallons_saved = params.gallons_saved\",\n { spacer:1 },\n \"this.kg_CO2_per_gallon_gas = params.kg_CO2_per_gallon_gas\",\n \"this.tons_CO2_saved = this.gallons_saved * this.kg_CO2_per_gallon_gas / params.kg_per_ton\",\n { spacer:2, },\n { comment:\"CO2 comprises 95% of a car's greenhouse gas emissions. The other 5% include methane, nitrous oxide, and hydroflourocarbons. To account for these other gases, we divide the amount of CO2 by 0.95 to get CO2e (“carbon dioxide equivalent”).\" },\n { spacer:1 },\n \"this.CO2_per_CO2e = params.CO2_per_CO2e\",\n \"this.tons_CO2e_saved = this.tons_CO2_saved / this.CO2_per_CO2e\",\n ],\n },\n {\n name:\"percent_annual_emissions\",\n lines: [\n \"this.tons_CO2e_saved = params.tons_CO2e_saved\",\n \"this.tons_CO2e_emitted_yearly = params.tons_CO2e_emitted_yearly\",\n { spacer:1 },\n \"this.percent_annual_emissions = this.tons_CO2e_saved / this.tons_CO2e_emitted_yearly * params.units_per_percent\",\n ],\n },\n {\n name:\"dollars_per_ton_CO2e\",\n lines: [\n \"this.budget = params.budget\",\n \"this.tons_CO2e_saved = params.tons_CO2e_saved\",\n { spacer:1 },\n \"this.dollars_per_ton_CO2e = this.budget / this.tons_CO2e_saved\",\n ],\n },\n {\n name:\"dollars_per_ton_CO2e_on_balance\",\n lines: [\n \"this.gallons_saved = params.gallons_saved\",\n \"this.dollars_per_gallon = params.dollars_per_gallon\",\n \"this.dollars_saved_buying_less_gas = this.gallons_saved * this.dollars_per_gallon\",\n { spacer:1 },\n \"this.budget = params.budget\",\n \"this.dollars_spent_on_balance = this.budget - this.dollars_saved_buying_less_gas\",\n { spacer:1 },\n \"this.tons_CO2e_saved = params.tons_CO2e_saved\",\n \"this.dollars_per_ton_CO2e_on_balance = this.dollars_spent_on_balance / this.tons_CO2e_saved\",\n ],\n },\n];\n\n\n//--------------------------------------------------------------------------------\n//\n// variable metadata\n\nvar clunkerVariables = {\n \"budget\": { value:3e9, min:0.1e9, max:20e9, step:0.1e9, fmt:function (v) { return sprintf(\"$%.1f billion\", v * 1e-9); } },\n \"rebate\": { value:3500, min:1000, max:10000, step:100, fmt:function (v) { return \"$\" + commas(v); } },\n \"overhead\": { value:100e6, min:0, max:10e9, step:10e6, fmt:function (v) { return \"$\" + commas(v * 1e-6) + \" million\"; } },\n \"cars_traded\": { fmt:function (v) { return commas(v); } },\n \n \"old_MPG_limit\": { value:17, min:10, max:45, step:1, fmt:function (v) { return sprintf(\"%d MPG\", v); } },\n \"old_MPGs\": { value:createDistribution([ 0, 0, 0, 0, 0, 0, 0, 0, 85, 355, 493, 1270, 3114, 4037, 6636, 8932, 10051, 9932, 10309, 12924, 18508, 14603, 13452, 14563, 11454, 9715, 8032, 7045, 5841, 4835, 3633, 3225, 2642, 1624, 1427, 910, 671, 510, 590, 837, 426, 334, 237, 157, 110, 207, 312, ]),\n className:\"distribution\", comment:\"miles-per-gallon distribution for cars currently on the road\",\n href:\"Notes/06-clunker.txt\" },\n \"eligible_old_MPGs\": { className:\"distribution\", comment:\"miles-per-gallon distribution for cars eligible for trade-in\" },\n \"average_old_MPG\": { fmt:function (v) { return sprintf(\"%d MPG\", v); } },\n\n \"new_MPG_limit\": { value:24, min:10, max:45, step:1, fmt:function (v) { return sprintf(\"%d MPG\", v); } },\n \"new_MPGs\": { value:createDistribution([ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 330, 124, 299, 453, 896, 1051, 1009, 742, 1246, 1205, 1380, 948, 927, 515, 525, 340, 196, 196, 124, 175, 10, 31, 62, 0, 21, 0, 21, 0, 0, 0, 0, 0, 10, 0, 0, 0, 10, ]),\n className:\"distribution\", comment:\"miles-per-gallon distribution for new cars on sale\",\n href:\"Notes/06-clunker.txt\" },\n \"eligible_new_MPGs\": { className:\"distribution\", comment:\"miles-per-gallon distribution for cars eligible to be traded to\" },\n\n \"average_new_MPG\": { fmt:function (v) { return sprintf(\"%d MPG\", v); } },\n \n \"car_lifetime_miles\": { value:150e3, min:10e3, max:1e6, step:10e3, fmt:function (v) { return commas(v) + \" miles\"; } },\n \"fraction_lifetime_left\": { value:0.25, min:0.01, max:1.0, step:0.01, fmt:function (v) { return sprintf(\"%d%%\", Math.round(v * 100)); } },\n \"average_miles_left\": { fmt:function (v) { return commas(v) + \" miles\"; } },\n \"gallons_saved_per_car\": { fmt: function (v) { return commas(v) + \" gallons\"; } },\n \"gallons_used_by_old_car\": { fmt: function (v) { return commas(v) + \" gallons\"; } },\n \"gallons_used_by_new_car\": { fmt: function (v) { return commas(v) + \" gallons\"; } },\n \"gallons_saved\": { fmt: function (v) { return commas(v * 1e-6) + \" million gallons\"; } },\n\n \"gallons_consumed_per_day\": { value:377538000, min:1e6, max:1e10, step:1e6, fmt:function (v) { return commas(v * 1e-6) + \" million gallons\"; },\n href:\"http://www.eia.gov/beta/api/qb.cfm?sdid=PET.MGFUPUS2.A\" },\n \"hours_per_day\": { value:24, min:1, max:10000, step:1, fmt:function (v) { return sprintf(\"%d\", v); } },\n \"minutes_per_hour\": { value:60, min:1, max:10000, step:1, fmt:function (v) { return sprintf(\"%d\", v); } },\n \"gallons_consumed_per_hour\": { fmt: function (v) { return commas(v * 1e-6) + \" million gallons\"; } },\n \"hours_of_gas\": { fmt: function (v) { return sprintf(\"%.0f hours\", v); } },\n \n \"kg_CO2_per_gallon_gas\": { value:8.87, min:0.01, max:100, step:0.01, fmt:function (v) { return sprintf(\"%.2f kg/gallon\", v); },\n href:\"http://www.nhtsa.gov/CARS-archive/official-information/CARS-Report-to-Congress.pdf\" },\n \"CO2_per_CO2e\": { value:0.95, min:0.01, max:1, step:0.01, fmt:function (v) { return sprintf(\"%.2f\", v); },\n href:\"http://www.nhtsa.gov/CARS-archive/official-information/CARS-Report-to-Congress.pdf\" },\n \"kg_per_ton\": { value:1000, min:1, max:1e6, step:10, fmt:function (v) { return sprintf(\"%d\", v); } },\n \"tons_CO2_saved\": { fmt: function (v) { return sprintf(\"%.2f million tons\", v * 1e-6); } },\n \"tons_CO2e_saved\": { fmt: function (v) { return sprintf(\"%.2f million tons\", v * 1e-6); } },\n\n \"tons_CO2e_emitted_yearly\": { value:6983e6, min:1e6, max:1e10, step:10e6, fmt:function (v) { return commas(v * 1e-6) + \" million tons\" },\n href:\"http://www.eia.gov/environment/emissions/ghg_report/pdf/tbl1.pdf\" },\n \"units_per_percent\": { value:100, min:1, max:10000, step:1, fmt:function (v) { return sprintf(\"%d\", v); } },\n \"percent_annual_emissions\": { fmt: function (v) { return sprintf(\"%.2f%%\", v); } },\n \n \"dollars_per_ton_CO2e\": { fmt: function (v) { return \"$\" + commas(v); } },\n\n \"dollars_per_gallon\": { value:3.0, min:0.50, max:10, step:0.1, fmt:function (v) { return sprintf(\"$%.2f\", v); } },\n \"dollars_saved_buying_less_gas\": { fmt:function (v) { return sprintf(\"$%.1f billion\", v * 1e-9); } },\n \"dollars_spent_on_balance\": { fmt:function (v) { return sprintf(\"$%.2f billion\", v * 1e-9); } },\n \"dollars_per_ton_CO2e_on_balance\": { fmt: function (v) { return ((v < 0) ? \"-\" : \"\") + \"$\" + commas(Math.abs(v)); } },\n};\n\nfunction commas (v) {\n return Math.round(v).toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, \"$1,\");\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// tangle setup\n\nvar setupClunker = this.setupClunker = function () {\n var root = document.getElementById(\"clunker\");\n var calculationRoot = document.getElementById(\"clunker-calculations\");\n \n appendAllModelDivs(calculationRoot);\n attachVariableAttributesToSpans(root);\n initializeHelp(root);\n \n clunkerTangle = new Tangle(root, {\n initialize: function () {\n Object.keys(clunkerVariables).forEach(function (k) {\n this[k] = clunkerVariables[k].value;\n }, this);\n this[\"drag-help-message\"] = isTouchDevice ? \"left and right\" : \"with your mouse\";\n this[\"click-help-message\"] = isTouchDevice ? \"Tap\" : \"Click\";\n },\n update: getTangleUpdateFunction(),\n });\n}\n\nfunction appendAllModelDivs (calculationsRoot) {\n clunkerModels.forEach(function (m) {\n var div = getDivForModel(m);\n clunkerCalculationDivs[m.name] = div;\n calculationsRoot.appendChild(div);\n });\n}\n\nfunction attachVariableAttributesToSpans (root) {\n Object.keys(clunkerVariables).forEach(function (k) {\n var attr = clunkerVariables[k];\n var hasFormatFunction = (typeof(attr.fmt) == \"function\");\n if (hasFormatFunction) { Tangle.formats[k] = attr.fmt; }\n \n var spans = nodeArray(root.querySelectorAll('span[data-var=\"' + k + '\"]'));\n spans.forEach(function (span) {\n if (hasFormatFunction) {\n span.setAttribute(\"data-format\", k);\n }\n if (attr.min !== undefined) {\n span.setAttribute(\"data-min\", attr.min);\n span.setAttribute(\"data-max\", attr.max);\n span.setAttribute(\"data-step\", attr.step);\n }\n });\n });\n}\n\nfunction getTangleUpdateFunction () {\n var updateScript = clunkerModels.map(function (m) { \n return m.lines.map(function (line) {\n var string = (typeof(line) == \"string\") ? line : line.line;\n if (string === undefined) { return \"\"; } // ignore comments, separators, etc\n\n string = string.replace(/params\\./g, \"this.\");\n string = string.replace(/select (\\S+) where (\\S+) (.+)/g, \"selectWhere($1, (function ($2) { return $2 $3; }).bind(this))\");\n string = string.replace(/harmonic-average (.+)/g, \"harmonicAverage($1)\");\n return string + \";\"\n }).join(\"\\n\");\n }).join(\"\\n\");\n \n return eval(\"(function () { \" + updateScript + \" })\");\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// distribution functions\n\nfunction createDistribution (array, comment) {\n return { values:array, selection_mask:array.map(function () { return 1; }), comment:comment };\n}\n\nfunction selectWhere (dist, f) {\n return { values:dist.values, selection_mask:dist.selection_mask.map(function (m,i) { return f(i) ? m : 0 }) };\n}\n\nfunction harmonicAverage (dist) {\n var n = dist.values.reduce(function (sum,v,i) { return sum + v * dist.selection_mask[i] * (i && (1/i)) }, 0);\n var d = dist.values.reduce(function (sum,v,i) { return sum + v * dist.selection_mask[i] }, 0);\n var avg = d / n;\n return isNaN(avg) ? 0 : avg;\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// calculation display\n\nfunction getDivForModel (m) {\n var html = \"\";\n html += sprintf('
calculations for “%s” ' + \n '(you can change assumptions in green)
', getNameForVariable(m.name));\n html += '
';\n html += m.lines.map(getHTMLForLine).join(\"\\n\");\n html += '
';\n \n return createElement(\"div\", { \"class\":\"calculation\", \"html\":html });\n}\n\nfunction getHTMLForLine (line) {\n var string = (typeof(line) == \"string\") ? line : line.line;\n if (string === undefined) { return getHTMLForCommentLine(line); }\n\n var html = \"\";\n var columns = string.split(\" = \");\n var isExpression = columns[1].match(/this\\./);\n \n html += '
';\n\n html += getHTMLForLineFragment(columns[0], \" lhs\");\n html += ' = ' + getHTMLForLineFragment(columns[1]);\n \n if (isExpression) {\n html += '
' + getHTMLForLineFragment(columns[0], \" lhs dummy\");\n html += ' = ';\n html += getHTMLForLineFragment(columns[0].replace(/this\\./, \"params.\"), \"\", true);\n }\n\n html += '
';\n return html;\n}\n\nfunction getHTMLForLineFragment (s, lhs, isResult) {\n return s.replace(/this\\.(\\w+)/g, function (_,k) { \n return '' + getNameForVariable(k) + '' })\n .replace(/params\\.(\\w+)/g, function (_,k) {\n var attr = clunkerVariables[k];\n var clas = attr.className ? clunkerVariables[k].className :\n isResult ? \"\" : \n (attr.min !== undefined) ? \"adjustable-number\" : \"calculated-result\";\n \n var html = '';\n if (attr.href) { html += '(source)'; }\n return html;\n });\n}\n\nfunction getNameForVariable (k) {\n return k.replace(/_/g, \" \");\n}\n\nfunction getHTMLForCommentLine (line) {\n if (line.spacer) { return '
'; }\n if (line.separator) { return '
'; }\n if (line.comment) { return '
' + line.comment + '
'; }\n return \"\";\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// interaction\n\nfunction lockCalculatedResult (name) {\n var alreadyLocked = (clunkerCalculationDivs[name].style.display === \"block\");\n if (alreadyLocked) { name = \"\"; } // unlock\n\n Object.keys(clunkerCalculationDivs).forEach(function (k) {\n var div = clunkerCalculationDivs[k];\n div.style.display = (name === k) ? \"block\" : \"none\";\n });\n \n var spans = nodeArray(clunkerTangle.element.querySelectorAll(\".calculated-result\"));\n spans.forEach(function (span) {\n if (span.getAttribute(\"data-var\") === name) { addClass(span, \"locked\"); }\n else { removeClass(span, \"locked\"); }\n });\n}\n\nfunction setVariableHovering (name, hovering) {\n var spans = nodeArray(clunkerTangle.element.querySelectorAll('[data-var=\"' + name + '\"]'));\n spans.forEach(function (span) {\n if (hovering) { addClass(span, \"hovering\"); }\n else { removeClass(span, \"hovering\"); }\n });\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// help\n\nvar calculationHelp;\n\nfunction initializeHelp (root) {\n calculationHelp = createElement(\"div\", { \"class\": \"calculation-help\" });\n root.insertBefore(calculationHelp, root.firstChild);\n}\n\nfunction setHelpShowingForElement (el, showing, text) {\n if (ancestorWithClass(el, \"analysis\")) { return; } // no help for right column\n\n calculationHelp.style.display = showing ? \"block\" : \"none\";\n if (!showing) { return; }\n \n if (text && calculationHelp.innerHTML !== text) { calculationHelp.innerHTML = text; }\n \n var containerY = Math.round(calculationHelp.parentNode.getBoundingClientRect().top);\n var elY = Math.round(el.getBoundingClientRect().top);\n \n calculationHelp.style.marginTop = \"\" + (elY - containerY) + \"px\";\n}\n\n\n//--------------------------------------------------------------------------------\n//\n// Tangle classes\n\nvar isAnyAdjustableNumberDragging = false; // hack for dragging one value over another one\n\n\nTangle.classes[\"token\"] = {\n\n initialize: function (element,options,tangle,variable) {\n this.element = element;\n this.variable = variable;\n\n this.isHovering = false;\n if (!isTouchDevice) {\n this.element.addEventListener(\"mouseenter\", (function () { this.setHovering(true) }).bind(this));\n this.element.addEventListener(\"mouseleave\", (function () { this.setHovering(false) }).bind(this));\n }\n },\n \n update: function () { }, // override tangle's default update\n \n setHovering: function (hovering) {\n this.isHovering = hovering;\n if (isAnyAdjustableNumberDragging) { return; }\n setVariableHovering(this.variable, this.isActive());\n },\n \n isActive: function () {\n return this.isHovering && !isAnyAdjustableNumberDragging;\n },\n};\n\n\nTangle.classes[\"calculated-result\"] = {\n\n initialize: function (element,options,tangle,variable) {\n this.element = element;\n this.variable = variable;\n this.wantsHelp = !this.element.getAttribute(\"data-no-help\");\n\n this.isHovering = false;\n if (!isTouchDevice) {\n this.element.addEventListener(\"mouseenter\", (function () { this.setHovering(true) }).bind(this));\n this.element.addEventListener(\"mouseleave\", (function () { this.setHovering(false) }).bind(this));\n }\n\n this.element.onclick = (function () {\n lockCalculatedResult(variable);\n this.updateHelp()\n }).bind(this);\n },\n\n setHovering: function (hovering) {\n this.isHovering = hovering;\n if (isAnyAdjustableNumberDragging) { return; }\n setVariableHovering(this.variable, this.isActive());\n this.updateHelp();\n },\n \n updateHelp: function () {\n if (this.wantsHelp) {\n var text = hasClass(this.element, \"locked\") ? \"click to hide calculations\" : \"click to see calculations\";\n setHelpShowingForElement(this.element, this.isActive(), text);\n }\n },\n \n isActive: function () {\n return this.isHovering && !isAnyAdjustableNumberDragging;\n },\n};\n\n\nTangle.classes[\"adjustable-number\"] = {\n\n initialize: function (element, options, tangle, variable) {\n this.element = element;\n this.tangle = tangle;\n this.variable = variable;\n\n this.min = (options.min !== undefined) ? parseFloat(options.min) : 1;\n this.max = (options.max !== undefined) ? parseFloat(options.max) : 10;\n this.step = (options.step !== undefined) ? parseFloat(options.step) : 1;\n \n this.initializeHover();\n this.initializeDrag();\n },\n\n\n // hover\n \n initializeHover: function () {\n this.isHovering = false;\n if (!isTouchDevice) {\n this.element.addEventListener(\"mouseenter\", (function () { this.setHovering(true) }).bind(this));\n this.element.addEventListener(\"mouseleave\", (function () { this.setHovering(false) }).bind(this));\n }\n },\n \n setHovering: function (hovering) {\n this.isHovering = hovering;\n this.updateRolloverEffects();\n },\n \n updateRolloverEffects: function (down) {\n if (!down && isAnyAdjustableNumberDragging) { return; } // ignore if dragging a different number\n this.updateStyle();\n this.updateCursor();\n this.updateHelp();\n },\n \n isActive: function () {\n return this.isDragging || (this.isHovering && !isAnyAdjustableNumberDragging);\n },\n\n updateStyle: function () {\n setVariableHovering(this.variable, this.isActive());\n\n if (this.isDragging) { addClass(this.element, \"dragging\"); }\n else { removeClass(this.element, \"dragging\"); }\n },\n\n updateCursor: function () {\n var body = document.body;\n if (this.isActive()) { addClass(body,\"TKCursorDragHorizontal\"); }\n else { removeClass(body,\"TKCursorDragHorizontal\"); }\n },\n\n updateHelp: function () {\n setHelpShowingForElement(this.element, this.isActive(), \"drag the number left or right\");\n },\n\n\n // drag\n \n initializeDrag: function () {\n this.isDragging = false;\n makeTouchable(this.element, this);\n },\n \n touchDown: function (e,x,y) {\n isAnyAdjustableNumberDragging = true;\n this.isDragging = true;\n this.valueAtMouseDown = this.tangle.getValue(this.variable);\n this.xAtMouseDown = x;\n\n this.updateRolloverEffects(true);\n this.updateStyle();\n },\n \n touchMove: function (e,x,y) {\n var dx = x - this.xAtMouseDown;\n var unclippedValue = this.valueAtMouseDown + dx / 5 * this.step;\n var value = Math.min(this.max, Math.max(this.min, Math.round(unclippedValue / this.step) * this.step));\n \n this.tangle.setValue(this.variable, value);\n this.updateHelp();\n },\n \n touchUp: function (e,x,y) {\n isAnyAdjustableNumberDragging = false;\n this.isDragging = false;\n\n this.updateRolloverEffects();\n this.updateStyle();\n this.updateHelp();\n }\n};\n\n\nTangle.classes[\"distribution\"] = {\n\n initialize: function (element,options,tangle,variable) {\n this.element = element;\n this.tangle = tangle;\n this.variable = variable;\n this.height = 18;\n },\n \n update: function () {\n if (!this.bars) {\n this.bars = this.createBars();\n this.fills = this.bars.map(function (bar) { return bar.querySelector(\".fill\"); });\n }\n\n var dist = this.tangle.getValue(this.variable);\n var maxValue = dist.values.reduce(function (max,v) { return (v > max) ? v : max }, 0);\n \n this.fills.forEach(function (fill, i) {\n var fillHeight = Math.round(dist.values[i] / maxValue * this.height);\n fill.style.height = fillHeight + \"px\";\n this.bars[i].className = dist.selection_mask[i] ? \"bar selected\" : \"bar\";\n }, this);\n },\n \n createBars: function () {\n var dist = this.tangle.getValue(this.variable);\n var barContainer = createElement(\"div\", { \"class\":\"bars\" });\n this.element.appendChild(barContainer);\n \n var bars = dist.values.map(function (v,i) {\n var bar = createElement(\"div\", { \"class\":\"bar\", \"html\":'
' });\n bar.onmouseenter = (function () { this.mouseEnteredBar(bar,i); }).bind(this);\n bar.onmouseleave = (function () { this.mouseLeftBar(bar,i); }).bind(this);\n barContainer.appendChild(bar);\n return bar;\n }, this);\n \n var comment = clunkerVariables[this.variable].comment;\n if (comment) {\n this.commentDiv = createElement(\"div\", { \"class\":\"comment\", \"html\":comment });\n this.element.appendChild(this.commentDiv);\n }\n \n this.labelDiv = createElement(\"div\", { \"class\":\"label\" });\n this.element.appendChild(this.labelDiv);\n\n return bars;\n },\n \n mouseEnteredBar: function (bar, i) {\n this.labelDiv.innerHTML = i + \" MPG\";\n this.labelDiv.style.left = (i*6 - 25) + \"px\";\n this.labelDiv.style.display = \"block\";\n if (this.commentDiv) { this.commentDiv.style.visibility = \"hidden\"; }\n },\n mouseLeftBar: function (bar, i) {\n this.labelDiv.style.display = \"none\";\n if (this.commentDiv) { this.commentDiv.style.visibility = \"visible\"; }\n },\n};\n\n\n})();\n" }, { "path": "Script/main.js", "content": "//\n// main.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\nvar isTouchDevice = !!(\"ontouchstart\" in window);\n\nwindow.onload = function () {\n if (isTouchDevice) { addClass(document.body, \"touch-device\"); }\n\n chain([\n setupTableOfContents,\n loadScripts,\n preloadImages,\n setupCarbonBudget,\n setupClunker,\n setupPreviewImages,\n setupDynamicToolsVideos,\n setupAutocompleteVideo,\n ]);\n \n function chain (funcs) {\n setTimeout(next, 10);\n function next () {\n if (funcs.length == 0) { return; }\n (funcs.shift())();\n setTimeout(next, 10);\n }\n }\n}\n\n\n//---------------------------------------------------------------------\n// toc\n\nfunction setupTableOfContents () {\n var template = document.getElementById(\"toc-template\");\n var tocs = nodeArray(document.querySelectorAll(\".toc\"));\n \n tocs.forEach(function (toc) {\n if (toc === template) { return; }\n toc.innerHTML = template.innerHTML;\n \n var activeChapter = toc.querySelector(\".toc-\" + toc.id);\n activeChapter.className += \" toc-active\";\n });\n}\n\n\n//---------------------------------------------------------------------\n// scripts\n\nvar scripts = {};\n\nfunction loadScripts () {\n var divs = nodeArray(document.querySelectorAll(\".script\"));\n loadNextDiv();\n \n function loadNextDiv () {\n if (divs.length == 0) { return; }\n var div = divs.shift();\n var params = div.getAttribute(\"data-script\").split(/\\s/);\n\n var name = params.shift();\n params.unshift(div);\n \n var func = scripts[name];\n func.apply(undefined, params);\n \n window.setTimeout(loadNextDiv, 5); \n }\n}\n\nscripts[\"svg\"] = function (div, name) {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", \"Images/\" + name + \".svg\");\n xhr.onload = function () { div.innerHTML = xhr.responseText };\n xhr.send();\n}\n\nscripts[\"chart\"] = function (div, name) {\n placeChart(div, name);\n};\n\n\n//---------------------------------------------------------------------\n// videos\n\nfunction setupDynamicToolsVideos () {\n var divs = nodeArray(document.querySelectorAll(\".dynamic-tools-thumbnail\"));\n divs.forEach(function (div) {\n var video = div.querySelector(\"video\");\n var img = div.querySelector(\"img\");\n if (!video || !img) { return; }\n div.addEventListener(\"mouseenter\", function () {\n video.play();\n img.style.visibility = \"hidden\";\n });\n div.addEventListener(\"mouseleave\", function () {\n img.style.visibility = \"visible\";\n video.pause();\n video.currentTime = 0;\n });\n });\n}\n\n\n//---------------------------------------------------------------------\n// preload images\n\nvar mainPreloadedImages;\n\nfunction preloadImages () {\n var urls = [ \"Images/01-carbon-budget-knob-down.png\" ];\n mainPreloadedImages = urls.map(function (url) {\n var image = new Image();\n image.src = url;\n return image;\n });\n}\n\n\n//---------------------------------------------------------------------\n// util\n\nfunction nodeArray (nodeList) {\n return Array.prototype.slice.call(nodeList);\n}\n\nfunction createElement (tag, properties) {\n var el = document.createElement(tag);\n Object.getOwnPropertyNames(properties || {}).forEach(function (k) {\n if (k === \"html\") { el.innerHTML = properties[k]; }\n else { el.setAttribute(k, properties[k]); }\n });\n return el;\n}\n\nfunction hasClass (el,clas) {\n var classes = (el.className || \"\").split(\" \");\n return classes.some(function (c) { return c === clas; });\n}\n\nfunction addClass (el,clas) {\n if (hasClass(el,clas)) { return; }\n el.className = (el.className !== undefined && el.className.length) ? (el.className + \" \" + clas) : clas;\n}\n\nfunction removeClass (el,clas) {\n var classes = (el.className || \"\").split(\" \");\n var newName = classes.filter(function (c) { return c !== clas; }).join(\" \");\n if (el.className !== newName) { el.className = newName; }\n}\n\nfunction getInheritedAttribute (el, attr) {\n for (var node = el; node && node !== document.body; node = node.parentNode) {\n var a = node.getAttribute(attr);\n if (a) { return a; }\n }\n return undefined;\n}\n\nfunction ancestorWithClass (el, clas) {\n if (Array.isArray(clas)) {\n return clas.reduce(function (a,c) { return a || ancestorWithClass(el, c); }, null);\n }\n\n for (var node = el; node && node !== document.body; node = node.parentNode) {\n if (hasClass(node, clas)) { return node; }\n }\n return null;\n}\n\nfunction ancestorWithTagName (el, tag) {\n if (Array.isArray(tag)) {\n return tag.reduce(function (a,c) { return a || ancestorWithTagName(el, c); }, null);\n }\n\n for (var node = el; node && node !== document.body; node = node.parentNode) {\n var t = (node.tagName || \"\").toLowerCase();\n if (t && t === tag) { return node; }\n }\n return null;\n}\n\nfunction lerp (a,b,t) { return a + (b - a) * t; };\nfunction remap (x,fromLow,fromHigh,toLow,toHigh) { return lerp(toLow, toHigh, (x - fromLow) / (fromHigh - fromLow)); };\n\n" }, { "path": "Script/previews.js", "content": "//\n// previews.js\n// What Can A Technologist Do About Climate Change?\n//\n// Bret Victor, November 2015\n// MIT open-source license.\n//\n\nvar previewsComeFromAWS = true;\nvar previewImagesByURL = {};\n\nvar setupPreviewImages = this.setupPreviewImages = function () {\n if (\"ontouchstart\" in window) { return; } // no previews on touch device\n\n setupRecentScroll();\n \n var links = getPreviewLinks();\n var names = getPreviewNamesForLinks(links);\n \n setupPreviewSubset(names,links,0,3,0);\n setupPreviewSubset(names,links,3,30,2000);\n setupPreviewSubset(names,links,30,100,3000);\n setupPreviewSubset(names,links,100,1000,4000);\n};\n\nfunction setupPreviewSubset (names, links, from, to, timeout) {\n setTimeout(function () {\n loadPreviewImagesWithNames(names.slice(from,to));\n setupPreviewLinks(links.slice(0,to));\n }, timeout || 0);\n}\n\nfunction loadPreviewImagesWithNames (names) {\n names.forEach(function (name) {\n var image = new Image();\n var url = getPreviewImageURLForName(name);\n image.src = url;\n previewImagesByURL[url] = image;\n });\n}\n\nfunction setupPreviewLinks (links) {\n links.forEach(function (link) {\n var url = getPreviewImageURLForLinkURL(link.getAttribute(\"href\") || \"\");\n if (previewImagesByURL[url]) {\n setupPreviewLink(link, url);\n }\n });\n}\n\nfunction setupPreviewLink (link, url) {\n if (link.onmouseenter) { return; }\n\n var containerID = getInheritedAttribute(link, \"data-preview-container\");\n var cite = ancestorWithClass(link, \"cite\");\n var container = containerID ? document.getElementById(containerID) : cite ? cite.parentNode : undefined;\n\n var previewHeight = 320;\n var previewBorderOffset = 0;\n\n link.onmouseenter = function () {\n if (recentlyScrolled) { return; }\n \n var windowHeight = window.innerHeight;\n var linkY = Math.round(link.getBoundingClientRect().top);\n var previewY = Math.round(Math.max(10, Math.min(windowHeight - previewHeight - 10, linkY - previewHeight/3)));\n var previewOffset = (containerID ? 0 : (previewY - linkY)) - previewBorderOffset;\n \n var preview = createElement(\"img\", { \n \"class\": \"link-preview\", \n \"style\": \"margin-top:\" + previewOffset + \"px\",\n \"src\": url,\n });\n\n if (container) {\n container.insertBefore(preview, container.firstChild);\n }\n else {\n link.parentNode.insertBefore(preview, link);\n }\n \n function removePreview () {\n if (preview && preview.parentNode) {\n preview.parentNode.removeChild(preview);\n preview = undefined;\n }\n }\n \n link.onmouseleave = removePreview;\n link.onclick = removePreview;\n };\n}\n\nfunction getPreviewLinks () {\n var excludedClasses = [\"column-right\", \"no-preview\", \"figure\", \"toc\" ];\n return nodeArray(document.body.getElementsByTagName(\"a\")).filter(function (link) {\n return !ancestorWithTagName(link, \"svg\") &&\n !ancestorWithClass(link, excludedClasses) &&\n link.getAttribute(\"href\") && link.getAttribute(\"href\").substr(0,1) !== \"#\";\n });\n}\n\nfunction getPreviewURLsForLinks (links) {\n return links.map(function (link) { return link.getAttribute(\"href\"); });\n}\n\nfunction getPreviewNamesForLinks (links) {\n return getPreviewURLsForLinks(links).map(getPreviewNameForLinkURL);\n}\n\n\n// don't show when scrolling, only when mousing deliberately\n\nvar recentlyScrolled = false;\nvar recentScrollTime = 0;\n\nfunction setupRecentScroll () {\n window.addEventListener(\"scroll\", function () {\n recentlyScrolled = true;\n recentScrollTime = Date.now();\n });\n document.body.addEventListener(\"mousemove\", function () {\n if (!recentlyScrolled) { return; }\n var msSinceScroll = Date.now() - recentScrollTime; // mousemove events are auto-generated after scroll\n if (msSinceScroll > 100) { recentlyScrolled = false; } // so make sure this isn't one of those\n });\n}\n\n\n// preview url\n\nfunction getPreviewNameForLinkURL (url) {\n return url.replace(/^h\\w+\\W+/,\"\").replace(/\\/$/, \"\").replace(/\\W+/g, \"-\") + \".jpg\";\n}\n\nfunction getPreviewImageURLForLinkURL (url) {\n var name = getPreviewNameForLinkURL(url);\n return getPreviewImageURLForName(name);\n}\n\nfunction getPreviewImageURLForName (name) {\n var prefix = previewsComeFromAWS ? \"http://s3.amazonaws.com/worrydream.com/ClimateChange/\" : \"\";\n return prefix + \"PreviewImages/\" + name;\n}\n\n" }, { "path": "data.html", "content": "\n\n \n \n \n\n\n
\n
\n\n\n\n\n" }, { "path": "index.html", "content": "\n\n \n \n What can a technologist do about climate change? A personal view.\n\n \n\n \n \n \n\n \n \n \n \n \n \n \n\n\n\n \n\n\n\n\n
\n
\n
\n
People say “this is a Manhattan Project, this an Apollo Project”. Sorry, those are science projects. Fusion is a Manhattan Project or an Apollo Project... The rest of this is more like retooling for World War II, except with everyone playing on the same team.
\n
— Saul Griffith, on converting the world to clean energy
\n
This has not been a scientist’s war; it has been a war in which all have had a part.
\n
— Vannevar Bush, on World War II
\n
\n
\n\n
\n \n

What can a technologist do about climate change?

\n
(A personal view)
\n
Bret Victor / November 2015
\n
\n\n
\n
\n \n
\n
\n
\n
\n\n\n\n\n\n
\n
\n\n

This started with a tweet. I’m embarrassed how often that happens.

\n\n

Frustrated by a sense of global mispriorities, I blurted out some snarky and mildly regrettable tweets on the lack of attention to climate change in the tech industry (Twitter being a sublime medium for the snarky and regrettable). Climate change is the problem of our time, it’s everyone’s problem, and most of our problem-solvers are assuming that someone else will solve it.

\n\n

I’m grateful to one problem-solver, who wrote to ask for specifics —

\n\n
\n\n\n\n
\n
Bret Victor @worrydream - Aug 11
Worrying about sentient AI as the ice caps melt is like standing on the tracks as the train rushes in, worrying about being hit by lightning
\n
Bret Victor @worrydream - Aug 12
If any \"founders\" out there want to \"disrupt\" our 401 ppm atmospheric CO2, or \"moonshot\" ocean acidification, that would be cool
\n
Bret Victor @worrydream - Aug 12
\"minimum viable planet\"
\n
\n\n
\n\n
“How do you think the tech community (startup community, or any community) can contribute to tech and/or policy solutions on a global scale?”
\n\n
\n\n

The notes below are my attempt to answer that question.

\n\n
\n\n

This is a “personal view”, biased by my experiences and idiosyncrasies. I’ve followed the climate situation for some time, including working on Al Gore’s book Our Choice, but I can’t hope to convey the full picture — just a sliver that’s visible from where I’m standing. I urge you to talk to many scientists and engineers involved in climate analysis and energy, and see for yourself what the needs are and how you can contribute.

\n\n

This is aimed at people in the tech industry, and is more about what you can do with your career than at a hackathon. I’m not going to discuss policy and regulation, although they’re no less important than technological innovation. A good way to think about it, via Saul Griffith, is that it’s the role of technologists to create options for policy-makers.

\n\n
\n\n
\n
everything that needs to be done about climate change
\n\n
\n\n
\n
what you’ll read about here
\n\n
\n\n
\n\n

I’m also only going to directly discuss technology related to the primary cause of climate change (the burning of fossil fuels), although there are technological needs related to other causes (livestock, deforestation, global poverty), as well as mitigating symptoms of climate change (droughts and storms, ecosystem damage, mass migrations).

\n\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n

Funding

\n\n
\n
\n\n

I won’t say much about this, but I can’t leave it out. Available funding sources, and the interests and attitudes of the funders, have always had an enormous effect on what technology comes to exist in the world. In a time of crisis, it’s the responsibility of those holding the capital to sponsor work on averting the crisis. That is not happening.

\n\n

Public investment

\n\n
\n\n
\n\n
\n\n
The primary source of public funding in the U.S. for “I’ve got a crazy new idea for energy” is ARPA-E. Last year it granted $280 million.
\n\n
Incremental innovation is supported by the DOE’s Office of Energy Efficiency & Renewable Energy, which has a $2 billion annual budget for a wide range of initiatives.
\n\n
The DOE also funds the national labs, which do a lot of energy research.
\n\n
The NSF’s Energy for Sustainability program gives out $18 million annually for academic research.
\n\n
Public funding can also be found at the state level, such as the California Energy Commission’s EPIC program, which has a $130 million annual budget.
\n\n
\n\n
\n\n
\n\n

Possibly the largest source of public funding is in the form of financing programs, such as loan guarantees and tax credits.

\n\n
\n[The U.S. energy loan program] literally kick-started the whole utility-scale photovoltaic industry... The program funded the first of five huge solar projects in the West... Before that, developers couldn’t get money from private lenders. But now, with proven business models, they can. (source)
\n\n
\n\n

It’s great that this funding exists, but let’s be clear — it’s a pittance. If we take Saul Griffith’s quote at face value and accept that addressing climate change will take a concerted global effort comparable to World War II, consider that the U.S. spent about $4 trillion in today’s dollars to “fight the enemy” at that time. Our present enemy is more threatening, and our financial commitment to the fight is several orders of magnitude off.

\n\n
(Naomi Klein) There is... no scenario in which we can avoid wartime levels of spending in the public sector — not if we are serious about preventing catastrophic levels of warming, and minimizing the destructive potential of the coming storms. (source)\n
\n\n

In the meantime, the fossil fuel industry is being subsidized at about half a trillion dollars a year.

\n\n

Public funding for clean energy is a problem to be solved. It’s not a technology problem. But it’s a blocker that prevents us from getting to the technology problems.

\n\n

Private investment

\n\n
\n\n
\n
U.S. military spending per year $610 billon\n(source)
\n\n
\n\n
\n
U.S. venture capital investment per year $48 billon\n(source)
\n\n
\n\n
\n
Office of Energy Efficiency & Renewable Energy budget $2 billon\n(source)
\n\n
\n\n
\n
ARPA-E budget $0.3 billon\n(source)
\n\n
\n\n
\n
NSF Energy for Sustainability budget $0.02 billon\n(source)
\n\n
\n\n\n
\n\n

You can read the story of the so-called “cleantech bubble”. In brief — between 2008 and 2011, about $15 billion of enthusiastic venture capital went into energy-related startups. There were a few major failures, investors got spooked, and cleantech became taboo.

\n\n

Late-stage venture funding has dwindled, and early-stage funding has all but disappeared. Founders spend their days scrounging instead of building. Consider the American energy storage company Primus Power, which had to raise its series C from a South African platinum company, and series D from Kazakhstan.

\n\n

The human race uses 18 terawatts, and will for the foreseeable future. So there are basically only two scenarios for investors as a collective:

\n\n
\n\n
\n
\n\n
\n\n
\n

(a) invest in clean energy immediately; clean energy takes over the $6 trillion global energy market; investors get a nice piece of that.

\n\n

(b) don’t invest in clean energy immediately; fossil fuels burn past our carbon budget; investors inherit a cinder.

\n
\n\n

Scenario (a) seems like the most rational plan for everyone, in the long term. The fact that most investors’ short-term incentives are structured to prefer scenario (b) is a critical problem to be solved. Again, it’s not a technology problem, but it’s a blocker that prevents us from getting to the technology problems.

\n\n
\n\n
\n
world carbon emissions (in GtCO2/yr) and carbon budget\n(source)
\n
\n
\n
\n
drag
\n
\n
\n\n\n
\n\n\n\n\n\n
\n

Producing Energy

\n\n
\n\n
\n \n
\n (source)\n
\n\n
\n\n

The primary cause of global warming is the dumping of carbon dioxide into the sky.

\n\n
\n\n
\n\n
\n\n

The primary cause of that is the burning of coal, natural gas, and petroleum in order to generate electricity and move vehicles around.

\n\n
\n\n
\n\n
\n\n

In order to stop dumping carbon dioxide into the sky, the world will have to generate its energy “cleanly”. For the purposes of this essay, that will mean mostly via solar and wind, although geothermal, hydroelectric, biomass, and nuclear will all have parts to play.

\n\n
\n\n

This is well-known, but the scale and rate of change required is often unappreciated. Saul Griffith has a good bit about this, suggesting that what’s needed is not throwing up a few solar panels, but a major industrial shift comparable to retooling for World War II.

\n\n

In 1940 through 1942, U.S. war-related industrial production tripled each year. That’s over twice as fast as Moore’s law.

\n\n
\n\n
\n
U.S. gross national product, WWII
(source)
\n
\n
\n\n
\n\n

In order to avoid the more catastrophic climate scenarios, global production and adoption of clean energy technology will have to scale at similar rates — but continuously for 15 years or more.

\n\n

The catalyst for such a scale-up will necessarily be political. But even with political will, it can’t happen without technology that’s capable of scaling, and economically viable at scale.

\n\n

As technologists, that’s where we come in.

\n\n
\n\n
\n
optimistic roadmap for 100% clean energy in U.S. by 2050, Mark Jacobson et al\n(source)
\n
\n
\n\n
\n\n

The stuff around the thing

\n\n
\n\n

Many people seem to assume that breakthoughs in clean energy will come in the form of new generation technology — fusion reactors, nanoscale solar cells, that sort of thing.

\n\n
\n\n
\n\n
\n\n
\n\n

Those will be good things to have! But there’s more than enough power available to today’s solar cells and wind turbines — if only the systems were cheaper, simpler, and scalable. Here are a few examples of the kinds of projects I find interesting:

\n\n
\n\n
\n\n
\n\n

Makani hoists its wind turbine to high altitudes with a flying wing instead of a tower.

\n\n
Makani’s energy kite actually operates on the same aerodynamic principles as a conventional wind turbine, but is able to replace tons of steel with lightweight electronics, advanced materials, and smart software. By using a flexible tether, energy kites eliminate 90% of the materials used in conventional wind turbines, resulting in lower costs. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

Altaeros uses a blimp.

\n\n
The Altaeros Buoyant Airborne Turbine reduces the second largest cost of wind energy – the installation and transport cost – by up to 90 percent, through a containerized deployment that does not require a tower, crane, or cement foundation. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

Sunfolding does solar tracking with pneumatically-actuated plastic soda bottles.

\n\n
Actuation and control are the highest cost components of today’s tracking systems. Together they account for nearly 50% of the tracking system cost. We replace both with our new approach to tracker design. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

These projects aren’t about better generators. They are about dramatically reducing the cost of the stuff around the generator.

\n\n
\n\n

Some of the best news of the last few years is the plunging cost of solar power. It’s instructive to look at what exactly is responsible for the drop. It’s partly cheaper solar panels, due to improved conversion efficiency and falling manufacturing costs. But panels are now so cheap that they only make up 25% of the total system cost.

\n\n
\n\n
\n
levelized cost of solar photovoltaic power ($/MWh)\n(source)
\n
\n
\n\n
\n\n

The majority of the price drop is now due to better inverters, and better mounting racks, and better installation techniques, and better ways for solar companies to interact with customers. There’s innovation everywhere, and you don’t need to be on the photovoltaic manufacturing line in order to play.

\n\n
\n\n
\n\n
\n\n

The reason that these reductions in system cost are potentially so significant is the tipping point once solar and wind are consistently cheaper than fossil fuels and can be scaled up to meet demand.

\n\n

My point here is that there are many ways of contributing toward innovation in the production of clean energy without going off and building a fusion reactor. Look at the stuff around the things.

\n\n

\n\n\n

Computation

\n\n

Even for something as physical as power generation, the right software can make a signficant contribution. A few examples that come to mind:

\n\n
\n\n

Kalyan Veeramachaneni et al at MIT used modern probabilistic modeling to dramatically improve the process of estimating wind capacity at a location, calculating more accurate predictions in a fraction of the time.

\n\n
We talked with people in the wind industry, and we found that they were using a very, very simplistic mechanism to estimate the wind resource at a site. (source)
\n\n

They didn’t invent a windmill; they invented an algorithm to determine where the windmill should go. It’s now a startup.

\n\n
\n\n
\n
KL divergence (wrongness) of wind estimates from ground truth\n(source)
\n\n
\n\n
\n\n

John Dabiri’s team at Caltech used aerodynamic analysis to dramatically improve the energy production and compactness of wind farms. Their work computes the optimal placement of vertical turbines so they reinforce each other instead of interfering, making possible large arrays of small turbines.

\n\n
\nThis approach dramatically extends the reach of wind energy, as smaller wind turbines can be installed in many places that larger systems cannot, especially in built environments. ...\nFavorable economics stem from an orders-of-magnitude reduction in the number of components in a new generation of simple, mass-manufacturable (even 3D-printable), vertical-axis wind turbines. (source)
\n\n

Again, they didn’t invent a new windmill; they used computational modeling to make viable a much smaller and cheaper existing windmill.

\n\n
\n\n
\n
footprint power density (watts extracted per square meter of land)\n(source)
\n\n
\n\n
\n\n

Makani and Sunfolding both sprung from Saul Griffith’s Otherlab, and much of Otherlab’s magic lies in their code. A common theme is replacing physical material with dynamic control systems:

\n\n
[Makani’s kite’s] computer system uses GPS and other sensors along with thousands of real-time calculations to guide the kite to the flight path with the strongest and steadiest winds for maximum energy generation. (source)
\n\n
\n(Saul Griffith) The really big themes I’d like to emphasize, because we need more people to join the club, so to speak, is the importance of being able to substitute a control system — sensors and computers — for actual materials... We are actually now replacing atoms with bits. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

as well as creating new software tools for design and manufacturing:

\n\n
\n\n

Griffith’s team had to write modeling software for the inflatables, because nobody had done anything like it before. But Otherlab creates its own software much of the time anyway. The 123D line of 3D modeling software offered by Autodesk grew out of one of his projects.

\n\n

“We write all of our own tools, no matter what project we’re building,” Griffith says. “Pretty much anything that we’re doing requires some sort of design tool that didn’t exist before. In fact, the design tools that we write to do the projects that we’re doing are a sort of product in and of themselves.” (source)

\n\n
\n\n
\n
123D Make
\n\n
\n\n
\n\n

My point here is that software isn’t just for drawing pixels and manipulating databases — it underlies a lot of the innovation even in physical technology. More on this below.

\n\n\n
\n\n\n\n\n\n
\n

Moving Energy

\n\n
\n
\n\n

I recently visited the California ISO, which orchestrates the power grid to match energy production with consumption in realtime. The ISO exists because every megawatt that is generated at a power plant must be immediately consumed somewhere else. There’s no buffer in the system, aside from a few reservoirs where they can occasionally pump water uphill.

\n\n
\n\n
\n\n
\n\n
\n\n

So they’ve evolved a complex apparatus for forecasting energy demand, and sending realtime price signals to producers to make them adjust their output as needed. This is becoming a formidable challenge as more and more intermittent (thus, unpredictable) renewables like solar and wind come online, and dirty and expensive peaker plants have to be ramped up or down on a moment’s notice to balance them out.

\n\n
\n\n
\n
California ISO supply and demand in gigawatts, on Oct 22, 2015\n(source)
\n
\n
\n\n
\n\n

Everything about today’s power grid, from this centralized control to the aging machinery performing transmission and distribution, is not suitable for clean energy. The power grid was designed to take input from a handful of tightly-regulated power plants running in synchrony, not millions of solar roofs. And it was designed for power plants that were always available and predictable, not intermittent sources like the sun and wind.

\n\n
\nIf everyone in Los Angeles put solar panels on their roofs, plugged electric cars into their garages and used smart power-meters today, something interesting would happen. The electric grid would collapse. (source)
\n\n

In order for clean energy to work, it needs to get from where and when it is generated, to where and when it needed. The “where” and “when” call for networking and storage, respectively.

\n\n
\n\n
\n
schematic of power grid in 1935, and also now (source)
\n
\n
\n\n
\n\n

Energy networking (moving energy in space)

\n\n
\n\n

The key idea that made the internet possible was the move from centralized circuit-switched networks to distributed packet-switching protocols, where data could “find its way” from sender to receiver.

\n\n

Now it’s energy that needs to find its way.

\n\n

The power network... will undergo the same kind of architectural transformation in the next decades that computing and the communication network has gone through in the last two.

\n
\n\n
\n\n\n\n
\n\n

We envision a future network with hundreds of millions of active endpoints. These are not merely passive loads as are most endpoints today, but endpoints that may generate, sense, compute, communicate, and actuate. They will create both a severe risk and a tremendous opportunity: an interconnected system of hundreds of millions of distributed energy resources (DERs) introducing rapid, large, and random fluctuations in power supply and demand...

\n

As infrastructure deployment progresses, the new bottleneck will be the need for overarching frameworks, foundational theories, and practical algorithms to manage a fully [data-centric] power network. (source)

\n
\n\n

This is an algorithms problem! It’s TCP/IP for energy. Think of these algorithms as hybrids of distributed networking protocols and financial trading algorithms — they are routing energy as well as participating in a market.

\n\n
\n\n\n\n
\n\n

TCP/IP spawned quite an industry of infrastructure and applications. It’s likely that something similar will happen as the smart grid gets underway. One DOE-funded project attempting to provide the infrastructure for such an industry is VOLTTRON, an “Intelligent Agent Platform for the Smart Grid”.\n\n

\n

VOLTTRON is an innovative distributed control and sensing software platform. Its source code has been released, making it possible for researchers and others to use this tool to build applications for more efficiently managing energy use among appliances and devices, including heating, ventilation and air conditioning (HVAC) systems, lighting, electric vehicles and others. (source)

\n\n
\n

VOLTTRON is not an application such as demand response – demand response can be implemented as an application on top of VOLTTRON.

\n

VOLTTRON is open, flexible and modular, and already benefits from community support and development. (source)

\n
\n\n

Protocols for moving data around were the big thing for a few decades. Then it was moving money around. The next big thing will be moving energy around.

\n\n
\n\n\n\n
\n\n

Energy storage (moving energy in time)

\n\n
\n\n

Relying on sun and wind is only possible if we can store up their energy for when it’s not sunny or windy. Many people assume that we’ll “just use batteries”, but the scale is off by a few orders of magnitude. All the batteries on earth can store less than ten minutes of the world’s energy. At currently anticipated growth rates, we wouldn’t have the batteries we need for eighty years.

\n\n

Grid-scale energy storage is perhaps the most critical technology problem in clean energy. When I visited the ISO, the operator was just about imploring us to invent better energy storage technologies, because they would change the game entirely.

\n\n
\n\n
\n
actual and required battery growth rates (power in terawatts, log scale)\n (source)
\n
\n
\n\n
\n\n
\n
\n \n

Tesla recently announced their home battery initiative, and a Gigafactory to produce them.

\n\n
\n\n\n

My friend Danielle Fong started LightSail Energy to store energy by compressing air with an engine.

\n\n
\n\n\n

There are various companies pursuing variations on batteries, compressors, flywheels, thermal storage, water pumps, and more.

\n
\n
\n\n
\n\n
\n\n

Particularly charming is Advanced Rail Energy Storage, whose proposal is

\n\n
using lower-cost power to drive a train uphill and then let the train roll downhill to produce power when market prices are high. (source)
\n\n
\n\n\n\n
\n\n

There’s also something delightful about the image of CALMAC’s IceBank®, Ice Energy’s Ice Bear®, and Axiom’s Refrigeration Battery™ battling it out in the arena of building-sized ice makers.

\n\n
IceBank is an air-conditioning solution that makes ice at night [when energy demand is low] to cool buildings during the day. (source)
\n\n
\n\n\n\n
\n\n

All this may make energy storage seem like a competitive space. But the reality is that these companies aren’t competing with each other so much as they are competing with peaker plants and cheap fossil fuels. An energy storage startup can be in the strange position of continually adjusting their product and strategy in response to fluctuations in fossil fuel prices.

\n\n

But as in the case of energy production, there should be a tipping point if storing and reclaiming renewable energy can be made decisively cheaper than generating it from natural gas, and can be scaled up to meet demand.

\n\n
\n\n
\n\n
\n\n
\n\n

The core technologies in energy storage tend to be physics-based, but software plays essential roles in the form of design tools, simulation tools, and control systems. My favorite example is the inexplicably gorgeous Materials Project, a database and visualization tool for material properties, funded by the Department of Energy’s Vehicle Technologies Program to help invent better batteries.\n \n

\n\n
\n\n
\n\n\n
\n\n\n\n\n\n
\n

Consuming Energy

\n\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n\n

Transportation (consuming what?)

\n\n
\n\n

To the right is how the U.S. currently generates energy. The most conspicuous source of carbon emissions is the thick green bar from “petroleum” to “transportation”. We need to erase that.

\n\n

While we’re at it, we also ought to erase the thick grey bar from “transportation” to “wasted”.

\n\n
\n\n
\n \n
\n (source)\n
\n\n
\n\n

Passenger vehicles account for the majority of transportation-related greenhouse gas emissions. There are a number of emerging ways to reduce this impact.

\n\n
\n\n
\n\n
\n\n
\n

Electric vehicles are inevitable. Today, powering a car from the grid might not be much cleaner than burning gasoline. But once the grid cleans up, not only will electric cars be cleaner than gas cars, they may be more efficient than mass transit.

\n
\n\n
\n\n
\n\n
\n \n
\n

New kinds of powered vehicles are becoming possible which are more nimble and efficient than cars.

\n
\n\n
\n\n
\n\n
\n\n
\n

Most trips people take are fairly short. It’s not inconceivable that new vehicles could replace cars for most trips if the technology, design, and marketing are right, and the proper infrastructure and laws are in place. And you don’t need to start a car company to work on them.

\n
\n\n
\n

Coordinated autonomous vehicles could lead to very different ways of moving around people and deliveries. This is basically mobile robotics on a big scale. And again, you don’t necessarily need to go work for a car company in order to make interesting things here.

\n
\n\n
\n\n
\n\n
\n\n
\n

Reducing the need for personal transportation via urban design. Among other reasons, this is important to counter the likely tendency of autonomous cars to increase urban sprawl, which has been strongly correlated with emissions.

\n
\n\n
\n\n\n\n
\n\n

Similar opportunities apply to fleet vehicles. One of the cofounders of Tesla is now in the business of electrifying Fedex vans and garbage trucks. Long-haul trucks are more of a challenge, but there’s room for improvement in fuels, vehicle design, and logistics.

\n\n

As for airplanes, people might just have to fly less. This will require better tools for remote collaboration, or in Saul Griffith’s words, “Make video conferencing not suck.”

\n\n
\n\n
\n\n\n
\n\n

Coordination (consuming when?)

\n\n
\n\n

Many home appliances that consume significant electricity — air conditioner, water heater, clothes dryer, electric vehicle charger — have some tolerance in when they actually need to run. You don’t care exactly when your electric car is charging as long as it’s charged in the morning, and you don’t care exactly when your water heater is heating, as long as the tank stays hot.

\n\n

If your water heater could talk to your neighbor’s water heater and agree to avoid heating water at the same time, it would flatten out the demand curve, and help avoid the ups and downs that must be serviced by peaker plants. The water heater could also work aggressively when solar power was plentiful and hold back when clouds went by, to match the intermittency of renewables and require less energy storage.

\n\n
\n\n
\n\n
\n\n

The Rocky Mountain Institute calls this “demand flexibility”, and imagines appliances coordinated through price signals.

\n\n
\nDemand flexibility uses communication and control technology to shift electricity use across hours of the day while delivering end-use services at the same or better quality but lower cost. It does this by applying automatic control to reshape a customer’s demand profile continuously in ways that either are invisible to or minimally affect the customer. (source)\n
\n\n

This sort of coordination is a goal of many of the “smart grid” proposals.

\n\n\n
\n\n
\n
example of load-shifting in response to price (usage in kW)\n (source)
\n
\n
\n\n\n
\n\n

Efficiency (consuming how much?)

\n\n
\n\n
\n
\n
\n
per capita electricity use in MWh\n (source)
\n
\n
\n

In the 1970s, efficiency pioneer Art Rosenfeld instigated an unprecedented program of energy saving, literally halting the growth of per-capita electricity consumption in California.

\n\n
\n\n
\n
energy savings in California in TWh\n (source)
\n
\n
\n

A lot of important technology came out of his lab, such as the ballasts that made compact florescent lamps viable, but his two biggest influences were regulatory. Half the energy savings in California came from adjusting the profit structure of power utilities so they could be profitable selling less power.

\n\n
\n\n
\n
energy consumption of new U.S. refrigerators in MWh/yr\n (source)
\n
\n
\n

The other half came from mandating energy usage standards for buildings and appliances. These standards, as well as more recent voluntary programs such as Energy Star, forced companies to compete on efficiency. This drove innovation (and even reduced cost!) far more than simple consumer preference.

\n\n
\n\n
\n\n
\n\n

Building standards are a particularly interesting case here, because they were, and are, intimately tied to software.

\n\n
\n\n
\n

(Art Rosenfeld) [In 1975] the CEC’s draft “Title 24” residential building standard proposed to limit window area to 15% of wall area, without distinguishing among north, south, east, and west. Indeed I don’t think the standard even mentioned the sun!

\n

I contacted the CEC and discovered why they thought that windows wasted heat in winter and “coolth” in summer. The CEC staff had a choice of only two public-domain computer programs, the “Post Office” program, which was user hostile... and a newer program [NBSLD]... They chose NBSLD, but unfortunately had run it in a “fixed-thermostat” mode that kept the conditioned space at 72°F (22°C) all year...

\n

NBSLD’s author, Tamami Kusuda, had written a “floating-temperature” option, but it was more complicated and still had bugs, and neither Tamami nor anybody at CEC could get it to work satisfactorily. No wonder the CEC concluded that windows wasted energy!

\n

I decided that California needed two programs for energy analysis in buildings: first and immediately, a simple program for the design of single-family dwellings and, second and later, a comprehensive program for the design of large buildings, with a floating-indoor-temperature option and the ability to simulate HVAC distribution systems... (source)

\n
\n\n
\n\n\n\n
\n\n

Rosenfeld’s energy-modeling software (which became DOE-2, then EnergyPlus) was quickly and widely adopted for calculating and specifying building performance standards.

\n\n
\n\n

Not only does energy simulation software still drive building standards, energy analysis tools such as Green Building Studio and OpenStudio are now an integral part of the building design process. Particularly interesting are tools such as Sefaira and Flux, which give the designer immediate feedback on energy performance as they adjust building parameters in realtime.

\n\n
\n\n
Sefaira
Flux
\n\n
\n\n

If efficiency incentives and tools have been effective for utilities, manufacturers, and designers, what about for end users? One concern I’ve always had is that most people have no idea where their energy goes, so any attempt to conserve is like optimizing a program without a profiler.

\n\n
\n\n
\n
\n \n

Efficiency through analytics has motivated a lot of projects, from the humble and niche Kill-A-Watt,

\n\n
\n \n

to the characteristically short-lived Google PowerMeter and Microsoft Hohm services.

\n\n
\n \n

There are online energy calculators, such as Berkeley Lab’s Home Energy Saver,

\n\n
\n \n

and energy dashboards are appearing in commercial and institutional buildings.

\n\n
\n\n\n
\n\n
\n\n

Many of these projects are unsuccessful and possibly only marginally effective. I don’t think this means that efficiency feedback will always be unsuccessful — just that it needs to be done well, it needs to be actionable, and most importantly, it needs to be targeted at people with the motivation and leverage to take significant action.

\n\n

Individual consumers and homeowners might not be the best targets. A more promising audience is people who manage large-scale systems and services.

\n\n
\n\n

For example, garbage collection. Garbage trucks stop-and-go down every street, in every city, at 3 miles per gallon. The startup Enevo makes sensors which trash collectors install in dumpsters, and provides logistics software that plans an optimal collection route each day. By only picking up full bins, they cut fuel consumption in half.

\n\n

Enevo works at the system level, not consumer level. There are fewer customers at system-level, but those customers have the motivation and leverage to implement heavy efficiency improvements.

\n\n
\n\n\n\n
\n\n\n\n\n\n
\n

Tools for Scientists & Engineers

\n\n
\n
\n\n

You won’t find programming languages mentioned in an IPCC report. Their influence is indirect; they get taken for granted. But I feel that technical tools are of overwhelming importance, and completely under the radar of most people working to address climate change.

\n\n\n
\n\n

Languages for technical computing

\n\n
\n\n

I was hanging out with climate scientists while working on Al Gore’s book, and they mostly did their thing in R. This is typical; most statistical research is done in R. The language seems to inspire a level of vitriol that’s impressive even by programmers’ standards. Even R’s advocates always seem sort of apologetic.

\n\n
\nUsing R is a bit akin to smoking. The beginning is difficult, one may get headaches and even gag the first few times. But in the long run, it becomes pleasurable and even addictive. Yet, deep down, for those willing to be honest, there is something not fully healthy in it. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

Complementary to R is Matlab, the primary language for numerical computing in many scientific and engineering fields. It’s ubiquitous. Matlab has been described as “the PHP of scientific computing”.

\n\n
\nMATLAB is not good. Do not use it. (source)
\n\n

R and Matlab are both forty years old, weighed down with forty years of cruft and bad design decisions. Scientists and engineers use them because they are the vernacular, and there are no better alternatives.

\n\n
\n\n
\n\n
\n\n
\n\n

Here’s an opinion you might not hear much — I feel that one effective approach to addressing climate change is contributing to the development of Julia. Julia is a modern technical language, intended to replace Matlab, R, SciPy, and C++ on the scientific workbench. It’s immature right now, but it has beautiful foundations, enthusiastic users, and a lot of potential.

\n\n

I say this despite the fact that my own work has been in much the opposite direction as Julia. Julia inherits the textual interaction of classic Matlab, SciPy and other children of the teletype — source code and command lines.

\n\n

The goal of my own research has been tools where scientists see what they’re doing in realtime, with immediate visual feedback and interactive exploration. I deeply believe that a sea change in invention and discovery is possible, once technologists are working in environments designed around:

\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
Interactive Exploration of a Dynamical System
\n
\n

ubiquitous visualization and in-context manipulation of the system being studied;

\n\n
\n\n
Up and Down the Ladder of Abstraction
\n
\n

actively exploring system behavior across multiple levels of abstraction in parallel;

\n\n
\n\n
Multitrack Signal Processing
\n
\n

visually investigating system behavior by transforming, measuring, searching, abstracting;

\n\n
\n\n
\n\n
Inventing on Principle
\n
\n

seeing the values of all system variables, all at once, in context;

\n\n
\n\n
Media for Thinking the Unthinkable
\n
\n

dynamic notations that embed simulation, and show the effects of parameter changes;

\n\n
\n\n
Drawing Dynamic Visualizations
\n
\n

visually improvising special-purpose dynamic visualizations as needed.

\n\n
\n\n\n
\n\n
\n\n

Obviously I think this approach is important, and I urge you to pursue it if it speaks to you.

\n\n
\n\n

At the same time, I’m also happy to endorse Julia because, well, it’s just about the only example of well-grounded academic research in technical computing. It’s the craziest thing. I’ve been following the programming language community for a decade, I’ve spoken at SPLASH and POPL and Strange Loop, and it’s only slightly an unfair generalization to say that almost every programming language researcher is working on

\n\n

\n(a) languages and methods for software developers,
\n(b) languages for novices or end-users,
\n(c) implementation of compilers or runtimes, or
\n(d) theoretical considerations, often of type systems.\n

\n\n

The very concept of a “programming language” originated with languages for scientists — now such languages aren’t even part of the discussion! Yet they remain the tools by which humanity understands the world and builds a better one.

\n\n

If we can provide our climate scientists and energy engineers with a civilized computing environment, I believe it will make a very significant difference. But not one that is easily visible or measured!

\n\n
\n\n
\n
(a) sampling of “languages and methods for software developers” at SPLASH 2015\n(source)
\n
\nRust: Idioms and Design Patterns
\nFunctional Reactive Programming with nothing but Promises
\nProposal for an Object-Oriented Multiple Dispatch Mechanism
\nLogical Reactive Programming
\nReal-Time Deadlines in Functional-Reactive Programming
\nBeyond Bash: Shell scripting in a statically-typed, object-oriented language
\n
\n\n
\n
(b) sampling of “languages for novices or end-users” at SPLASH 2015\n(source)
\n
\nThe Spreadsheet Paradigm: A Basis for Powerful and Accessible Programming
\nModel, Execute, Deploy: Answering the Hard Questions about End-user Programming
\nLanguage-Oriented Business Applications: Helping End Users become Programmers
\nActiveSheets: Stream Processing with a Spreadsheet
\nThe Gamma: Programming tools for data journalism
\nAn end-user programming environment that’s cell-based and copy/paste friendly
\n
\n\n
\n
(c) sampling of “implementation of compilers or runtimes” at SPLASH 2015\n(source)
\n
\nAkka.js: Towards a portable actor runtime environment
\nCLOP: A multi-stage compiler to seamlessly embed heterogeneous code
\nLanguage Independent Storage Strategies for Tracing JIT based VMs
\nJava-to-JavaScript Translation via Structured Control Flow Reconstruction of Compiler IR
\nRuntime Pointer Disambiguation
\nOptimizing Hash-Array Mapped Tries for Fast and Lean Immutable JVM Collections
\n
\n\n
\n
(d) sampling of “theoretical considerations” at SPLASH 2015\n(source)
\n
\nA Formal Foundation for Trace-Based JIT Compilers
\nA Formalization of Typed Lua
\nGradual Certified Programming in Coq
\nRelational Algebra by way of Adjunctions
\nA Co-Contextual Formulation of Type Rules and its Application to Incremental Type Checking
\nActario: A Framework for Reasoning About Actor Systems
\n
\n\n\n
\n\n

Languages for modeling physical systems

\n\n
\n\n

A climate model is software, but it’s a different kind of software than what most developers normally think about. Software development usually means developing software systems — code that does useful work “as itself”, such as apps and servers and games. The purpose of a climate model, on the other hand, is to “be something else” — to simulate a physical system in the world.

\n\n
\n\n\n\n
\n\n

A circuit model or mechanical model, these days, is essentially software as well. But again, such a model is not intended to serve as a working software system, but to aid in the design of a working physical system.

\n\n
\n\n\n\n
\n\n

Here are a handful of languages intended for modeling, simulating, or designing physical systems:

\n\n
\n\n
\n
Mathematica — symbolic manipulation and solving
\n
\n
\n
Simulink — continuous-time dynamic systems
\n
\n
\n
Modelica — mechanical, electrical, etc systems
\n
\n
\n\n
\n
Verilog-AMS — analog and mixed-signal electronics
\n
\n
\n
Esterel — reactive control systems
\n
\n
\n
SBOL — synthetic biology systems
\n
\n
\n \n\n
\n\n

Languages like these don’t get mentioned at programming language research conferences, or in discussions. They’re typically dismissed as “domain-specific”. This pejorative reflects a peculiar geocentrism of the programming language community, whose “general-purpose languages” such as Java and Python are in fact very much domain-specific — specific to the domain of software development.

\n\n
\n\n

Modelica is a programming language, but it is not a language for software development! It’s for developing physical things that affect the physical world — such as the machinery that participates in energy production, energy storage, and energy consumption. Data flow in Modelica works like no general-purpose language in existence, because it’s designed around how things influence things in physics, not on a CPU.

\n\n
\n\n\n\n
\n\n

I’ve seen enormous effort expended on languages, tools, and frameworks for software developers. If you believe that language design can significantly affect the quality of software systems, then it should follow that language design can also affect the quality of energy systems. And if the quality of such energy systems will, in turn, affect the livability of our planet, then it’s critical that the language development community give modeling languages the attention they deserve.

\n\n
\n\n\n\n\n
\n\n

Languages for controlling physical systems

\n\n
\n\n

An embedded control system is software, but again, it’s a different kind of software. Conventional software development is about building systems that live in a virtual world of pixels, files, databases, networks. The embedded controller is part of a physical system, sensing and actuating the physical world.

\n\n

Every modern piece of equipment producing or consuming energy — every wind turbine, battery system, or vehicle — is built around one or more of these control systems.

\n\n
\n\n
\n
\n
\n\n
\n\n

I started my career designing embedded systems. Standard practice is: you design and perhaps simulate your system in Matlab or Simulink or pencil. You implement it in C. Sometimes C++, sometimes assembly, very occasionally someone will sneak some Forth or Lua in there. But the idea that you might implement a control system in an environment designed for designing control systems — it hasn’t been part of the thinking. This leads to long feedback loops, inflexible designs, and guesswork engineering. But most critically, it denies engineers the sort of exploratory environment that fosters novel ideas.

\n\n
\n\n
\n\n
\n\n
\n\n

There exist methodologies with the right intentions — model-based design with generated code seems to be coming into use here and there on industrial projects, for example. But not only are such methods deeply segregated from the mainstream tech community, they are almost antithetical to how today’s programmers are trained to think.

\n\n
Lessons Learned [from Caterpillar’s pilot project]: Developers who have primarily a control system design background adopt the model-based approach with enthusiasm. Developers with primarily Computer Science backgrounds are uncomfortable with model-based development and require significantly more time and information prior to adopting the methodology. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

The success of Arduino has had the perhaps retrograde effect of convincing an entire generation that the way to sense and actuate the physical world is through imperative method calls in C++, shuffling bits and writing to ports, instead of in an environment designed around signal processing, control theory, and rapid and visible exploration. As a result, software engineers find a fluid, responsive programming experience on the screen, and a crude and clumsy programming experience in the world. It’s easier to conjure up virtual fireworks than to blink an LED. So more and more of our engineers have retreated into the screen.

\n\n
\n\n
\n\n
\n\n
\n\n

But climate change happens in the physical world. The technology to address it must operate on the physical world. We won’t get that technology without good tools for programming beyond the screen.

\n\n
\n\n

Tools for problem-finding

\n\n

The tools discussed so far are for scientists and engineers working on a problem. But let’s back up. How can someone find the right problem to work on in the first place? And how can they evaluate whether they have the right ideas to solve it?

\n\n

Tools for discovering problems

\n\n

Everyone knows the high-level areas that need work: ”clean energy”, “carbon capture”, and so on. But real engineering problems lie in the details — how to quickly estimate wind capacity at a location; how to place windmills without aerodynamic interference; how to store energy in compressed air without losing it through heat.

\n\n

How do we surface these problems? How can an eager technologist find their way to sub-problems within other people’s projects where they might have a relevant idea? How can they be exposed to process problems common across many projects?

\n\n
\n\n

I know a clean-energy inventor who will browse around a treemap of global exports, as a crude way to get a feel for the “space of industry”. She’ll see, for example, “gas turbines”, and get interested in ideas for improved gas turbines. But then what? Where does she go from there?

\n\n

She wishes she could simply click on “gas turbines”, and explore the space:

\n\n

\nWhat are open problems in the field?
\nWho’s working on which projects?
\nWhat are the fringe ideas?
\nWhat are the process bottlenecks?
\nWhat dominates cost? What limits adoption?
\nWhy make improvements here? How would the world benefit?\n

\n\n

None of this information is at her fingertips. Most isn’t even openly available — companies boast about successes, not roadblocks. For each topic, she would have to spend weeks tracking down and meeting with industry insiders. What she’d like is a tool that lets her skim across entire fields, browsing problems and discovering where she could be most useful.

\n\n

There are many reasons, of course, why organizations tend not to publicize their problems. But in a planetary crisis, the “secretive competitive company” might not be the ideal organizing structure for human effort. In an admirable gesture of global goodwill, Tesla recently “open-sourced” their patents, but patents represent solutions. What if there were some way Tesla could reveal their open problems?

\n\n
\n\n
\n
exports from anywhere to anywhere, Observatory of Economic Complexity (source)
\n\n
\n\n\n
\n\n

Tools for evaluating ideas

\n\n

Suppose my friend uncovers an interesting problem in gas turbines, and comes up with an idea for an improvement. Now what?

\n\n

\nIs the improvement significant?
\nIs the solution technically feasible?
\nHow much would the solution cost to produce?
\nHow much would it need to cost to be viable?
\nWho would use it? What are their needs?
\nWhat metrics are even relevant?\n

\n\n
\n \n

Again, none of this information is at her fingertips, or even accessible. She’d have to spend weeks doing an analysis, tracking down relevant data, getting price quotes, talking to industry insiders.*

\n\n

What she’d like are tools for quickly estimating the answers to these questions, so she can fluidly explore the space of possibilities and identify ideas that have some hope of being important, feasible, and viable.

\n\n
\n\n
\n

* And that’s assuming she can even find the right people to talk to! For some valuable inventions, such as thermal energy storage for supermarkets and electric powertrains for garbage trucks, one wonders how the inventors stumbled upon such a niche application in the first place.

\n\n

In the case of garbage trucks, the answer is that the technology was developed for a different purpose, and the customer had to figure it out themselves:

\n\n
\nFedEx was the first customer, and we did the medium-duty trucks first. Once we got some publicity with that, I got a call from one of the local garbage service providers... “This looks like it would work great for delivery trucks, [but] can you scale that up to my Class 8 garbage trucks? Will that work?” We said, we hadn’t thought of that, but let’s go do the engineering and see if it will. In fact, it does, and it works really well. (source)
\n\n
\n\n
\n\n

Consider the Plethora on-demand manufacturing service, which shows the mechanical designer an instant price quote, directly inside the CAD software, as they design a part in real-time. In what other ways could inventors be given rapid feedback while exploring ideas?

\n\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n
\n

Media for Understanding Situations

\n\n
\n\n
\n\n

Model-driven debate

\n\n
\n\n

In 2008, economist Alan Blinder published A Modest Proposal: Eco-Friendly Stimulus in the New York Times, proposing a government program to encourage people to scrap their old inefficient cars.

\n\n
Cash for Clunkers is a generic name for a variety of programs under which the government buys up some of the oldest, most polluting vehicles and scraps them... We can reduce pollution by pulling some of these wrecks off the road. Several pilot programs have found that doing so is a cost-effective way to reduce emissions. (source)
\n\n
\n\n\n\n
\n\n

His article inspired the Car Allowance Rebate System, a $3 billion federal program which ran in July 2009. Car owners were offered a $3500 rebate for trading in an inefficient vehicle when purchasing a more efficient one. There was enormous debate, before and after, about what the parameters of the program should be, and whether it would be effective. Proponents claimed:

\n\n
“Cash for clunkers” is a common-sense proposal that will... reduce the emissions that cause climate change, and make America more energy independent. By helping Americans trade in their old, less fuel efficient cars and trucks for newer, higher mileage vehicles, consumers will save money at the pump, help protect our planet, and create and save jobs for American auto workers. (source)
\n \n
\n\n\n\n
\n\n

while critics claimed:

\n\n
Although the program was originally billed as a way to reduce greenhouse gases, it achieves this aim amid huge expense and massive inefficiencies. Cash for Clunkers may diminish our nation’s overall carbon footprint, but the associated costs will be at least 10 times higher than other carbon-reduction strategies. (source)
\n\n

Who to believe?

\n\n

The real question is — why are readers and decision-makers forced to “believe” anything at all? Many claims made during the debate offered no numbers to back them up. Claims with numbers rarely provided context to interpret those numbers. And never — never! — were readers shown the calculations behind any numbers. Readers had to make up their minds on the basis of hand-waving, rhetoric, bombast.

\n\n

Imagine if Blinder’s proposal in the New York Times were written like this:

\n\n
\n\n
\n

Say we allocate\n\nfor the following program: Car-owners who trade in an old car that gets less than \n,\nand purchase a new car that gets better than \n,\nwill receive a \n\nrebate.

\n\n

We estimate that this will get\n old cars off the road. It will save\n of gas (or\n worth of U.S. gas consumption.) \nIt will avoid \n CO2e, or \n of annual U.S. greenhouse gas emissions.\n

\n\n

The abatement cost is per ton CO2e of federal spending, although it’s per ton CO2e on balance if you account for the money saved by consumers buying less gas.

\n
\n\n

This passage gives some estimates of what the proposal would actually do. But there’s something more going on. Some numbers above are in green. Drag green numbers to adjust them. (Really, do it!) Notice how the consequences of your adjustments are reflected immediately in the following paragraph. The reader can explore alternative scenarios, understand the tradeoffs involved, and come to an informed conclusion about whether any such proposal could be a good decision.

\n\n

This is possible because the author is not just publishing words. The author has provided a model — a set of formulas and algorithms that calculate the consequences of a given scenario. Some numbers above are in blue. a blue number to reveal how it was calculated. (“It will save ” is a particularly meaty calculation.) Notice how the model’s assumptions are clearly visible, and can even be adjusted by the reader.

\n\n

Readers are thus encouraged to examine and critique the model. If they disagree, they can modify it into a competing model with their own preferred assumptions, and use it to argue for their position. Model-driven material can be used as grounds for an informed debate about assumptions and tradeoffs.

\n\n

Modeling leads naturally from the particular to the general. Instead of seeing an individual proposal as “right or wrong”, “bad or good”, people can see it as one point in a large space of possibilities. By exploring the model, they come to understand the landscape of that space, and are in a position to invent better ideas for all the proposals to come. Model-driven material can serve as a kind of enhanced imagination.

\n\n
\n\n
\n
\n\n
\n\n

Climate change is a global problem. Discussion and debate will be central to figuring out the best actions to take. We need good tools for imagining, proposing, debating, and understanding these actions.

\n\n
\n\n
The importance of models may need to be underscored in this age of “big data” and “data mining”. Data, no matter how big, can only tell you what happened in the past. Unless you’re a historian, you actually care about the future — what will happen, what could happen, what would happen if you did this or that. Exploring these questions will always require models. Let’s get over “big data” — it’s time for “big modeling”.
\n\n\n
\n\n\n

Model-driven reading

\n\n

How do we get public perception and public discussion of energy and climate centered around evidence-grounded models, instead of tips, soundbites, factoids, and emotional rhetoric?

\n\n

Or — are you really saving the earth by turning off your lights at night? By how much? How do you know?

\n\n
\n\n

This is something I struggled with in Ten Brighter Ideas and Explorable Explanations, among other projects.

\n\n
\n

(Ten Brighter Ideas) As with many areas of public interest, the common wisdom surrounding energy conservation consists of myths and legends, rules of thumb and superstitions. We’re given guidelines as soundbites, catchy but insubstantial. We trust them blindly, not knowing whether our actions make any significant impact...

\n\n

As you explore this document, imagine a world where we expect every claim to be accompanied by an explorable analysis, and every statistic to be linked to a primary source. Imagine collecting data and designing analyses in a collaborative wiki-like manner. (source)

\n
\n\n
\n\n
\n\n
\n\n
\n\n

Imagine a concerned citizen who does a web search for \"what can I do about climate change\". The top two results as I write this are the EPA’s What You Can Do and the David Suzuki Foundation’s Top 10 ways you can stop climate change.

\n\n
\n\n
\n\n
\n\n

These are lists of proverbs. Little action items, mostly dequantified, entirely decontextualized. How significant is it to “eat wisely” and “trim your waste”? How does it compare to other sources of harm? How does it fit into the big picture? How many people would have to participate in order for there to be appreciable impact? How do you know that these aren’t token actions to assauge guilt?

\n\n
\n\n

And why trust them? Their rhetoric is catchy, but so is the horrific “denialist” rhetoric from the Cato Institute and similar. When the discussion is at the level of “trust me, I’m a scientist” and “look at the poor polar bears”, it becomes a matter of emotional appeal and faith, a form of religion.

\n\n
\n\n
\n
look at this polar bear
look at this science
\n
\n\n
\n\n

Climate change is too important for us to operate on faith. Citizens need and deserve reading material which shows context — how significant suggested actions are in the big picture — and which embeds models — formulas and algorithms which calculate that significance, for different scenarios, from primary-source data and explicit assumptions.

\n\n\n
\n\n

Model-driven authoring

\n\n

Why doesn’t such material exist? Why isn’t every paragraph in the New York Times written like this?

\n\n

One reason is that the resources for creating this material don’t exist. In order for model-driven material to become the norm, authors will need data, models, tools, and standards.

\n\n\n
\n\n

Data

\n\n
\n\n

Ten Brighter Ideas is embarrassingly incomplete. I had to give up after three analyses because it was too painful to find the data I needed. I was spending days desperately typing words into search engines, crawling around government websites, and scrolling through PDFs. (This was before data.gov, which I’ve since found to be more disappointing than useful.)

\n\n

I assumed the pros had some better process, but later on Our Choice, I found myself watching Al Gore’s research team and climate scientist friends as they typed words into search engines, crawled around government websites, and scrolled through PDFs.*

\n\n
\n\n
\n
my eyes are bleeding
\n\n
\n\n

* Although sometimes they could type words into password-protected search engines to scroll through PDFs that weren’t freely available, despite being products of scholarly research performed with public funds. I don’t have to talk here about the desperate need for open-access scientific publication, right? That’s well-trod ground?

\n\n
\n\n

Models

\n\n

If data is hard to find, models are virtually impossible.

\n\n
\n

What’s a formula for estimating the power consumption of a home’s lighting?

\n

What’s an algorithm that models the activity pattern of a water heater? Or a thermostat?

\n

What’s an equation for how methane emissions would vary with meat consumption?

\n

If a given country were to reduce deforestation by a given amount, how would that affect how much carbon it sinks?

\n

How do you quantify “eating wisely” and “trimming your waste”? And how do you calculate the effects as those quantities change?

\n
\n\n
\n\n

People have figured out these things! The formulas exist in Excel spreadsheets and Matlab code, buried on old hard drives somewhere. Sometimes they’re vaguely described in prose in published papers. But they aren’t accessible — they’re difficult to find, and generally impossible to “grab and use”. The rare author will be able to make up their own models; most authors have no choice but to trust and regurgitate soundbites.

\n\n

What if there were an “npm” for scientific models?

\n\n
\n\n
\n
what if you could “npm install residential-lighting-energy-model”
\n
\nvar lighting = require(’residential-lighting-energy-model’);
\n
\nvar energyPerYear = lighting.getEnergyPerYear({
\n    zipCode: 94110,
\n    houseSize: "small",
\n    occupants: 3,
\n    fluorescentFraction: 0.75,
\n});
\n
\n// energyPerYear should actually be a probability distribution,
\n// not a number, but that’s an essay for another time
\n\n
\n
\n\n
\n\n

Tools

\n\n

Suppose there were good access to good data and good models. How would an author write a document incorporating them?

\n\n
\n\n

Today, even the most modern writing tools are designed around typing in words, not facts. These tools are suitable for promoting preconceived ideas, but provide no help in ensuring that words reflect reality, or any plausible model of reality. They encourage authors to fool themselves, and fool others.

\n\n
(Richard Feynman) The first principle is that you must not fool yourself — and you are the easiest person to fool. (source)
\n\n
\n\n
\n\n
\n\n
\n\n

Imagine an authoring tool designed for arguing from evidence. I don’t mean merely juxtaposing a document and reference material, but literally “autocompleting” sourced facts directly into the document. Perhaps the tool would have built-in connections to fact databases and model repositories, not unlike the built-in spelling dictionary. What if it were as easy to insert facts, data, and models as it is to insert emoji and cat photos?

\n\n
\n\n
\n\t\n
\n
\n \n
\n
play
again
\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n

Furthermore, the point of embedding a model is that the reader can explore scenarios within the context of the document. This requires tools for authoring “dynamic documents” — documents whose contents change as the reader explores the model. Such tools are pretty much non-existent.

\n\n

The examples above use Tangle, a little library I made as a bootstrapping step. It’s far from the goal of a real dynamic authoring tool. What might such a tool look like? Some sort of fusion of word processor and spreadsheet? An Inform-like environment for composing dynamic text?

\n\n
\n\n
\n
what is the “Microsoft Word” for something like this?
\n\n
\n\n
\n\n

Literacy and standards

\n\n

The initial proposals I sketched for Our Choice were interactive graphics with scenario models, where readers could adjust parameters (e.g. pollution rate) and see the estimated effects. The book editors rejected these, immediately.

\n

The reason was that every number in the text required a citation. This was especially a concern for Al Gore, whose readership includes an aggressive contingent meticulously seeking proof of his deceptive fabrications. For the book’s integrity, every number in the book must have appeared previously in a scientific paper. An interactive graphic which generated its own numbers from an algorithm was unpublishable — even if it used the same algorithm that the scientists themselves used.

\n\n

A commitment to sourcing every fact is laudible, of course. What’s missing is an understanding of citing and publishing models, not just the data derived from those models. This is a new problem — older media couldn’t generate data on their own. Authors will need to figure out journalistic standards around model citation, and readers will need to become literate in how to “read” a model and understand its limitations.

\n\n\n
\n\n\n\n\n\n
\n

Also This

\n\n
\n
\n\n

Other technology

\n\n
\n\n

Nuclear power

\n\n

I didn’t mention nuclear because I don’t know much about it. See Stewart Brand’s book Whole Earth Discipline for an optimistic take from a recent convert. (Ironically published five months before Fukushima, but his points still stand.)

\n\n
\n\n

Geoengineering

\n\n

“Geoengineering” refers to “the deliberate large-scale intervention in the earth’s natural systems to counteract climate change”. The topic was taboo for many years, and it remains “controversial” (a euphemism for “socially risky to advocate”). As a result, the amount of research into geoengineering is almost negligible compared to R&D on decarbonization.

\n\n
\n\n

This is unfortunate, because if total global decarbonization by 2050 doesn’t succeed, we’ll be desperately wishing for some well-developed backup plans. And even if, by some miracle, it does, we’ll still have 450-500 ppm of carbon in the atmosphere, not going anywhere, still wreaking havoc.

\n\n

Geoengineering is dicey because earth systems are complex and poorly understood, and interventions have unforseen consequences. To me, this is a clear and urgent call for much better tools for understanding complex systems and forseeing consequences.

\n\n

There is almost certainly some set of things we can do at planet-scale that would be effective and safe. It is almost certainly the case that the best options are ideas that no one has thought of yet. Who will make the tools to enable people to conceive and verify these ideas?

\n\n
\n\n
\n
atmospheric CO2 concentration in ppmv (source)
\n
\n
\n\n
\n\n

Fears of geoengineering play into the narrative of a people done in by their hubris. But we’re past that point; we had the hubris and it did us in. Human beings now dominate the planet, and it’s folly to pretend that merely “minimizing our impact” will reverse the damage.

\n\n

In 1968, Stewart Brand began the Whole Earth Catalog with the quip, “We are as gods, and might as well get good at it.” In 2009, his Whole Earth Discipline upped the urgency: “We are as gods, and have to get good at it.”

\n\n

If we must be gods, we should at least be cautious and well-informed gods, with the best possible tools for seeing, understanding, and debating our interventions, and the best possible meta-tools for improving those tools.

\n\n
\n\n
\n
portion of land-dwelling vertebrates that humans are responsible for, by mass (source)
\n
\n
\n\n
\n\n

Foundational technology

\n\n
\n\n

The inventors of the integrated circuit were not thinking about how to preserve the environment. Neither were the founders of the internet. (Maybe except one.) Today, it’s nearly impossible to imagine addressing global problems (or even reading this essay) without all the tools that have been built upon this technology.

\n\n
\n\n
\n
first integrated circuit
first internet
\n
\n\n
\n\n

Foundational technology appears essential only in retrospect. Looking forward, these things have the character of “unknown unknowns” — they are rarely sought out (or funded!) as a solution to any specific problem. They appear out of the blue, initially seem niche, and eventually become relevant to everything.

\n\n

They may be hard to predict, but they have some common characteristics. One is that they scale well. Integrated circuits and the internet both scaled their “basic idea” from a dozen elements to a billion. Another is that they are purpose-agnostic. They are “material” or “infrastructure”, not applications.

\n\n
\n\n
\n
percent of U.S. population using the internet\n(source)
\n
\n
\n\n
\n\n

I have some candidates in mind; here’s one I’d put money on — Van Jacobson’s new internet protocol is a really big deal. I realize it sounds like overreach to claim that “Named Data Networking” could be fundamental to addressing climate change — that’s my point — but my thought is, how could it not?\n

\n\n\n
\n\n

Morale

\n\n

Climate change, closely understood, is terrifying. The natural human response to such a bleak situation is despair.

\n\n

But despair is not useful. Despair is paralysis, and there’s work to be done.

\n\n

I feel that this is an essential psychological problem to be solved, and one that I’ve never seen mentioned: How do we create the conditions under which scientists and engineers can do great creative work without succumbing to despair? And how can new people be encouraged to take up the problem, when their instinct is to turn away and work on something that lets them sleep at night?

\n\n

Crisis can be motivating for some people in some circumstances — Rad Lab, Manhattan Project, etc. — and there are clearly some people who draw motivation from the climate crisis. But as George Marshall has explored in depth, most people can’t handle it, and need to put it out of their minds.

\n\n

There are other fields of human endeavor in which morale must be managed quite directly, and they’ve had millenia to develop techniques for “rallying the troops” or “uplifting the congregation”. I wonder if we can learn from them. For both the climate worker and the soldier, the likelihood of imminent annihilation is a distraction, and they must be given a frame of mind that lets them concentrate on the work to be done.

\n\n\n\n
\n\n

The world is not what you see

\n\n

Mikey Dickerson, an engineer who left Google to head up the heroic rescue of healthcare.gov, concluded a recent talk with a plea to the tech crowd:

\n\n
\n\n
\n

This is real life. This is your country... Our country is a place where we allocate our resources through the collective decisions that all of us make... We allocate our resources to the point where we have thousands of engineers working on things like picture-sharing apps, when we’ve already got dozens of picture-sharing apps.

\n\n

We do not allocate anybody to problems like [identity theft of kids in foster care, food stamp distribution, the immigration process, federal pensions, the VA]... This is just a handful of things that I’ve been asked to staff in the last week or so and do not have adequate staff to do...

\n\n

These are all problems that need the attention of people like you. (source)

\n
\n\n

100,000 people received an engineering bachelor’s degree in the U.S. last year. There are at least 100,000 people, every year, looking for an engineering problem to solve. I have my own plea to all such people —\n

\n\n
\n\n
\n\n
\n\n
\n\n
The inconveniences of daily life are not the significant problems.
The world that scrolls past you on Twitter is not the real world.
You cannot calibrate your sense of what’s valuable and necessary to the current fashions in your field.
\n\n
\n\n

One sometimes gets the feeling, as Ian Bogost put it, of rearranging app icons on the Titanic. I think the tech community can do better than that. You can do better than that.

\n\n

Climate change is the problem of our time. It’s everyone’s problem, but it’s our responsibility — as people with the incomparable leverage of being able to work magic through technology.

\n\n

In this essay, I’ve tried to sketch out a map of where such magic is needed — systems for producing, moving, and consuming clean energy; tools for building them; media for understanding what needs to be built. There are opportunities everywhere. Let’s get to work.

\n\n\n
\n\n

Further reading

\n\n
\n\n
\n\n
\n
\n
the plea
\n
\n \n
Bill Gates
\n
Innovating to Zero
\n
\n \n
Danielle Fong
\n
A Time for Urgency
\n
\n
\n
the situation
\n
\n \n
Encyclopedia of Earth
\n
\n
\n \n
Saul Griffith
\n
Climate Change Recalculated
\n
\n
\n\n
\n
\n
energy
\n
\n \n
David MacKay
\n
Without the Hot Air
\n
\n \n
Art Rosenfeld
\n
The Art of Energy Efficiency
\n
\n
\n
technology
\n
\n \n
Stewart Brand
\n
Whole Earth Discipline
\n
\n \n
Al Gore
\n
Our Choice
\n
\n
\n\n
\n
\n
business
\n
\n \n
Amory Lovins
\n
Reinventing Fire
\n
\n \n
Ramez Naam
\n
The Infinite Resource
\n
\n \n
Daniel Yergin
\n
The Quest
\n
\n
\n
psychology
\n
\n \n
George Marshall
\n
Don’t Even Think About It
\n
\n
\n\n
\n\n\n
\n\n\n\n\n\n
\n
\n\n
\n\n

“It’s more complicated than that.” No kidding. You could nail a list of caveats to any sentence in this essay. But the complexity of these problems is no excuse for inaction. It’s an invitation to read more, learn more, come to understand the situation, figure out what you can build, and go build it. That’s why this essay has 400 hyperlinks. It’s meant as a jumping-off point. Jump off it.

\n\n

There’s one overarching caveat. This essay employed the rhetoric of “problem-solving” throughout. I was trained as an engineer; engineers solve problems. But, at least for the next century, the “problem” of climate change will not be “solved” — it can only be “managed”. This is a long game. One more reason to be thinking about tools, infrastructure, and foundations. The next generation has some hard work ahead of them.

\n\n

So much thanks to Danielle Fong, Paula Te, Patrick Collison, Robert Ochshorn, and Joe Edelman for their help with this essay. Thanks to Mike Bauerly for asking the question.

\n\n
\n\n
\n
\n\n\n" }, { "path": "style.css", "content": "* { margin:0; padding:0; }\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* fonts */\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('Fonts/sourcesanspro-bold-webfont.eot');\n src: url('Fonts/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),\n url('Fonts/sourcesanspro-bold-webfont.woff') format('woff'),\n url('Fonts/sourcesanspro-bold-webfont.ttf') format('truetype'),\n url('Fonts/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('Fonts/sourcesanspro-boldit-webfont.eot');\n src: url('Fonts/sourcesanspro-boldit-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/sourcesanspro-boldit-webfont.woff2') format('woff2'),\n url('Fonts/sourcesanspro-boldit-webfont.woff') format('woff'),\n url('Fonts/sourcesanspro-boldit-webfont.ttf') format('truetype'),\n url('Fonts/sourcesanspro-boldit-webfont.svg#source_sans_probold_italic') format('svg');\n font-weight: bold;\n font-style: italic;\n}\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('Fonts/sourcesanspro-it-webfont.eot');\n src: url('Fonts/sourcesanspro-it-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/sourcesanspro-it-webfont.woff2') format('woff2'),\n url('Fonts/sourcesanspro-it-webfont.woff') format('woff'),\n url('Fonts/sourcesanspro-it-webfont.ttf') format('truetype'),\n url('Fonts/sourcesanspro-it-webfont.svg#source_sans_proitalic') format('svg');\n font-weight: normal;\n font-style: italic;\n}\n\n@font-face {\n font-family: 'Source Sans Pro';\n src: url('Fonts/sourcesanspro-regular-webfont.eot');\n src: url('Fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),\n url('Fonts/sourcesanspro-regular-webfont.woff') format('woff'),\n url('Fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),\n url('Fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'fake_receiptregular';\n src: url('Fonts/fake_receipt-webfont.eot');\n src: url('Fonts/fake_receipt-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/fake_receipt-webfont.woff2') format('woff2'),\n url('Fonts/fake_receipt-webfont.woff') format('woff'),\n url('Fonts/fake_receipt-webfont.ttf') format('truetype'),\n url('Fonts/fake_receipt-webfont.svg#fake_receiptregular') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'hcm';\n src: url('Fonts/hcm-webfont.eot');\n src: url('Fonts/hcm-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/hcm-webfont.woff2') format('woff2'),\n url('Fonts/hcm-webfont.woff') format('woff'),\n url('Fonts/hcm-webfont.ttf') format('truetype'),\n url('Fonts/hcm-webfont.svg#helvetica_condensedmedium') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'hcb';\n src: url('Fonts/hcb-webfont.eot');\n src: url('Fonts/hcb-webfont.eot?#iefix') format('embedded-opentype'),\n url('Fonts/hcb-webfont.woff2') format('woff2'),\n url('Fonts/hcb-webfont.woff') format('woff'),\n url('Fonts/hcb-webfont.ttf') format('truetype'),\n url('Fonts/hcb-webfont.svg#helvetica_condensedbold') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* body */\n\nbody {\n background: #fff;\n font: normal 15px/1.5 \"Source Sans Pro\", sans-serif;\n color: #2e2e2e;\n width:100%;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* page header */\n\n.header {\n position:relative;\n width: 100%;\n height:100vh;\n background-color: black;\n background-image: url(Images/00-page-header.jpg);\n background-position: 50% 0%;\n background-repeat:no-repeat;\n margin-bottom:30px;\n}\n\n@media (max-height:680px) {\n .header { height:680px; }\n}\n@media (min-height:950px) {\n .header { height:760px; }\n}\n@media print {\n .header { height:760px; }\n}\n\n.header-quote-block {\n position:absolute;\n top:50px;\n width: 100%;\n\n color: rgba(180,201,241,0.9);\n color: #fff;\n font-style:italic;\n line-height:1.4;\n text-align: justify;\n}\n\n.header-quotes {\n width:940px;\n margin-left:auto;\n margin-right:auto;\n}\n\n.header-quotes div {\n margin-left: 536px;\n}\n\n.header-quotes div.who {\n margin-top:8px;\n text-align:right;\n}\n\n.header-quotes div.two {\n margin-top:18px;\n}\n\n.header-quotes div.who2 {\n margin-top:-8px;\n text-align:right;\n}\n\n.header-quotes b {\n color:#fff;\n}\n\n.header-plain {\n display:none;\n}\n\n.header-title-block {\n position:absolute;\n bottom:42px;\n width:100%;\n}\n\n.header-titles {\n position:relative;\n width:940px;\n margin-left:auto;\n margin-right:auto;\n}\n\n.header-title-selflink {\n position:absolute;\n width:88px;\n height:30px;\n top:88px;\n left:354px;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* page footer */\n\n.footer {\n position:relative;\n width: 100%;\n background-color: #111;\n border-top: 1px solid #000;\n margin-bottom:0;\n color: #999;\n font-size:12px;\n line-height:1.2;\n padding-top:20px;\n padding-bottom:15px;\n}\n\n.footer-content {\n margin-left:94px;\n width:481px;\n text-align:justify;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* chapter */\n\n.chapter {\n position:relative;\n width: 940px;\n margin-left:auto;\n margin-right:auto;\n}\n\n.row {\n position:relative;\n width: 940px;\n}\n\n.column-left {\n display: inline-block;\n width: 470px;\n text-align: justify;\n vertical-align:top;\n}\n\n.column-right {\n display: inline-block;\n margin-left: 30px;\n width: 440px;\n vertical-align:top;\n margin-bottom: 20px;\n}\n\n.column-right .floaty {\n position:absolute;\n z-index:1;\n}\n\n.column-right img {\n display:block;\n}\n\n.column-right svg {\n display:block;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* headings */\n\nh2 {\n display:none;\n}\n\nh3 {\n font: inherit;\n font-weight: bold;\n margin-top:26px;\n margin-bottom:12px;\n color: #fff;\n background-color: #444;\n padding-left:10px;\n margin-left:-10px;\n margin-right:-10px;\n padding-top:6px;\n padding-bottom:4px;\n}\n\nh3 a {\n color:inherit;\n font:inherit;\n}\n\nh3 a:hover {\n color:inherit;\n}\n\nh3 span {\n color: #ddd;\n font-weight:normal;\n font-style:italic;\n margin-left:4px;\n}\n\nh4 {\n font: inherit;\n font-weight: bold;\n margin-top:14px;\n margin-bottom:12px;\n color: #000;\n}\n\n.indent {\n margin-left: 20px;\n}\n\n.big-quote {\n font: italic 20px/1.25 \"Source Sans Pro\", sans-serif;\n width: 398px;\n padding: 20px;\n border-top: 1px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n margin-left: auto;\n margin-right:auto;\n margin-top: 24px;\n margin-bottom: 38px;\n padding-left: 0.4em;\n text-indent:-0.4em;\n}\n\n.coda-quote {\n position:relative;\n left:-8px;\n font: italic 20px/1.3 \"Source Sans Pro\", sans-serif;\n width: 534px;\n padding: 20px;\n border-top: 1px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n margin-left: auto;\n margin-right:auto;\n margin-top: 16px;\n margin-bottom: 32px;\n padding-left: 0.4em;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* toc */\n\n#toc-template {\n display:none;\n}\n\n.toc {\n position:relative;\n margin-top:120px;\n margin-bottom:26px;\n text-align:left;\n min-height:251px;\n}\n\n.toc-background {\n position:absolute;\n width: 100%;\n height: 83px;\n border-top: 3px solid #000;\n background-color: #f2f2f2;\n}\n\n.top-stripe {\n position:absolute;\n width: 100%;\n height:1px;\n top:4px;\n background-color: #000;\n}\n\n.toc-contents {\n position:relative;\n width: 960px;\n margin-left:auto;\n margin-right:auto;\n}\n\n.toc-chapter {\n display: inline-block;\n vertical-align:top;\n width: 0px;\n min-height: 240px;\n padding-left:10px;\n padding-right:5px;\n}\n\n.toc-active {\n background-color:#fff;\n border-left: 1px solid #888;\n border-right: 1px solid #888;\n}\n\n.toc-funding { width:120px; }\n.toc-production { width:130px; }\n.toc-moving { width:105px; }\n.toc-consumption { width:120px; }\n.toc-tools { width:139px;}\n.toc-media { width:161px;}\n.toc-coda { width:78px;}\n\n.toc-chapter-name {\n display: block;\n text-decoration: none;\n font: normal 18px/1.0 \"fake_receiptregular\", sans-serif;\n color: #c3c3c3;\n min-height: 79px;\n margin-top: 19px;\n}\n\n.toc-section-name {\n display:block;\n text-decoration: none;\n color: #d6d6d6;\n font: bold 13px/1.2 \"Source Sans Pro\", sans-serif;\n margin-bottom: 12px;\n}\n\n.toc-section-name span {\n color: #d6d6d6;\n font-weight:normal;\n font-style:italic;\n}\n\n.toc-chapter-name:hover, .toc-section-name:hover { text-decoration:none; }\n.toc-active .toc-chapter-name:hover, .toc-active .toc-section-name:hover { text-decoration:underline; }\n\n.toc-chapter-name:hover { color: #00c0ff; }\n.toc-active .toc-chapter-name { color: #00c0ff; }\n\n.toc-section-name:hover { color: #666; }\n.toc-active .toc-section-name { color: #333; }\n\n.toc-section-name:hover span { color: #999; }\n.toc-active .toc-section-name span { color: #999; }\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* bibliography */\n\n.biblio {\n position:relative;\n text-align:left;\n margin-top:15px;\n margin-left:95px;\n margin-bottom:40px;\n}\n\n.biblio-row {\n margin-bottom:30px;\n}\n\n.biblio-group {\n display:inline-block;\n vertical-align:top;\n margin-right:40px;\n}\n\n.biblio-group:last-child {\n margin-right:0;\n}\n\n.biblio-group-title {\n font: 16px \"hcm\", sans-serif;\n color: #69aac8;\n margin-bottom:5px;\n}\n\n.biblio-group-contents {\n}\n\n.biblio-item {\n display:inline-block;\n vertical-align:top;\n margin-right:7px;\n}\n\n.biblio-item:last-child {\n margin-right:0;\n}\n\n.biblio-item img {\n display:block;\n margin-left:-1px;\n}\n\n.biblio-author {\n font: 13px \"hcm\", sans-serif;\n color: #666;\n margin-top:4px;\n}\n\n.biblio-title {\n font: 13px \"hcm\", sans-serif;\n color: #a8a8a8;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* figures */\n\n.figure {\n margin-top:4px;\n}\n\n.figure-caption {\n color: #69aac8;\n font: 13px \"hcm\", sans-serif;\n text-align: left;\n margin-bottom:2px;\n}\n\n.figure .figure-caption:first-child {\n margin-top:-2px;\n}\n\n.script.figure {\n margin-top:2px;\n}\n\n.script.figure .figure-caption:first-child {\n margin-top:0px;\n}\n\n.figure-caption .amount {\n color: #acacac;\n font: 11px \"hcm\", sans-serif;\n float:right;\n margin-right:1px; \n margin-top:2px;\n}\n\n.figure-caption .comment {\n color: #acacac;\n font: 11px \"hcm\", sans-serif;\n}\n\n.figure span.cite {\n position:absolute;\n display:none;\n}\n\n.figure:hover span.cite {\n display:inline;\n}\n\nbody.touch-device .figure span.cite {\n display:inline;\n}\n\n.figure.hold-cite span.cite {\n display:inline;\n}\n\n.figure-caption.with-icon span.cite {\n margin-top:7px;\n}\n\n.figure span.cite a {\n font-size:11px;\n color: #aaa;\n margin-left:0.4em;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* side notes */\n\n.side-note {\n width: 430px;\n font: normal 12px/1.4 \"Source Sans Pro\", sans-serif;\n color: #999;\n}\n\n.side-note p {\n margin-bottom:9px;\n}\n\n.side-note p:first-child {\n text-indent:-0.6em;\n}\n\n.side-note blockquote {\n color: #999;\n margin-left:10px;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* blockquote */\n\nblockquote {\n margin-bottom:12px;\n margin-left:20px;\n color: #666;\n font-style:italic;\n}\n\nblockquote .author {\n color: #bbb;\n}\n\nblockquote b {\n color: #555;\n}\n\nblockquote span.cite {\n position:absolute;\n display:none;\n}\n\nblockquote:hover span.cite {\n display:inline;\n}\n\nbody.touch-device blockquote span.cite {\n display:inline;\n}\n\nblockquote span.cite a {\n font-size:12px;\n margin-left:0.4em;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* link previews */\n\n.link-preview {\n position:absolute;\n left:495px;\n z-index:10;\n box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.7);\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* tangle */\n\n#clunker-calculations .calculation {\n display:none;\n}\n\n.TKCursorDragHorizontal {\n\tcursor: pointer;\n\tcursor: move;\n\tcursor: col-resize !important;\n}\n\n.TKCursorDrag {\n\tcursor: pointer;\n\tcursor: move;\n}\n\n.adjustable-number-example {\n color: #0dbe04;\n}\n.adjustable-number {\n color: #0dbe04;\n white-space:nowrap;\n}\n.adjustable-number.hovering {\n background-color: #e4ffed;\n color: #0cb304;\n}\n.adjustable-number.dragging {\n background-color: #66c563;\n color: #fff;\n}\n\n.calculated-result-example {\n color: #2695fd;\n}\n.calculated-result {\n color: #2695fd;\n cursor:pointer;\n white-space:nowrap;\n}\n.calculated-result.hovering {\n background-color: #e1eef3;\n}\n.calculated-result.locked {\n background-color: #4eabff;\n color: #fff;\n}\n.calculated-result.locked.hovering {\n background-color: #529cdf;\n}\n\n.calculation-help {\n\tdisplay:none;\n\tposition:absolute;\n text-align:right;\n padding-top:1px;\n width:80px;\n\tleft:-80px;\n\tcolor: #bbb;\n\tfont: 11px/1.2 \"hcm\", sans-serif;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* analyses */\n\n.analysis {\n margin-top:10px;\n font: normal 13px/1.7 \"Source Sans Pro\", sans-serif;\n width:490px;\n}\n\n.analysis .line {\n}\n\n.analysis .line.expression {\n}\n\n.analysis .comment {\n font: normal 12px/1.1 \"Source Sans Pro\", sans-serif;\n font-style: italic;\n color: #999;\n}\n\n.analysis .spacer-1 {\n width:440px;\n height:10px;\n}\n\n.analysis .spacer-2 {\n width:440px;\n height:15px;\n}\n\n.analysis .separator {\n margin-top: 20px;\n margin-bottom: 20px;\n width: 440px;\n height: 1px;\n border-bottom: 1px solid #ddd;\n}\n\n.analysis .distribution {\n position:relative;\n display:inline-block;\n vertical-align:top;\n margin-top:2px;\n}\n\n.analysis .distribution .comment {\n margin-top:2px;\n}\n\n.analysis .distribution .label {\n position:absolute;\n display:none;\n top:20px;\n width:50px;\n font: normal 12px/1.1 \"Source Sans Pro\", sans-serif;\n color: #999;\n text-align:center;\n}\n\n.analysis .distribution .bars {\n height:18px;\n}\n\n.analysis .distribution .bar {\n display: inline-block;\n position: relative;\n background-color: #f4f4f4;\n width: 5px;\n height: 18px;\n border-right: solid 1px #fff; /* no gaps between hover */\n}\n\n.analysis .distribution .bar.selected {\n background-color: #e3f6fe;\n}\n\n.analysis .distribution .bar:hover {\n background-color: #ffe1ca;\n}\n\n.analysis .distribution .bar .fill {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 5px;\n background-color: #ccc;\n}\n\n.analysis .distribution .bar.selected .fill {\n background-color: #53a7e8;\n}\n\n.analysis .distribution .bar:hover .fill {\n background-color: #fd7e10;\n}\n\n.analysis .token {\n display:inline-block;\n text-align:center;\n\n line-height:1.0;\n padding-left:8px;\n padding-right:8px;\n padding-top:2px;\n padding-bottom:1px;\n\n border-radius:20px;\n border: 1px solid #85abbd;\n background-color: #91b9cc;\n color: #fff;\n cursor: default;\n}\n\n.analysis .token.hovering {\n background-color: #5f9bb6;\n border-color: #6a828e;\n}\n\n.analysis .token.dummy {\n visibility:hidden;\n}\n\n.analysis-cars_traded .token.lhs { min-width:66px; }\n.analysis-gallons_saved .token.lhs { min-width:135px; }\n.analysis-hours_of_gas .token.lhs { min-width:160px; }\n.analysis-tons_CO2e_saved .token.lhs { min-width:118px; }\n.analysis-percent_annual_emissions .token.lhs { min-width:140px; }\n.analysis-dollars_per_ton_CO2e .token.lhs { min-width:112px; }\n.analysis-dollars_per_ton_CO2e_on_balance .token.lhs { min-width:175px; }\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* carbon budget */\n\n.carbon-budget-knob {\n position:absolute;\n width:40px;\n height:40px;\n background-image: url(Images/01-carbon-budget-knob.png);\n background-size: 100%;\n margin-top:-20px;\n margin-left:-20px;\n}\n\n.carbon-budget-knob.dragging {\n background-image: url(Images/01-carbon-budget-knob-down.png);\n}\n\n.carbon-budget-knob-help {\n position:absolute;\n font: 11px \"hcm\", sans-serif;\n color: #bbb;\n left:422px;\n top:-30px;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* autocomplete video */\n\n.autocomplete-video {\n position:relative;\n margin-left:70px;\n width:800px;\n height:180px;\n margin-top:10px;\n margin-bottom:25px;\n border: 1px solid #eee;\n}\n\n.videoChrome {\n display: none;\n position: absolute;\n top: 0px;\n left: 0px;\n pointer-events: none;\n}\n\n.marker {\n position:absolute;\n top: 0px;\n left:-50px;\n width: 45px;\n height: inherit;\n/* background-color: #008ebd;*/\n cursor: pointer;\n pointer-events: auto;\n}\n\n.markerProgressCanvas {\n display:none;\n position:absolute;\n bottom: -2px;\n left:17px;\n width: 24px;\n height: 24px;\n pointer-events: none;\n}\n\n.markerProgressOverlay {\n display:none;\n position:absolute;\n bottom: -3px;\n left:17px;\n width: 24px;\n height: 25px;\n background-image: url(Images/StyleVideoProgressPie.png);\n pointer-events: none;\n opacity:0.2;\n}\n\n.markerPlayAgain {\n display:none;\n position:absolute;\n font: bold 11px/1.0 \"Helvetica Neue\", \"Arial\", sans-serif;\n text-align: right;\n right: 2px;\n width: inherit;\n bottom: 0px;\n pointer-events: none;\n color: rgba(0,0,0,0.3);\n}\n\n.videoDarken {\n position: absolute;\n top:0px;\n left:0px;\n width: inherit;\n height: inherit;\n background-color: transparent;\n pointer-events: auto;\n cursor: pointer;\n}\n\n.videoOverlay {\n position: absolute;\n top:0px;\n left:0px;\n border: 1px solid rgba(0,0,0,0.14);\n pointer-events: none;\n\n background-image: url(Images/StyleVideoOverlay.png);\n background-repeat: no-repeat;\n -moz-background-size: 100% 100%;\n -webkit-background-size: 100% 100%;\n background-size: 100% 100%;\n}\n\n.videoPlayButton {\n position: absolute;\n width: 78px;\n height:79px;\n background-image: url(Images/StyleVideoPlayButton.png);\n pointer-events: none;\n}\n\n.videoPlayButton.verbose {\n height: 90px;\n background-image: url(Images/StyleVideoPlayButtonVerbose.png);\n}\n\n.videoClickToPlay {\n width:inherit;\n margin-left: auto;\n margin-right: auto;\n width: 140px;\n height: 41px;\n background-image: url(Images/StyleVideoClickToPlay.png);\n pointer-events: none;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* special layouts */\n\n.code {\n font: 11px monospace;\n border: 1px solid #e2e2e2;\n padding:10px;\n background-color: #fcfcfc;\n}\n\n.inline {\n display:inline-block;\n vertical-align:top;\n margin-right:20px;\n}\n.inline:last-child {\n margin-right:0px;\n}\n\n.splash-list {\n font: 11px \"hcm\", sans-serif;\n color: #888;\n margin-bottom:14px;\n}\n\n\n/* framed-langs */\n\n.framed-langs {\n text-align:left; \n font: 13px \"hcm\", sans-serif;\n width:940px;\n margin-bottom:14px;\n}\n\n.framed-lang {\n display:inline-block;\n vertical-align:top;\n margin-right:10px;\n width:306px;\n}\n\n.framed-lang:last-child {\n margin-right:0;\n}\n\n.framed-lang div:first-child {\n color: #bbb;\n margin-bottom:2px;\n}\n\n.framed-lang img {\n display: inline;\n width: 304px;\n height: 140px;\n border: 1px solid #ccc;\n color:#ccc;\n}\n\n\n/* public-structure */\n\n.public-structure-captions {\n margin-top:-178px;\n position:relative;\n width:940px;\n height:158px;\n}\n\n.public-structure-caption {\n position:absolute;\n top:0px;\n text-align:left;\n line-height:1.4;\n}\n\n\n/* proverbs */\n\n.proverbs {\n width:940px;\n margin-top:0px;\n margin-bottom:20px;\n}\n\n.proverbs-item-1 {\n display:inline-block;\n margin-left:151px;\n margin-right:30px;\n}\n\n.proverbs-item-2 {\n display:inline-block;\n}\n\n\n/* model-icons */\n\n.model-icons {\n margin-left:68px;\n}\n\n.model-icons img {\n display:block;\n position:absolute;\n left:0px;\n}\n\n\n/* grid-4 */\n\n.grid-4 {\n width:940px;\n margin-top:10px;\n margin-bottom:15px;\n}\n\n.grid-4-item {\n display:inline-block;\n width:227px;\n text-align:left;\n line-height:1.4;\n vertical-align:top;\n margin-right:10px;\n}\n\n.grid-4-item p {\n padding-right:3px;\n}\n\n.grid-4-item:last-child {\n margin-right:0;\n}\n\n.grid-4-item p {\n margin-top:5px;\n}\n\n\n/* grid-3 */\n\n.grid-3 {\n width:940px;\n margin-top:15px;\n margin-bottom:20px;\n}\n\n.grid-3-item {\n display:inline-block;\n width:300px;\n text-align:left;\n line-height:1.4;\n vertical-align:top;\n margin-right:20px;\n}\n\n.grid-3-item:last-child {\n margin-right:0;\n}\n\n\n/* dynamic-tools */\n\n.dynamic-tools {\n width:940px;\n margin-top:15px;\n margin-bottom:20px;\n}\n\n.dynamic-tools-item {\n display:inline-block;\n width:306px;\n text-align:left;\n line-height:1.4;\n vertical-align:top;\n margin-right:11px;\n}\n\n.dynamic-tools-item:last-child {\n margin-right:0;\n}\n\n.dynamic-tools-item .figure-caption {\n display:none;\n margin-bottom:3px;\n}\n\n.dynamic-tools-thumbnail {\n margin-bottom:5px;\n}\n\n.dynamic-tools-thumbnail .border {\n position:absolute;\n box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.2);\n width:306px;\n height:170px;\n z-index:2;\n}\n\n.dynamic-tools-thumbnail:hover .border {\n box-shadow:inset 0px 0px 0px 1px #69aac8;\n}\n\n.dynamic-tools-thumbnail img {\n display:block;\n position:absolute;\n z-index:1;\n}\n\n.dynamic-tools-thumbnail video {\n display:block;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* print */\n\n@media print {\n .toc { page-break-before:always; }\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* generic */\n\np {\n margin-bottom:12px;\n}\n\npre {\n margin-bottom:12px;\n}\n\nstrong {\n font-weight:bold;\n color: #f00;\n}\n\n.urgent {\n color: #f00;\n}\n\nb {\n font-weight:bold;\n color: #000;\n}\n\na { \n text-decoration:none; \n font-weight:normal;\n color: #2695fd; \n border:none;\n}\n\na:hover {\n text-decoration:underline;\n color: #00baff;\n}\n\nsup, sub { /* prevent sub from affecting line height */\n vertical-align: baseline;\n position: relative;\n top: -0.25em;\n}\nsub { top: 0.25em; }\n\nimg { \n border:none;\n}\n\nul {\n margin-left:22px;\n margin-bottom: 12px;\n}\n\nol {\n margin-left:22px;\n margin-bottom: 12px;\n}\n\nli {\n margin-bottom:8px;\n}\n\n\n/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */ \n/* svg */\n\nsvg text {\n font: 11px \"hcm\", sans-serif;\n}\n\n.public-structure text {\n font: 12px \"hcb\", sans-serif;\n}\n\n.chart {\n display:block;\n}\n\n.chart rect {\n fill: #7cd3f5;\n}\n\n.chart rect.segment0 { fill: #7cd3f5; }\n.chart rect.segment1 { fill: #3499e4; }\n.chart rect.segment2 { fill: #7cd3f5; }\n.chart rect.segment3 { fill: #3499e4; }\n.chart rect.segment4 { fill: #7cd3f5; }\n.chart rect.segment5 { fill: #3499e4; }\n.chart rect.segment6 { fill: #7cd3f5; }\n\n.chart rect.transportation { fill:#ffd44b; }\n.chart rect.manufacturing { fill:#ff9c00; }\n.chart rect.residential { fill:#e24800; }\n.chart rect.commercial { fill:#b30300; }\n\n.chart text.title {\n fill: #69aac8;\n font: 13px \"hcm\", sans-serif;\n text-anchor: start;\n}\n\n.chart text.label {\n fill: #acacac;\n font: 11px \"hcm\", sans-serif;\n text-anchor: start;\n}\n\n.chart text.stack-caption {\n text-anchor: middle;\n}\n\n.chart text.amount {\n fill: #6a6a6a;\n font: 11px \"hcm\", sans-serif;\n text-anchor: end;\n}\n\n.chart text.annotation {\n fill: #acacac;\n font: 11px \"hcm\", sans-serif;\n text-anchor: start;\n}\n\n" } ]