Skip to content

Instantly share code, notes, and snippets.

@wturrell
Created June 7, 2014 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wturrell/762367cf16b2a0cbe13a to your computer and use it in GitHub Desktop.
Save wturrell/762367cf16b2a0cbe13a to your computer and use it in GitHub Desktop.
Ampp3d DimpleJS custom scatterplot example
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'
},
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment