{"id":0,"registry":{"0":{"shape":{"__isSmartRef__":true,"id":1},"submorphs":[],"scripts":[],"_ClipMode":"visible","derivationIds":["AB2CD9B1-B8A7-488A-8677-EF55AEBC35C7","E6003058-4623-47B9-84B3-2455E1235474","9668B417-0690-4B52-8E2F-8024C3EEF8DD"],"id":"947F0AB2-E2E5-44F1-BC34-480B220A8931","droppingEnabled":true,"halosEnabled":true,"_StyleClassNames":["Morph","HtmlWrapperMorph","selectable"],"name":"d3BarChart","eventHandler":{"__isSmartRef__":true,"id":2},"layout":{"__isSmartRef__":true,"id":3},"showsHalos":false,"isBeingDragged":false,"prevScroll":[0,0],"_StyleSheet":{"__isSmartRef__":true,"id":4},"canvasId":"d3-9668B41706904B528E2F8024C3EEF8DD","partsBinMetaInfo":{"__isSmartRef__":true,"id":25},"data":[{"__isSmartRef__":true,"id":29},{"__isSmartRef__":true,"id":30},{"__isSmartRef__":true,"id":31},{"__isSmartRef__":true,"id":32},{"__isSmartRef__":true,"id":33},{"__isSmartRef__":true,"id":34},{"__isSmartRef__":true,"id":35},{"__isSmartRef__":true,"id":36},{"__isSmartRef__":true,"id":37},{"__isSmartRef__":true,"id":38},{"__isSmartRef__":true,"id":39}],"__serializedExpressions__":["_Position","distanceToDragEvent"],"_Rotation":0,"_Scale":1,"__serializedLivelyClosures__":{"__isSmartRef__":true,"id":40},"__LivelyClassName__":"lively.morphic.HtmlWrapperMorph","__SourceModuleName__":"Global.lively.morphic.AdditionalMorphs","_Position":"lively.pt(0.0,0.0)","distanceToDragEvent":"lively.pt(356.0,-11.0)"},"1":{"_BorderWidth":0,"stringifiedShapeNode":"<div xmlns=\"http://www.w3.org/1999/xhtml\" data-lively-morphid=\"947F0AB2-E2E5-44F1-BC34-480B220A8931\" class=\"Morph HtmlWrapperMorph selectable\" id=\"null\" style=\"overflow: visible; border: 0px solid rgb(95, 94, 95); padding: 0px; width: 534px; height: 409px; position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255);\"><div id=\"d3-9668B41706904B528E2F8024C3EEF8DD\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"534\" height=\"409\"><g transform=\"translate(35,30)\"><g class=\"x axis\" transform=\"translate(0,329)\"><g class=\"tick\" transform=\"translate(0,0)\" style=\"opacity: 1;\"><line y2=\"-329\" x2=\"0\"/><text y=\"3\" x=\"0\" dy=\".71em\" style=\"text-anchor: middle;\">00:00</text></g><g class=\"tick\" transform=\"translate(234.5,0)\" style=\"opacity: 1;\"><line y2=\"-329\" x2=\"0\"/><text y=\"3\" x=\"0\" dy=\".71em\" style=\"text-anchor: middle;\">00:00</text></g><g class=\"tick\" transform=\"translate(469,0)\" style=\"opacity: 1;\"><line y2=\"-329\" x2=\"0\"/><text y=\"3\" x=\"0\" dy=\".71em\" style=\"text-anchor: middle;\">00:00</text></g><path class=\"domain\" d=\"M0,-329V0H469V-329\"/></g><g class=\"y axis\"><g class=\"tick\" transform=\"translate(0,329)\" style=\"opacity: 1;\"><line x2=\"-6\" y2=\"0\"/><text x=\"-9\" y=\"0\" dy=\".32em\" style=\"text-anchor: end;\">0</text></g><g class=\"tick\" transform=\"translate(0,211.5)\" style=\"opacity: 1;\"><line x2=\"-6\" y2=\"0\"/><text x=\"-9\" y=\"0\" dy=\".32em\" style=\"text-anchor: end;\">50</text></g><g class=\"tick\" transform=\"translate(0,94)\" style=\"opacity: 1;\"><line x2=\"-6\" y2=\"0\"/><text x=\"-9\" y=\"0\" dy=\".32em\" style=\"text-anchor: end;\">100</text></g><path class=\"domain\" d=\"M-6,0H0V329H-6\"/></g><rect x=\"5\" y=\"94.91429059149363\" width=\"37.63636363636363\" height=\"234.08570940850637\" fill=\"teal\"/><rect x=\"47.63636363636363\" y=\"18.45871282239068\" width=\"37.63636363636363\" height=\"310.5412871776093\" fill=\"teal\"/><rect x=\"90.27272727272727\" y=\"107.02949621541825\" width=\"37.63636363636363\" height=\"221.97050378458175\" fill=\"teal\"/><rect x=\"132.9090909090909\" y=\"157.8568955627537\" width=\"37.63636363636363\" height=\"171.1431044372463\" fill=\"teal\"/><rect x=\"175.54545454545453\" y=\"44.3466118205439\" width=\"37.63636363636363\" height=\"284.6533881794561\" fill=\"teal\"/><rect x=\"218.18181818181816\" y=\"108.86525138768977\" width=\"37.63636363636363\" height=\"220.13474861231023\" fill=\"teal\"/><rect x=\"260.8181818181818\" y=\"134.49698642906392\" width=\"37.63636363636363\" height=\"194.50301357093608\" fill=\"teal\"/><rect x=\"303.45454545454544\" y=\"101.62288700997604\" width=\"37.63636363636363\" height=\"227.37711299002396\" fill=\"teal\"/><rect x=\"346.09090909090907\" y=\"115.38064078796126\" width=\"37.63636363636363\" height=\"213.61935921203874\" fill=\"teal\"/><rect x=\"388.7272727272727\" y=\"75.3447556281076\" width=\"37.63636363636363\" height=\"253.6552443718924\" fill=\"teal\"/><rect x=\"431.3636363636363\" y=\"96.26360673704019\" width=\"37.63636363636363\" height=\"232.7363932629598\" fill=\"teal\"/></g></svg></div></div>","__serializedExpressions__":["_Padding","_BorderColor","_Fill","_Position","_Extent","extent"],"__LivelyClassName__":"lively.morphic.Shapes.External","__SourceModuleName__":"Global.lively.morphic.Shapes","_Padding":"lively.rect(0,0,0,0)","_BorderColor":"Color.rgb(95,94,95)","_Fill":"Color.rgb(255,255,255)","_Position":"lively.pt(0.0,0.0)","_Extent":"lively.pt(534.0,409.0)","extent":"lively.pt(534.0,409.0)"},"2":{"morph":{"__isSmartRef__":true,"id":0},"__LivelyClassName__":"lively.morphic.EventHandler","__SourceModuleName__":"Global.lively.morphic.Events"},"3":{"resizeWidth":true,"resizeHeight":true},"4":{"rules":[{"__isSmartRef__":true,"id":5},{"__isSmartRef__":true,"id":8},{"__isSmartRef__":true,"id":12},{"__isSmartRef__":true,"id":14},{"__isSmartRef__":true,"id":18},{"__isSmartRef__":true,"id":20},{"__isSmartRef__":true,"id":22}],"originMorph":{"__isSmartRef__":true,"id":0},"__LivelyClassName__":"lively.morphic.StyleSheet","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"5":{"declarations":[{"__isSmartRef__":true,"id":6},{"__isSmartRef__":true,"id":7}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"6":{"values":["10px","sans-serif"],"rule":{"__isSmartRef__":true,"id":5},"property":"font","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"7":{"values":["0"],"rule":{"__isSmartRef__":true,"id":5},"property":"margin","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"8":{"declarations":[{"__isSmartRef__":true,"id":9},{"__isSmartRef__":true,"id":10},{"__isSmartRef__":true,"id":11}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph path.line","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"9":{"values":["none"],"rule":{"__isSmartRef__":true,"id":8},"property":"fill","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"10":{"values":["#666"],"rule":{"__isSmartRef__":true,"id":8},"property":"stroke","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"11":{"values":["1.5px"],"rule":{"__isSmartRef__":true,"id":8},"property":"stroke-width","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"12":{"declarations":[{"__isSmartRef__":true,"id":13}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph .axis","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"13":{"values":["crispEdges"],"rule":{"__isSmartRef__":true,"id":12},"property":"shape-rendering","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"14":{"declarations":[{"__isSmartRef__":true,"id":15},{"__isSmartRef__":true,"id":16},{"__isSmartRef__":true,"id":17}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph .x.axis line","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"15":{"values":["#fff"],"rule":{"__isSmartRef__":true,"id":14},"property":"stroke","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"16":{"comment":"/*stroke: #000;*/","values":[""],"rule":{"__isSmartRef__":true,"id":14},"property":"","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetInlineComment","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"17":{"comment":"/*fill: none;*/","values":[""],"rule":{"__isSmartRef__":true,"id":14},"property":"","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetInlineComment","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"18":{"declarations":[{"__isSmartRef__":true,"id":19}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph .x.axis .minor","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"19":{"values":[".5"],"rule":{"__isSmartRef__":true,"id":18},"property":"stroke-opacity","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"20":{"declarations":[{"__isSmartRef__":true,"id":21}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph .x.axis path","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"21":{"values":["none"],"rule":{"__isSmartRef__":true,"id":20},"property":"display","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"22":{"declarations":[{"__isSmartRef__":true,"id":23},{"__isSmartRef__":true,"id":24}],"styleSheet":{"__isSmartRef__":true,"id":4},"selector":".Morph .y.axis line, .y.axis path","__LivelyClassName__":"lively.morphic.StyleSheetRule","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"23":{"values":["none"],"rule":{"__isSmartRef__":true,"id":22},"property":"fill","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"24":{"values":["#000"],"rule":{"__isSmartRef__":true,"id":22},"property":"stroke","priority":false,"__LivelyClassName__":"lively.morphic.StyleSheetDeclaration","__SourceModuleName__":"Global.lively.morphic.StyleSheetRepresentation"},"25":{"partName":"d3BarChart","requiredModules":[],"partsSpaceName":"PartsBin/Visualization/","comment":"no comment","changes":[{"__isSmartRef__":true,"id":26},{"__isSmartRef__":true,"id":27},{"__isSmartRef__":true,"id":28}],"migrationLevel":8,"__serializedExpressions__":["lastModifiedDate"],"__LivelyClassName__":"lively.PartsBin.PartsBinMetaInfo","__SourceModuleName__":"Global.lively.PartsBin","lastModifiedDate":"new Date(\"Thu May 01 2014 00:02:47 GMT-0700 (PDT)\")"},"26":{"author":"robertkrahn","message":"no comment","id":"DA7483BC-7F0D-47A5-84B4-1D5C4D84A365","__serializedExpressions__":["date"],"date":"new Date(\"Thu May 01 2014 00:11:03 GMT-0700 (PDT)\")"},"27":{"author":"robertkrahn","message":"no comment","id":"2C3083B5-AEBA-4315-9796-CFCA7DD0AA99","__serializedExpressions__":["date"],"date":"new Date(\"Thu May 01 2014 00:18:03 GMT-0700 (PDT)\")"},"28":{"__serializedExpressions__":["date"],"author":"robertkrahn","message":"no comment","id":"B49F8D2A-09C9-40C6-9E16-238C484F5C45","date":"new Date(\"Sat Jun 14 2014 19:57:00 GMT-0700 (PDT)\")"},"29":{"x":0,"y":99.6109401738325},"30":{"x":1,"y":132.14522858621675},"31":{"x":2,"y":94.45553352535394},"32":{"x":3,"y":72.8268529520197},"33":{"x":4,"y":121.12910135296005},"34":{"x":5,"y":93.67436111162138},"35":{"x":6,"y":82.76723981741961},"36":{"x":7,"y":96.75621829362721},"37":{"x":8,"y":90.90185498384628},"38":{"x":9,"y":107.93840186037974},"39":{"x":10,"y":99.03676309062119},"40":{"loadD3":{"__isSmartRef__":true,"id":41},"render":{"__isSmartRef__":true,"id":44},"reset":{"__isSmartRef__":true,"id":47},"onLoad":{"__isSmartRef__":true,"id":50},"testTick":{"__isSmartRef__":true,"id":53}},"41":{"varMapping":{"__isSmartRef__":true,"id":42},"source":"function loadD3(loadAttemptCount, thenDo) {\n    var self = this;\n    var maxLoadAttemptCount = 5;\n    var d3URL = '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.js';\n    if (!loadAttemptCount) loadAttemptCount = 1;\n    $('script[src=\"' + d3URL + '\"]').remove();\n    JSLoader.loadJs(d3URL);\n    Functions.waitFor(\n        5*1000,\n        function() { return typeof d3 !== 'undefined'; },\n        function(err) {\n            var msg;\n            if (err && loadAttemptCount < maxLoadAttemptCount) {\n                msg = Strings.format(\n                    \"Loading d3, attempt %s timed out.\\nTrying again...\",\n                    loadAttemptCount);\n                $world.setStatusMessage(msg, Color.yellow, 5);\n                self.loadD3(loadAttemptCount + 1);\n                return;\n            }\n            if (err) {\n                msg = Strings.format(\n                    \"Cannot load d3 library.\\nSorry, d3 isn't available right now.\",\n                    loadAttemptCount);\n                $world.setStatusMessage(msg, Color.red, 10);\n                return;\n            }\n            msg = Strings.format(\n                \"d3 loaded!\",\n                loadAttemptCount);\n            $world.setStatusMessage(msg, Color.green, 4);\n            thenDo && thenDo();\n            lively.bindings.signal(this, 'd3Loaded');\n        });\n}","funcProperties":{"__isSmartRef__":true,"id":43},"__LivelyClassName__":"lively.Closure","__SourceModuleName__":"Global.lively.lang.Closure"},"42":{"this":{"__isSmartRef__":true,"id":0}},"43":{"user":"robertkrahn","tags":[],"__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Wed Apr 30 2014 19:42:03 GMT-0700 (PDT)\")"},"44":{"varMapping":{"__isSmartRef__":true,"id":45},"source":"function render(data) {\n\n    // this.data = Array.range(0, 10).map(function(n) { return {x: n, y: Numbers.normalRandom(100, 20)} })\n    // this.render(this.data)\n\n    var morphBounds = this.innerBounds();\n    var margin = {top: 30, right: 30, bottom: 50, left: 35};\n    var width = morphBounds.width - margin.left - margin.right;\n    var height = morphBounds.height - margin.top - margin.bottom;\n\n    // Scales and axes. Note the inverted domain for the y-scale: bigger is up!\n    // x = d3.scale.linear().range([0, width]);\n    var x = d3.time.scale().domain([new Date, new Date]).nice(d3.time.second).range([0, width]);\n    var y = d3.scale.linear().range([height, 0]);\n    var xAxis = d3.svg.axis().scale(x).ticks(3).tickSize(-height).tickSubdivide(true).tickFormat(d3.time.format(\"%M:%S\"));\n    // xAxis = d3.svg.axis().scale(x).ticks(3)\n    var yAxis = d3.svg.axis().scale(y).ticks(4).orient(\"left\");\n\n\n    // Compute the minimum and maximum x, and the maximum y.\n    // data = this.data\n    x.domain([data[0].x, data[data.length - 1].x]);\n    y.domain([0, d3.max(data, function(d) { return d.y; })]).nice();\n\n    // Add an SVG element with the desired dimensions and margin.\n    d3.select(\"#\" + this.canvasId + \" svg\").remove();\n\n    var svg = d3.select(\"#\" + this.canvasId).append(\"svg\")\n        .attr(\"width\", width + margin.left + margin.right)\n        .attr(\"height\", height + margin.top + margin.bottom)\n      .append(\"g\")\n        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")\n\n    // Add the x-axis.\n    svg.append(\"g\")\n        .attr(\"class\", \"x axis\")\n        .attr(\"transform\", \"translate(0,\" + height + \")\")\n        .call(xAxis);\n\n    // Add the y-axis.\n    svg.append(\"g\")\n        .attr(\"class\", \"y axis\")\n        .call(yAxis);\n\n    svg.selectAll(\"rect\").remove()\n    \n    svg.selectAll(\"rect\")\n       .data(data)\n       .enter()\n       .append(\"rect\")\n       .attr(\"x\", function(d, i) { return i * (width / data.length) + 5; })\n       .attr(\"y\", function(d) { return y(d.y); })\n       .attr(\"width\", function(d) { return (width / data.length) - 5; })\n       .attr(\"height\", function(d) { return y(0) - y(d.y) })\n       .attr(\"fill\", \"teal\");;\n\n        //     .append(\"div\")\n        //     .attr('class', 'chartElement')\n        //     .style('background-color', Color.darkGray.toCSSString())\n\n        // chartElements\n        //     .style(\"height\", yScale.wrap(function($p, d, i) { return $p(d.y) }))\n        //     .style(\"left\", xScale.wrap(function($p, d, i) { return $p(d.x) + 'px' }))\n        //     .style('width', xScale.rangeBand.wrap(function($p, d, i) { return $p(d.x) + 'px' }))\n        //     .style(\"bottom\",  yScale.range()[0])\n        //     .style('text-align', 'center')\n        //     .style('position', 'absolute')\n        //     // .text(function(d) { return d; });\n\n\n}","funcProperties":{"__isSmartRef__":true,"id":46},"__LivelyClassName__":"lively.Closure","__SourceModuleName__":"Global.lively.lang.Closure"},"45":{"this":{"__isSmartRef__":true,"id":0}},"46":{"__serializedExpressions__":["timestamp"],"user":"robertkrahn","tags":[],"timestamp":"new Date(\"Sat Jun 14 2014 19:55:40 GMT-0700 (PDT)\")"},"47":{"varMapping":{"__isSmartRef__":true,"id":48},"source":"function reset() {\n    this.data = []\n    this.stopStepping();\n    this.canvasId = 'd3-' + this.id.replace(/-/g, '');\n    this.setHTML('<div id=\"' + this.canvasId + '\"></div>')\n    this.setClipMode('visible');\n}","funcProperties":{"__isSmartRef__":true,"id":49},"__LivelyClassName__":"lively.Closure","__SourceModuleName__":"Global.lively.lang.Closure"},"48":{"this":{"__isSmartRef__":true,"id":0}},"49":{"user":"robertkrahn","tags":[],"__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Thu May 01 2014 00:12:54 GMT-0700 (PDT)\")"},"50":{"varMapping":{"__isSmartRef__":true,"id":51},"source":"function onLoad() {\n    this.loadD3();\n}","funcProperties":{"__isSmartRef__":true,"id":52},"__LivelyClassName__":"lively.Closure","__SourceModuleName__":"Global.lively.lang.Closure"},"51":{"this":{"__isSmartRef__":true,"id":0}},"52":{"user":"robertkrahn","tags":[],"__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Wed Apr 30 2014 22:04:12 GMT-0700 (PDT)\")"},"53":{"varMapping":{"__isSmartRef__":true,"id":54},"source":"function testTick() {\n    // this.data = Array.range(0, 300).map(function(n) { return  })\n    // this.data = []\n    // this.startStepping(1000, 'testTick')\n    \n    this.data = this.data.slice(-5);\n    // data.push({x: data.last() ? data.last().x + 1 : 0, y: Numbers.normalRandom(100, 20)})\n    this.data.push({x: new Date(), y: Numbers.normalRandom(100, 20)})\n    this.render(this.data)\n}","funcProperties":{"__isSmartRef__":true,"id":55},"__LivelyClassName__":"lively.Closure","__SourceModuleName__":"Global.lively.lang.Closure"},"54":{"this":{"__isSmartRef__":true,"id":0}},"55":{"user":"robertkrahn","tags":[],"__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Thu May 01 2014 00:12:49 GMT-0700 (PDT)\")"},"isSimplifiedRegistry":true}}