Ampp3d DimpleJS custom scatterplot example

ampp3d-sample-chart.js

  ampp3d.chartConfigs.chart_scottish_referendum_1 = {
    margins: {
        top: 10,
        right: 10,
        left: 30,
        bottom: 80
    },
    api_version: 1,
    type: 'scatter-plot',   // 'scatter-plot', 'line' or 'column'
    data: '/wp-content/uploads/2014/06/scotland-full-data.csv',

    source: 'Compiled by What Scotland Thinks',
    sourceUrl: 'http://www.whatscotlandthinks.org',

    aspectRatio: '14:9',
    mobileAspectRatio: '1:1',

    bestFitLines: [
        {
            x: 'End Date',
            y: 'Yes',
            color: 'green',
        },
        {
            x: 'End Date',
            y: 'No',
            color: 'red'
        }
    ],

    x: {
        type: 'time',               // default = 'measure'
        dataColumn: 'End Date',
        title: '',
        dataFormat: '%d/%m/%Y',     // e.g. 22/05/1985 - compulsory for date/time format
        tickFormat: '%b %y',

        tickInterval: 1,
        mobileTickInterval: 2,

        // min: "01/01/1950", 
        showGridlines: true,         // you can set gridlines separately for each access (i.e. vert + horizontal)
        hideAxis: false,             // enable this to hide all measurements, ticks (well you *might* want to..)

        rotateTicks: [-45, 15, 40],  // (degrees, cx, cy) where cx and cy are the center of rotation
        dontRotateLabels: true       // turn off dimple's default 90 degree rotation on tight layouts (~ line 1660 in dimple.v2.0.0.js)
    },

    y: {
            type: 'measure',
            dataColumn: 'Yes',
            title: '',
            min: 0.20,
            max: 0.65,
            tickFormat: "%",              // fixed decimal place
            showGridlines: true,
            tickInterval: .05,          // starts at the min value, with ticks up (or as close as possible) to the max
            mobileTickInterval: 0.1
    },

    seriesFields: ['Yes','No'],
    seriesColors: ['green','red'],

    seriesConvertToPct: ['Yes','No'],        // Divides by 100 so d3.axis can format correctly (if you ask it for percentages, it forces you to multiply by 100 first)

    tooltipTemplate: [
     'Yes {{Yes}}% No {{No}}%',
     'by: {{Polling Org}}',
     'for: {{Source}}',
     'Research conducted', 
     '{{Start Date}} to {{End Date}}',
     '{{Method}}, {{Respondents}} people'
    ],
   
    // Some custom processing of the tooltip display
    tooltipCallbacks: {
      Yes: function(data) { return Math.round(data.Yes * 100) },
      No: function(data) { return Math.round(data.No * 100) }
    },

    labels: [
         {
             x: "01/03/2013",
             y: 0.53,
             text: 'No',
             hideOnMobile: false,
             color: 'red'
         },
         {
             x: "01/03/2013",
             y: 0.31,
             text: 'Yes',
             hideOnMobile: false,
             color: 'green'
         },
    ],
  };