# http://stackoverflow.com/questions/22185527/how-can-i-successfully-load-dimple-js-when-require-js-is-present

# Answer: https://github.com/PMSI-AlignAlytics/dimple/pull/56#issuecomment-37480189

%%html
<style type="text/css">
 /* https://github.com/PMSI-AlignAlytics/dimple/pull/56#issuecomment-37480189 */
 .tooltip {
  opacity: 1 !Important;
}   

</style>

%%javascript

require.config({
    shim: {
        d3: { exports: "d3" },
        dimple: {
            exports: "dimple",
            deps: ["d3"]
        }
    },
    paths: {
        d3: "http://d3js.org/d3.v3.min",
        dimple: "http://mashupguide.net/wwod14/dimple.v1.1.5.amd",
        queue: "http://d3js.org/queue.v1.min",
        topojson: "http://d3js.org/topojson.v1.min"
    }
});


require(["d3", "queue", "topojson", "dimple"], function(d3, queue, topojson, dimple) {
  console.log(d3.version);
  console.log(queue.version);
  console.log(topojson.version);
  console.log(dimple.version);
});

%%html
<div id="bar_chart" style="height:600px; width:800px"></div>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
<script>

require(["d3", "queue", "topojson", "dimple"], function(d3, queue, topojson, dimple) {
  console.log(d3.version);
  console.log(queue.version);
  console.log(topojson.version);
  console.log(dimple.version);

  // dimple requires d3 to be in global namespace
  //window.d3 = d3;
  //window.dimple = dimple;

  var svg = dimple.newSvg("#bar_chart", 800, 600);
  var data = [
    { "Word":"Hello", "Awesomeness":2000 },
    { "Word":"World", "Awesomeness":3000 }
  ];
  var chart = new dimple.chart(svg, data);
  chart.addCategoryAxis("x", "Word");
  chart.addMeasureAxis("y", "Awesomeness");
  chart.addSeries(null, dimple.plot.bar);
  chart.draw();


});

</script>

%%html
<div id="chartContainer" style="height:600px; width:800px"></div>
<script>
require(["d3", "queue", "topojson", "dimple"], function(d3, queue, topojson, dimple) {
  console.log(d3.version);
  console.log(queue.version);
  console.log(topojson.version);
  console.log(dimple.version);

  // dimple requires d3 to be in global namespace
  //window.d3 = d3;
  // window.dimple = dimple;

    var svg = dimple.newSvg("#chartContainer", 590, 400);

    // The default data set for these examples has regular times
    // and the point of this demo is to show the time axis
    // functionality, therefore a small bespoke data set is used.
    data = [
      { "Shift":"Early","Date":"12 Jul 2010 10:00","Value":1000 },
      { "Shift":"Early","Date":"20 Jul 2010 10:20","Value":1200 },
      { "Shift":"Early","Date":"1 Aug 2010 10:40","Value":1600 },
      { "Shift":"Early","Date":"8 Aug 2010 10:10","Value":1300 },
      { "Shift":"Early","Date":"20 Aug 2010 11:00","Value":1900 },
      { "Shift":"Early","Date":"7 Sep 2010 09:50","Value":1100 },
      { "Shift":"Early","Date":"13 Sep 2010 10:10","Value":1000 },
      { "Shift":"Early","Date":"1 Oct 2010 12:00","Value":2000 },
      { "Shift":"Early","Date":"6 Oct 2010 10:10","Value":1900 },
      { "Shift":"Early","Date":"19 Oct 2010 11:40","Value":1800 },
      { "Shift":"Early","Date":"24 Oct 2010 10:30","Value":1200 },
      { "Shift":"Early","Date":"3 Nov 2010 09:30","Value":1800 },
      { "Shift":"Early","Date":"12 Nov 2010 10:50","Value":1800 },
      { "Shift":"Early","Date":"20 Nov 2010 10:10","Value":1900 },
      { "Shift":"Early","Date":"5 Dec 2010 10:50","Value":1600 },
      { "Shift":"Early","Date":"9 Dec 2010 12:20","Value":1700 },
      { "Shift":"Early","Date":"15 Dec 2010 10:10","Value":1400 },
      { "Shift":"Early","Date":"20 Dec 2010 10:00","Value":1200 },
      { "Shift":"Late","Date":"11 Jul 2010 16:00","Value":2400 },
      { "Shift":"Late","Date":"30 Jul 2010 17:30","Value":2000 },
      { "Shift":"Late","Date":"1 Aug 2010 15:40","Value":1600 },
      { "Shift":"Late","Date":"5 Aug 2010 13:10","Value":1700 },
      { "Shift":"Late","Date":"1 Sep 2010 15:00","Value":1900 },
      { "Shift":"Late","Date":"7 Sep 2010 15:50","Value":1100 },
      { "Shift":"Late","Date":"13 Sep 2010 14:10","Value":1500 },
      { "Shift":"Late","Date":"30 Sep 2010 13:00","Value":1000 },
      { "Shift":"Late","Date":"1 Nov 2010 15:50","Value":1800 },
      { "Shift":"Late","Date":"24 Nov 2010 15:10","Value":1900 },
      { "Shift":"Late","Date":"1 Dec 2010 15:50","Value":1600 },
      { "Shift":"Late","Date":"5 Dec 2010 15:20","Value":1700 },
      { "Shift":"Late","Date":"13 Dec 2010 15:10","Value":1400 },
      { "Shift":"Late","Date":"25 Dec 2010 15:00","Value":1200 }
    ];

    // Create Separate Date and Time, this allows us to draw them
    // on separate axes.  Despite the time axis only displaying
    // the time portion, the whole date is used so they need to
    // have the same date allocated
    data.forEach(function (d) {
        d["Day"] = d["Date"].substring(0, d["Date"].length - 6);
        d["Time of Day"] =
            "2000-01-01 " + d["Date"].substring(d["Date"].length - 5);
    }, this);

    // Create the chart as usual
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(70, 40, 490, 320)

    // Add the x axis reading dates in the format 01 Jan 2012
    // and displaying them 01 Jan
    var x = myChart.addTimeAxis("x", "Day", "%d %b %Y", "%d %b");

    // Add the y axis reading dates and times but only outputting
    // times.  
    var y = myChart.addTimeAxis("y", "Time of Day",
        "%Y-%m-%d %H:%M", "%H:%M");

    // Size the bubbles by volume
    var z = myChart.addMeasureAxis("z", "Value");

    // Setting min and max dates requires them to be set
    // as actual javascript date objects
    x.overrideMin = new Date("2010-06-20");
    x.overrideMax = new Date("2011-01-02");
    y.overrideMin = new Date("01/01/2000 9:00 am");
    y.overrideMax = new Date("01/01/2000 6:00 pm");

    // Show a label for every 4 weeks.
    x.timePeriod = d3.time.weeks;
    x.timeInterval = 4;

    // Control bubble sizes by setting the max and min values    
    z.overrideMin = 900;
    z.overrideMax = 3000;

    // Add the bubble series for shift values first so that it is
    // drawn behind the lines
    myChart.addSeries("Shift", dimple.plot.bubble);

    // Add the line series on top of the bubbles.  The bubbles
    // and line points will naturally fall in the same places
    var s = myChart.addSeries("Shift", dimple.plot.line);

    // Add line markers to the line because it looks nice
    s.lineMarkers = true;

    // Show a legend
    myChart.addLegend(180, 10, 360, 20, "right");

    // Draw everything
    myChart.draw();

 

});
</script>