d3.json('data/xnotdate.json', function(data) {
MG.data_graphic({
title: "Axis Labels",
description: "A graphic where we're not plotting dates on the x-axis and where the axes include labels and the line animates on load. We've also enabled extended ticks along the y-axis.",
data: data,
animate_on_load: true,
area: false,
width: 600,
height: 240,
right: 40,
left: 80,
bottom: 50,
y_extended_ticks: true,
target: '#xnotdate',
x_accessor: 'males',
y_accessor: 'females',
x_label: 'males',
y_label: 'females',
});
});
d3.json('data/some_percentage.json', function(data) {
for (var i = 0; i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
MG.data_graphic({
title: "Some Percentages",
description: "Here is an example that shows percentages.",
data: data,
width: 600,
height: 200,
right: 40,
format: 'percentage',
target: '#percentage'
});
});
d3.json('data/some_currency.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Some Currency",
description: "Here is an example that uses custom units for currency.",
data: data,
width: 600,
height: 200,
right: 40,
target: '#currency',
yax_units: '$'
});
});
d3.json('data/log.json', function(data) {
data = [data];
for (var i = 0; i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
MG.data_graphic({
title: "Log Scale",
description: "You can change the y-axis' scale to logarithmic by setting y_scale_type to log.",
data: data,
y_scale_type: 'log',
width: 600,
height: 200,
right: 40,
target: '#log1'
});
});
d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "No X Axis",
description: "You can hide either axis by setting x_axis or y_axis to false.",
data: data,
decimals: 0,
width: 600,
height: 200,
right: 40,
xax_count: 4,
target: '#hidden1',
area: false,
x_axis: false,
small_text: true
});
});
d3.json('data/brief-1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "No Y Axis",
description: "You can hide either axis by setting x_axis or y_axis to false.",
data: data,
decimals: 0,
width: 600,
height: 200,
right: 20,
xax_count: 4,
target: '#hidden2',
area: false,
small_text: true,
y_axis: false
});
});
d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Rug Plots",
description: "You can set rug plots either axis by setting x_rug or y_rug to true.",
data: data,
decimals: 0,
width: 600,
height: 200,
right: 40,
target: '#y_rug',
area: false,
y_rug: true
});
});
d3.json('data/neg1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Negative Values 1",
description: "MG defaults to 0 on the y-axis as min if there are no negative numbers. If there are negatives, should provide some buffer below.",
data: data,
width: 295,
height: 150,
right: 10,
target: '#neg1'
});
var data2 = MG.clone(data).map(function(d) {
d.value = d.value + 550;
return d;
});
MG.data_graphic({
title: "Y-Axis Not Zero",
data: data2,
width: 295,
height: 150,
right: 10,
min_y_from_data: true,
yax_units: '$',
target: '#y-axis-not-zero',
x_accessor: 'date',
y_accessor: 'value'
});
});
d3.json('data/neg2.json', function(data) {
MG.data_graphic({
title: "Negative Values 2",
data: data,
width: 295,
height: 150,
right: 10,
xax_format: function(f) {
var pf = d3.formatPrefix(f);
return Math.round(pf.scale(f)) + pf.symbol;
},
target: '#neg2',
x_accessor: 'subject',
y_accessor: 'measure'
});
});