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