From 75687711f35355bc30e4829439384aab28fcac6d Mon Sep 17 00:00:00 2001 From: href Date: Wed, 1 Sep 2021 10:30:18 +0200 Subject: Commit all the changes that hasn't been committed + updates. --- .../examples/charts/annotations.htm | 338 ++++++ .../examples/charts/auto-time-formatting.htm | 296 +++++ .../examples/charts/axes.htm | 486 ++++++++ .../examples/charts/brushing_zooming.htm | 166 +++ .../examples/charts/data.htm | 386 +++++++ .../examples/charts/experimental.htm | 1159 ++++++++++++++++++++ .../examples/charts/lines.htm | 335 ++++++ .../examples/charts/multilines.htm | 368 +++++++ .../examples/charts/other.htm | 48 + .../examples/charts/rollovers.htm | 309 ++++++ .../examples/charts/updating.htm | 169 +++ 11 files changed, 4060 insertions(+) create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/annotations.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/auto-time-formatting.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/brushing_zooming.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/data.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/experimental.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/lines.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/multilines.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/other.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/rollovers.htm create mode 100644 priv/static/metrics-graphics-3.0-alpha3/examples/charts/updating.htm (limited to 'priv/static/metrics-graphics-3.0-alpha3/examples/charts') diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/annotations.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/annotations.htm new file mode 100644 index 0000000..5bd4d11 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/annotations.htm @@ -0,0 +1,338 @@ +
+
+
+
data
+ +
d3.json('data/some_percentage.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': '1st Milestone'
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': '2nd Milestone'
+    }];
+
+    MG.data_graphic({
+        title: "Markers",
+        description: "Markers are vertical lines that can be added at arbitrary points. Markers that are close to each other won't collide.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers'
+    });
+});
+ +
+
+ +
+
+
+
data
+ + 
d3.json('data/some_percentage.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var clicker = function() {
+        window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
+    };
+
+    var markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': "Click me",
+        'click': clicker
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': "Nothing to see here"
+    }];
+
+    MG.data_graphic({
+        title: "Clickable Markers",
+        description: "You can assign arbitrary functions to markers' click events.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers-clickable'
+    });
+});
+ +
+
+ + +
+
+
+
data
+ + 
d3.json('data/some_percentage.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var mouseover = function() {
+        alert("You are over me!");
+    };
+
+    var markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': "Place your mouse here",
+        'mouseover': mouseover
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': "Nothing to see here"
+    }];
+
+    MG.data_graphic({
+        title: "Mouse Over Markers",
+        description: "You can assign arbitrary functions to markers' mouseover events.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers-mouseover'
+    });
+ +
+
+ +
+
+
+
data
+ + 
d3.json('data/some_percentage.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var mouseout = function() {
+        alert("You just left me!");
+    };
+
+    var markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': "Place your mouse here and out!",
+        'mouseout': mouseout
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': "Nothing to see here"
+    }];
+
+    MG.data_graphic({
+        title: "Mouse Out Markers",
+        description: "You can assign arbitrary functions to markers' mouseout events.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers-mouseout'
+    });
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Baselines",
+        description: "Baselines are horizontal lines that can added at arbitrary points.",
+        data: data,
+        baselines: [{value: 160000000, label: 'a baseline'}],
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#baselines'
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+
+    var markers = [{
+        'date': new Date('2014-03-17T00:00:00.000Z'),
+        'label': 'Look, a spike!'
+    }];
+
+    MG.data_graphic({
+        title: "Annotating a Point",
+        description: "By setting the graphic's target a class name of mg-main-area-solid, markers don't extend down to the bottom of the graphic, which better draws attention to, say, spikes.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        target: '#spike'
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/auto-time-formatting.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/auto-time-formatting.htm new file mode 100644 index 0000000..af132dd --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/auto-time-formatting.htm @@ -0,0 +1,296 @@ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + 
function fake_data(length, seconds) {
+    var d = new Date();
+    var v = 100000;
+    var data=[];
+
+    for (var i = 0; i < length; i++) {
+        v += (Math.random() - 0.5) * 10000;
+        data.push({date: MG.clone(d), value: v});
+        d = new Date(d.getTime() + seconds * 1000);
+    }
+    return data;
+}
+
+function fake_days(length) {
+    var d = new Date();
+    var v = 100000;
+
+    var data = [];
+    for (var i = 0; i < length; i++) {
+        v += (Math.random() - 0.5) * 10000;
+        if (v < 0) v = 0;
+        data.push({date: MG.clone(d), value: v});
+        d.setDate(d.getDate() + 1);
+    }
+    return data;
+}
+
+function fake_years(length) {
+    var y = 2015;
+    var d = new Date(y,0,1);
+    out = [];
+    v = 100000;
+    for (var i = 0; i < length; i++) {
+        v += (Math.random()-.5) * 10000;
+        out.push({value:v, date: MG.clone(d)});
+        y -=1;
+        d = new Date(y,0,1);
+    }
+    out.reverse();
+    return out;
+}
+
+
+var less_than_a_minute = fake_data(25, 1);
+var less_than_a_day = fake_data(25,60 * 20);
+var a_few_days = fake_data(75,60 * 60);
+var many_days = fake_days(60);
+var many_many_many_days = fake_days(365*2);
+var a_few_years = fake_days(365*4);
+
+MG.data_graphic({
+    title: "European Clock",
+    description: 'By setting european_clock to true, you can default to European-style time. This is at the moment experimental, and the formatting may change.',
+    data: less_than_a_minute,
+    target: '#european',
+    european_clock: true,
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Less Than A Minute",
+    data: less_than_a_minute,
+    target: '#time1',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Less Than A Day",
+    data: less_than_a_day,
+    target: '#time2',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "A Few Days",
+    data: a_few_days,
+    target: '#time3',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Over A Large Span of Days",
+    data: many_days,
+    target: '#time4',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Over Many Months",
+    data: many_many_many_days,
+    target: '#many-months',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Over A Few Years",
+    data: a_few_years,
+    target: '#a-few-years',
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+MG.data_graphic({
+    title: "Over Centuries",
+    data: fake_years(300),
+    target: '#centuries',
+    width: 600,
+    height: 200,
+    right: 40
+});
+ +
+
+ + +
+
+
+
+
+
+
+ + 
MG.data_graphic({
+    title: "European Clock",
+    description: 'By setting european_clock to true, you can default to European-style time. This is at the moment experimental, and the formatting may change.',
+    data: less_than_a_minute,
+    target: '#european',
+    european_clock: true,
+    width: 600,
+    height: 200,
+    right: 40
+});
+
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm new file mode 100644 index 0000000..375120a --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm @@ -0,0 +1,486 @@ +
+
+
+
data
+ +
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: 90,
+        bottom: 50,
+        y_extended_ticks: true,
+        target: '#xnotdate',
+        x_accessor: 'males',
+        y_accessor: 'females',
+        x_label: 'males',
+        y_label: 'females',
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
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'
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
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: '$'
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
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'
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
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,
+    });
+});
+
+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,
+        y_axis: false
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
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
+    });
+});
+ +
+
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
d3.json('data/brief-1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    var position = [['left', 'top'],['right', 'top'], ['left', 'bottom'], ['right', 'bottom']];
+    position.forEach(function(pos,i) {
+        console.log(pos,i)
+        var i = i+1;
+        
+        MG.data_graphic({
+            title: "Axis Positions: " + pos[0] +', ' + pos[1],
+            description: "Set x_axis_position: " + pos[1] + " and x_axis_position: " + pos[0] +".",
+            x_axis_position: pos[1],
+            y_axis_position: pos[0],
+            data: data,
+            decimals: 0,
+            left: pos[0] === 'right' ? 20 : 50,
+            right: pos[0] === 'left' ? 20 : 50,
+            top: pos[1] === 'bottom' ? 50 : 50,
+            bottom: pos[1] === 'top' ? 25 : 50,
+            target: '#axis-pos-'+i,
+            area: false
+        });      
+    })
+});
+ +
+
+ + + + + + + + + + + + +
+
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
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: 220,
+        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: 220,
+        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: 220,
+        right: 10,
+        target: '#neg2',
+        x_accessor: 'subject',
+        y_accessor: 'measure'
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/brushing_zooming.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/brushing_zooming.htm new file mode 100644 index 0000000..e23e35d --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/brushing_zooming.htm @@ -0,0 +1,166 @@ +
+
+
+
+
+
+
+
+
data
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    MG.data_graphic({
+        title: "Basic Brushing & Zooming",
+        description: "This is a simple example of brushing and zooming. You can set 'brush' as 'xy', 'x', 'y' to specify the axis(es) that may be brushed.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 240,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#basic_brushing',
+        brush: 'xy',
+    });
+});
+
+d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Point Chart Brushing",
+        description: "Brushing and zooming also works for point charts.",
+        data: data,
+        chart_type: 'point',
+        width: 600,
+        height: 240,
+        right: 40,
+        target: '#point_chart_brushing',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        y_rug: true,
+        brush: 'xy',
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+
+
data
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    const main = {
+        title: "Overview Plot",
+        description: "This is a simple example of an overview plot. You can create an overview plot by creating another chart with 'zoom_target' option and then setting it as the object of the main chart.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 200,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#main',
+        brush: 'xy',
+    }
+    MG.data_graphic(main);
+    MG.data_graphic({
+        data: data,
+        width: 600,
+        height: 50,
+        top: 8,
+        bottom: 0,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#overview_plot',
+        brush: 'x',
+        zoom_target: main,
+        x_axis: false,
+        y_axis: false,
+        showActivePoint: false,
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/data.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/data.htm new file mode 100644 index 0000000..aa0f076 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/data.htm @@ -0,0 +1,386 @@ +
+
+
+
+
+
+
+
+ data +
+ +
d3.json('data/missing-y.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Few Observations",
+        description: "We sometimes have only a few observations. By setting missing_is_zero: true, missing values for a time-series will be interpreted as zeros. In this example, we've overridden the rollover callback to show 'no data' for missing observations and have set the min_x and max_x options in order to expand the date range.",
+        data: data,
+        interpolate: d3.curveLinear,
+        missing_is_zero: true,
+        width: 600,
+        height: 200,
+        right: 40,
+        min_x: new Date('2014-01-01'),
+        max_x: new Date('2014-06-01'),
+        target: '#missing-y',
+        mouseover: function(d, i) {
+            var df = d3.timeFormat('%b %d, %Y');
+            var date = df(d.date);
+            var y_val = (d.value === 0) ? 'no data' : d.value;
+
+            d3.select('#missing-y svg .mg-active-datapoint')
+                .text(date +  '   ' + y_val);
+        }
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/missing-is-hidden.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Broken Lines",
+        description: "Setting missing_is_hidden to true will hide missing ranges rather than considering them to be zeros or interpolating between the two points on either side.",
+        data: data,
+        missing_is_hidden: true,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#missing_is_hidden',
+        area: false,
+        show_secondary_x_label: false
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/missing-is-hidden-accessor.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Broken Lines (Missing Data Points)",
+        description: "You can hide individual data points on a particular attribute by setting missing_is_hidden_accessor. Data points whose y-accessor values are null are also hidden.",
+        data: data,
+        missing_is_hidden: true,
+        missing_is_hidden_accessor: 'dead',
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#missing_is_hidden_accessor'
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+ +
MG.data_graphic({
+    title: "Missing Data",
+    description: "This is an example of a graphic whose data is currently missing. We've also set the error option, which appends an error icon to the title and logs an error to the browser's console.",
+    error: 'This data is blocked by Lorem Ipsum. Get your **** together, Ipsum.',
+    chart_type: 'missing-data',
+    missing_text: 'This is an example of a missing chart',
+    target: '#missing-data',
+    width: 600,
+    height: 200
+});
+ +
+
+ +
+
+
+
+
+
+
+
+ data +
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var all_the_data = MG.clone(data[0]);
+    for (i = 1; i < data.length; i++){
+        for (var j = 0; j < data[i].length; j++) {
+            if (i === 2 && all_the_data[j].date < new Date('2014-02-01')) {
+            } else {
+                all_the_data[j]['value' + (i + 1)] = data[i][j].value;
+            }
+        }
+    }
+
+    MG.data_graphic({
+        title: "Handling Different Sized Lines in a Single Array",
+        description: "How do you handle data with multiple implied time series lengths?",
+        data: all_the_data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#missing1',
+        linked: true,
+        x_accessor: 'date',
+        y_accessor: ['value', 'value2', 'value3']
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+
+ data +
+ + 
d3.json('data/fake_users1.json', function(data) {
+
+    for (var i = 0; i < data.length; i++) {
+        data[i].active = (i % 5 === 0);
+    }
+
+    data = MG.convert.date(data, 'date');
+
+    MG.data_graphic({
+        title: "Show active points on line chart",
+        description: "This line chart displays pre-defined active points",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        point_size: 3,
+        active_point_on_lines: true,
+        active_point_accessor: 'active',
+        active_point_size: 2,
+        target: '#display_active_point_01',
+        aggregate_rollover: true
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+
+ data +
+ + 
d3.json('data/fake_users2.json', function(data) {
+
+    for (var i = 0; i < data.length; i++) {
+        for (var j = 0; j < data[i].length; j++) {
+            if (i === 0) {
+                data[i][j].active = (j % 5 === 0);
+            }
+            if (i === 1) {
+                data[i][j].active = (j % 10 === 0);
+            }
+        }
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Show active points on multi-lines chart",
+        description: "This multi-lines chart displays pre-defined active points for each lines",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        point_size: 3,
+        active_point_on_lines: true,
+        active_point_accessor: 'active',
+        active_point_size: 2,
+        target: '#display_active_point_01',
+        aggregate_rollover: true
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/experimental.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/experimental.htm new file mode 100644 index 0000000..725a8d3 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/experimental.htm @@ -0,0 +1,1159 @@ +
+
+
+
+
+
+
+
+
+
+
+
data
+ +
d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Simple Scatterplot",
+        description: "This is an example of a simple scatterplot, in which we have enabled rug plots on the y-axis by setting the y_rug option to true.",
+        data: data,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#scatter-simple',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        mouseover: function(d, i) { console.log(d,i); },
+        y_rug: true
+    });
+
+    MG.data_graphic({
+        title: "Automatic Category Coloring",
+        description: "By setting color_type to 'category' you can color the points according to another discrete value.",
+        data: data,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#categorical1',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        color_accessor: 'v',
+        color_type:'category',
+        y_rug: true
+    });
+
+    MG.data_graphic({
+        title: "Custom Category Color Mapping",
+        description: "You can specify the color domain and the corresponding color range to get custom mapping of categories to colors.",
+        data: data,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#categorical2',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        color_accessor: 'v',
+        color_domain: ['cat_0', 'cat_1', 'other'],
+        color_range: ['blue', 'gray', 'black'],
+        color_type: 'category',
+        x_rug: true
+    });
+
+    MG.data_graphic({
+        title: "Simple Line of Best Fit",
+        description: "For any scatterplot, set least_squares to true to add.",
+        data: data,
+        least_squares: true,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#scatter-line-best-fit',
+        x_accessor: 'x',
+        y_accessor: 'y'
+    });
+
+    MG.data_graphic({
+        title: "Points Highlighting",
+        description: "You can set highlight to filter the points you want to highlight.",
+        data: data,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#highlight',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        y_rug: true,
+        highlight: (d, i) => d.z > 2
+    });
+});
+
+d3.json('data/fake_users1.json', function(data) {
+        data = MG.convert.date(data, 'date');
+        MG.data_graphic({
+            title: "Another Least Squares Example",
+            description: "Least squares effortlessly works with dates or times on axes.",
+            data: data,
+            chart_type: 'point',
+            width: 295,
+            height: 225,
+            left: 60,
+            right: 10,
+            least_squares: true,
+            target: '#sls-time-series',
+            x_accessor: 'date',
+            y_accessor: 'value'
+        });
+});
+
+var color_range = (theme === 'light') ? null : ['white','yellow'];
+
+d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Scatterplot with Size and Color",
+        description: "Scatterplots have x_accessor, y_accessor, size_accessor, and color_accessor. For the last two you can also provide domain and range functions, to make it easy to change the color ranges. Colors default to red and blue, but can be overridden by passing an array of colors to color_range, as we've done in this example for the dark theme.",
+        data: data,
+        chart_type: 'point',
+        width: 295,
+        height: 225,
+        right: 10,
+        target: '#scatter-size-and-color',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        color_accessor:'z',
+        color_range: color_range,
+        size_accessor:'w',
+        x_rug: true,
+        y_rug: true
+    });
+});
+ +
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
data
+ +

+d3.tsv('data/nh-gop.tsv', function(data) {
+    var polls = [];
+    var who = ['Bush', 'Rubio', 'Trump', 'Cruz'];
+    data.forEach(function(p){
+        who.forEach(function(d){
+            var out = {};
+            out.candidate = d;
+            out.number = p[d] === '--' ? 0 : parseFloat(p[d]);
+            out.poll = p.Poll;
+            out.size = Math.random();
+            out.when = p.Date;
+            polls.push(out);
+        })
+    });
+
+    var trump = polls.filter(function(d){
+        return d.poll == 'PPP (D)';
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: X, points',
+        data: trump,
+        chart_type: 'point',
+        y_accessor: 'number',
+        x_accessor: 'candidate',
+        height:400,
+        width:300,
+        target: '#point-categorical',
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: X, bars',
+        data: trump,
+        chart_type: 'bar',
+        y_accessor: 'number',
+        x_accessor: 'candidate',
+        height:400,
+        width:300,
+        target: '#bar-categorical',
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: Y, points',
+        data: trump,
+        chart_type: 'point',
+        x_accessor: 'number',
+        y_accessor: 'candidate',
+        height:400,
+        width:300,
+        target: '#point-categorical2',
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: Y, bars',
+        data: trump,
+        chart_type: 'bar',
+        x_accessor: 'number',
+        y_accessor: 'candidate',
+        height:400,
+        width:300,
+        target: '#bar-categorical2',
+    })
+
+    MG.data_graphic({
+        title: 'Y points, groups',
+        data: polls,
+        chart_type: 'point',
+        y_axis_type: 'categorical',
+        x_accessor: 'number',
+        y_accessor: 'candidate',
+        ygroup_accessor: 'poll',
+        size_accessor: 'size',
+        size_domain: [0,1],
+        size_range: [3,6],
+        height:550,
+        width:300,
+        left:100,
+        target: '#point-categorical-group'
+    })
+
+    MG.data_graphic({
+        title: 'Y bars, groups',
+        data: polls,
+        chart_type: 'bar',
+        y_axis_type: 'categorical',
+        x_accessor: 'number',
+        y_accessor: 'candidate',
+        ygroup_accessor: 'poll',
+        height:550,
+        width:300,
+        left:100,
+        right:40,
+        target: '#bar-categorical-group'
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: Y, groups, horizontal',
+        data: polls,
+        chart_type: 'point',
+        y_accessor: 'number',
+        x_accessor: 'candidate',
+        xgroup_accessor: 'poll',
+        size_accessor: 'size',
+        size_domain: [0,1],
+        size_range: [3,6],
+        height:350,
+        width:700,
+        target: '#point-categorical-group-horizontal'
+    })
+
+    MG.data_graphic({
+        title: 'Categorical Scale: Y, groups, horizontal',
+        data: polls,
+        chart_type: 'bar',
+        y_accessor: 'number',
+        x_accessor: 'candidate',
+        xgroup_accessor: 'poll',
+        size_accessor: 'size',
+        size_domain: [0,1],
+        size_range: [3,6],
+        height:350,
+        width:700,
+        target: '#bar-categorical-group-horizontal'
+    })
+})
+
+ +
+
+ + + + + + + +
+
+
+
+
+
+
+
+
+
+
data
+ +
var values = d3.range(10000).map(d3.randomBates(10));
+
+MG.data_graphic({
+    title: "Histogram 1",
+    description: "Raw data values being fed in. Here, we specify the number of bins to be 50 and have bar margins set to 0. The histogram graphic type includes the ability to bin data.",
+    data: values,
+    chart_type: 'histogram',
+    width: 295,
+    height: 180,
+    right: 10,
+    bins: 50,
+    bar_margin: 0,
+    target: '#histogram1',
+    y_extended_ticks: true,
+    mouseover: function(d, i) {
+        var pf = d3.format(',.2f');
+        d3.select('#histogram1 svg .mg-active-datapoint')
+            .text('Value: ' + pf(d.x) +  '   Count: ' + d.y);
+    }
+});
+
+d3.csv('data/ufo_dates.csv', function(ufos){
+    var data = ufos.map(function(d){
+        return parseInt(d.value) / 30;
+    });
+    data.sort();
+    MG.data_graphic({
+        title: "Difference in UFO Sighting and Reporting Dates (in months)",
+        description: "Semi-real data about the reported differences between the supposed sighting of a UFO and the date it was reported.",
+        data: data,
+        chart_type: 'histogram',
+        width: 600,
+        height: 300,
+        right: 40,
+        bar_margin: 0,
+        bins: 150,
+        target: '#ufos',
+        y_extended_ticks: true,
+        mouseover: function(d, i) {
+            var pf = d3.format(',.2f');
+            d3.select('#ufos svg .mg-active-datapoint')
+                .text(pf(d.x) + ' months      Volume: ' + pf(d.y));
+        }
+    });
+});
+
+var second = d3.range(10000).map(function(d) { return Math.random() * 10; });
+second = d3.histogram()(second)
+    .map(function(d) {
+        return {'count': d.y, 'value': d.x};
+});
+
+MG.data_graphic({
+    title: "Histogram 2",
+    description: "Already binned data being fed in.",
+    data: second,
+    binned: true,
+    chart_type: 'histogram',
+    width: 295,
+    height: 180,
+    right: 10,
+    target: '#histogram2',
+    y_extended_ticks: true,
+    x_accessor: 'value',
+    y_accessor: 'count',
+    mouseover: function(d, i) {
+        var pf = d3.format(',.2f');
+        d3.select('#histogram2 svg .mg-active-datapoint')
+            .text('Value: ' + pf(d.x) +  '   Count: ' + d.y);
+    }
+});
+
+var third = d3.range(10000).map(d3.randomBates(10));
+third = third.map(function(d,i){ return {val1: d, val2: i}; });
+
+MG.data_graphic({
+    title: "Histogram 3",
+    description: "Unbinned, but in same format as other line chart data.",
+    data: third,
+    chart_type: 'histogram',
+    width: 295,
+    height: 180,
+    right: 10,
+    target: '#histogram3',
+    linked: true,
+    y_extended_ticks: true,
+    x_accessor: 'val1',
+    mouseover: function(d, i) {
+        var pf = d3.format(',.2f');
+        d3.select('#histogram3 svg .mg-active-datapoint')
+            .text('Value: ' + pf(d.x) +  '   Count: ' + d.y);
+    }
+});
+
+// check for negative values, for sanity.
+var fourth = d3.range(10000).map(d3.randomBates(10));
+fourth = fourth.map(function(d,i){ return d - 0.5; });
+
+MG.data_graphic({
+    title: "Histogram 4",
+    description: "Sanity-checking negative data.",
+    data: fourth,
+    chart_type: 'histogram',
+    width: 295,
+    height: 180,
+    right: 10,
+    target: '#histogram4',
+    y_extended_ticks: true,
+    x_accessor: 'val1',
+    mouseover: function(d, i) {
+        var pf = d3.format(',.2f');
+        d3.select('#histogram4 svg .mg-active-datapoint')
+            .text('Value: ' + pf(d.x) +  '   Count: ' + d.y);
+    }
+});
+
+var hist1 = fake_data(25, 60).map(function(d){
+    d.value = Math.round(d.value);
+    return d;
+});
+
+MG.data_graphic({
+    title: "Histograms can be time series as well",
+    data: hist1,
+    target: '#time-hist',
+    chart_type: 'histogram',
+    width: 600,
+    height: 200,
+    binned: true,
+});
+ +
+
+ +
+
+
+ +
var table_data = [
+    { 'year': 1852, 'value1': 10.2, 'value2': 1030004.43423,'share': 0.12, 'total': 34003400, 'temp': 43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful." },
+    { 'year': 1901, 'value1': 10.1, 'value2': 54003.223, 'share': 0.11, 'total': 4302100, 'temp': 55, 'geo': 'United States', 'description': "More made-up numbers." },
+    { 'year': 1732, 'value1': 4.3, 'value2': 1004.91422,   'share': 0.14, 'total': 4300240, 'temp': 42, 'geo': 'France', 'description': "We didn't specify a title for this column." },
+    { 'year': 1945, 'value1': 2.9, 'value2': 2430.121,  'share': 0.23, 'total': 24000000, 'temp': 54, 'geo': 'Brazil', 'description': "Brazil, Brazil." },
+    { 'year': 1910, 'value1': 1.0, 'value2': 5432.3,  'share': 0.19, 'total': 130000, 'temp': 52, 'geo': 'India', 'description': "Last description in the whole thing." }
+];
+
+var table1 = MG.data_table({
+        title: "A Data Table",
+        description: "A table is often the most appropriate way to present data. We aim to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.",
+        data: table_data,
+        show_tooltips: true
+    })
+    .target('#table1')
+    .title({
+        accessor: 'geo',
+        secondary_accessor:'year',
+        label: 'Country',
+        description: "These are arbitrary countries with arbitrary years underneath."
+    })
+    .number({ accessor: 'value1', label: 'Size', value_formatter: function(d){ return d + ' yrds'; }})
+    .number({ accessor: 'value2', label: 'Score', round: 2,  font_weight: 'bold' })
+    .number({ accessor: 'temp', label: 'Temp.', format: 'temperature', width: 100, color: 'gray' })
+    .number({
+        accessor: 'total',
+        label: 'Volume',
+        format: 'count', currency: '$',
+        width: 100,
+        font_weight: function(d){ return d < 5000000 ? 'bold' : 'normal'; },
+        color: function(d){ return d < 5000000 ? '#f70101' : 'auto'; }
+    })
+    .number({ accessor: 'share', label: 'Share', format: 'percentage', width: 100 })
+    .text({ accessor: 'description', width: 240, font_style: 'italic' })
+    .display();
+ +
+
+ +
+
+
+ +
var bdata = [
+    {a:'apples', b:'quartz'},
+    {a:'bananas', b:'pyrite'},
+    {a:'durian', b:'obsidian'}
+];
+
+var resolution_features = ['weekly', 'monthly'];
+
+var buttons = MG.button_layout('#buttons')
+    .data(bdata)
+    .manual_button('Time Scale', resolution_features, function(){ console.log('switched time scales'); })
+    .button('a', 'Fruit')
+    .button('b', 'Rock')
+    .callback(function(){
+        console.log('made it');
+        return false;
+    })
+    .display();
+ +
+
+ +
+
+
+ +
+
+
+
+ +
<div class="tooltip"></div>
+<style>
+.tooltip {
+    display: none;
+    min-height: 32px;
+    min-width: 100px;
+    padding: 12px;
+    margin-bottom: 8px;
+    background-color: #333;
+    color: white;
+    opacity: 0.7;
+    text-align: left;
+}
+</style>
+
+ +
const tooltipEl = d3.select('.tooltip').node();
+const tooltip = new Popper(document.documentElement, tooltipEl, { placement: 'top' });
+tooltipEl.addEventListener('mouseover', () => {
+    tooltipEl.style.display = 'block';
+})
+tooltipEl.addEventListener('mouseout', () => {
+    tooltipEl.style.display = 'none';
+})
+
+d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Tooltip on line chart",
+        description: "Using popper.js and the mouseover callback, you can easily create a tooltip when the user hovers over a particular datapoint.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#tooltip-line-chart',
+        x_accessor: 'date',
+        y_accessor: 'value',
+        show_rollover_text: false,
+        mouseover: (d, i) => {
+            tooltipEl.style.display = 'block';
+            tooltipEl.innerText = `date: ${d3.timeFormat('%b %e, %Y')(d.date)}\nvalue: ${d.value}`;
+            tooltip.reference = d3.select(`#tooltip-line-chart .mg-line-rollover-circle`).node();
+            tooltip.update();
+        },
+        mouseout: () => {
+            tooltipEl.style.display = 'none';
+        }
+    });
+});
+
+d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Tooltip on point chart",
+        description: "This technique also works for point charts.",
+        data: data,
+        chart_type: 'point',
+        width: 600,
+        height: 350,
+        right: 10,
+        target: '#tooltip-point-chart',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        show_rollover_text: false,
+        mouseover: (d, i) => {
+            tooltipEl.style.display = 'block';
+            tooltipEl.innerText = `X: ${d.data.x}\nY: ${d.data.y}`;
+            tooltip.reference = d3.select(`#tooltip-point-chart .mg-points .path-${i}`).node();
+            tooltip.update();
+        },
+        mouseout: (d, i) => {
+            tooltipEl.style.display = 'none';
+        }
+    });
+});
+ +
+
+ + + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/lines.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/lines.htm new file mode 100644 index 0000000..b758d34 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/lines.htm @@ -0,0 +1,335 @@ +
+
+
+
data
+ +
d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Line Chart",
+        description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: document.getElementById('fake_users1'),
+        x_accessor: 'date',
+        y_accessor: 'value'
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/confidence_band.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Confidence Band",
+        description: "This is an example of a graphic with a confidence band and extended x-axis ticks enabled.",
+        data: data,
+        format: 'percentage',
+        width: 600,
+        height: 200,
+        right: 40,
+        area: false,
+        target: '#confidence_band',
+        show_secondary_x_label: false,
+        show_confidence_band: ['l', 'u'],
+        x_extended_ticks: true
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/small-range.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Small Range of Integers",
+        description: "When we have a data object of integers and a small range of values, the auto-generated set of y-axis ticks are filtered so that we don't include fractional values.",
+        data: data,
+        interpolate: d3.curveLinear,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#small-range'
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
d3.json('data/brief-1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Linked Graphic",
+        description: "The two graphics in this section are linked together. A rollover in one causes a rollover in the other.",
+        data: data,
+        linked: true,
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        target: '#briefing-1'
+    });
+});
+
+d3.json('data/brief-2.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Other Linked Graphic",
+        description: "Roll over and watch as the graphic to the left triggers.",
+        data: data,
+        area: false,
+        linked: true,
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        target: '#briefing-2'
+    });
+});
+ +
+
+ +
+
+
+ +
MG.data_graphic({
+    title: "Singleton",
+    description: "Handling a solitary data point.",
+    data: [{'date': new Date('2015-03-05T21:00:00Z'), 'value': 12000}],
+    width: 600,
+    height: 200,
+    right: 40,
+    target: '#singleton'
+});
+ +
+
+ +
+
+
+ +
d3.json('data/fake_users1.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Changing Single Line Color",
+        description: "For single line charts, there are two simple ways to change a line color. The first is to change the css (described on the wiki). The other is to specify a color value using color: string or colors: string.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        color: '#8C001A',
+        target: 'div#custom-color',
+        x_accessor: 'date',
+        y_accessor: 'value'
+    });
+});
+ +
+
+ +
+
+
+
data
+ + 
d3.json('data/fake_users1.json', function(data) {
+
+    var max = d3.max(data, function (d) {
+        return d.value;
+    });
+    var min = d3.min(data, function(d) {
+        return d.value;
+    });
+
+    var offsetForNegativeValues = ((max - min) / 1.75);
+
+    for (var i = 0; i < data.length; i++) {
+        data[i].value = (data[i].value - offsetForNegativeValues) / 1000000;
+    }
+
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Flipped area under Y value baseline",
+        description: "This is a line chart having a flipped area under a Y value baseline",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        area: true,
+        flip_area_under_y_value: 0,
+        target: document.getElementById('area_flipped_users_gain_loss'),
+        x_accessor: 'date',
+        y_accessor: 'value'
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/multilines.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/multilines.htm new file mode 100644 index 0000000..d807466 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/multilines.htm @@ -0,0 +1,368 @@ +
+
+
+
data
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Multi-Line Chart",
+        description: "This line chart contains multiple lines.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#fake_users2',
+        legend: ['Line 1','Line 2','Line 3'],
+        legend_target: '.legend'
+    });
+});
+ +
+
+
+
+
+
+ +
+
+
+
data
+ +
d3.json('data/missing-is-hidden-multi.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Broken Multi-Lines",
+        description: 'Setting missing_is_hidden works with multiple lines too.',
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#missing_is_hidden_multi',
+        show_secondary_x_label: false
+    });
+});
+ +
+
+ +
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Multi-Line Linked",
+        description: "Demoing linked multi-line charts.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#linked_multi1',
+        linked: true
+    });
+})
+
+d3.json('data/fake_users3.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Multi-Line Linked 2",
+        description: "Demoing linked multi-line charts.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#linked_multi2',
+        linked: true
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/fake_users3.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    // set this to an empty array.
+    // data[0] and data[2] both still arrays of objects.
+    data[1] = [];
+
+    MG.data_graphic({
+        title: "Missing Time Series Don't Get Drawn",
+        description: "We set the second array to [] instead of the loaded data. The line color order is preserved.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#missing-multi'
+    });
+});
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/fake_users3.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    data[1][data[1].length-1].value = 50000000;
+    data[2][data[2].length-1] = MG.clone(data[1][data[1].length-1]);
+    data[2][data[2].length-1].value += 10000000;
+
+    MG.data_graphic({
+        title: "Labeling Lines",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        legend: ['US', 'CA', 'DE'],
+        target: '#multi-labelled'
+    });
+});
+ +
+
+ + +
+
+
+
data
+ +
d3.json('data/fake_users2.json', function(data){
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    };
+    MG.data_graphic({
+        title: "Custom Line Coloring",
+        description: "By passing in an array of hex / rgb / rgba / html strings, you can specify the colors of the lines. NOTE: this feature may have an API change before it is fully in Metrics Graphics. Use at your own risk.",
+        data: [data[0], data[1], data[2]],
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#custom-colors',
+        legend: ['Team A','Team B','Team C'],
+        legend_target: 'div#custom-color-key',
+        colors: ['blue', 'rgb(255,100,43)', '#CCCCFF'],
+        aggregate_rollover: true
+    });
+})
+
+ +
+
+
+
+
+
+ +
+
+
+
data
+ + 
d3.json('data/fake_users3.json', function(data) {
+
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    };
+
+    MG.data_graphic({
+        title: "Select lines of your multi-line chart having areas",
+        description: "By passing in an array of booleans in 'area' property, you can choose which lines has an area or not.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#multiline_area_select',
+        area: [false, true, false],
+        y_extended_ticks: true,
+        x_accessor: 'date'
+    });
+});
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/other.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/other.htm new file mode 100644 index 0000000..e65d641 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/other.htm @@ -0,0 +1,48 @@ +
+
+
+
data
+ +
d3.json('data/fake_users3.json', function(data) {
+    for(var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    MG.data_graphic({
+        title: "Preserving the aspect ratio",
+        description: "You can automatically set the width or height of a data graphic to fit its parent element. When done the graphic will rescale to fit the size of the parent element while preserving its aspect ratio.",
+        data: data,
+        full_width: true,
+        height: 300,
+        right: 40,
+        x_extended_ticks: true,
+        target: '#aspect1',
+        x_accessor: 'date',
+        y_accessor: 'value'
+    });
+});
+ +
+
+ + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/rollovers.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/rollovers.htm new file mode 100644 index 0000000..53510bb --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/rollovers.htm @@ -0,0 +1,309 @@ +
+
+
+
+
+
+
+
+
+ data 1, + data 2 +
+ +
d3.json('data/float.json', function(data) {
+    data = MG.convert.date(data, 'date');
+
+    MG.data_graphic({
+        title: "Changing Precision 1",
+        description: "We can change the precision if the axis data type is a float. We can also change both the formatting, or hide the rollover text altogether. Here we set decimals: 3 to get three decimals in the rollover for percentages.",
+        data: data,
+        decimals: 3,
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        target: '#precision1'
+    });
+
+    MG.data_graphic({
+        title: "Custom Rollover Text",
+        description: "Here is an example of changing the rollover text. You could in theory actually update any DOM element with the data from that rollover - a title, for instance.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        mouseover: function(d, i) {
+            // custom format the rollover text, show days
+            var pf = d3.format('.0s');
+            d3.select('#custom-rollover svg .mg-active-datapoint')
+                .text('Day ' + (i + 1) + '   ' + pf(d.value));
+        },
+        target: '#custom-rollover'
+    });
+});
+
+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: "Changing Precision 2",
+        description: "Here we set decimals: 0 for percentages.",
+        data: data,
+        decimals: 0,
+        format: 'percentage',
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        target: '#precision2'
+    });
+
+    MG.data_graphic({
+        title: "... Or No Rollover Text",
+        description: "By setting show_rollover_text: false, you can hide the default rollover text from even appearing. This, coupled with the custom callback, gives a lot of interesting options for controlling rollovers.",
+        data: data,
+        decimals: 0,
+        show_rollover_text: false,
+        format: 'percentage',
+        width: 600,
+        height: 200,
+        right: 40,
+        xax_count: 4,
+        target: '#no-rollover-text'
+    });
+});
+ +
+
+ +
+
+
+
data
+ +
d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var all_the_data = MG.clone(data[0]);
+    for (i = 1; i < data.length; i++){
+        for (var j = 0; j < data[i].length; j++){
+            if (i === 2 && all_the_data[j].date < new Date('2014-02-01')) {
+            } else {
+                all_the_data[j]['value' + (i + 1)] = data[i][j].value;
+            }
+        }
+    }
+
+    MG.data_graphic({
+        title: "Aggregated Rollover Information",
+        description: "Aggregated information can be displayed with the aggregate_rollover option in order to clearly highlight the relationship between lines. Also handles non-contiguous data",
+        data: all_the_data,
+        width: 600,
+        height: 200,
+        right: 40,
+        target: '#aggregate',
+        y_extended_ticks: true,
+        x_accessor: 'date',
+        y_accessor: ['value', 'value2', 'value3'],
+        aggregate_rollover: true
+    });
+});
+ +
+
+ + +
+
+
+
data
+ +

+d3.json('data/float.json', function(data) {
+
+    data = MG.convert.date(data, 'date');
+    // check out https://github.com/mbostock/d3/wiki/Formatting for number formatting
+    //and https://github.com/mbostock/d3/wiki/Time-Formatting for time formatting options.
+
+    MG.data_graphic({
+        title: "Rollover Formatting With Strings",
+        description: "Metrics Graphics comes with two arguments: y_rollover_format and x_rollover_format. These arguments take either strings or functions. Strings are formatted according to D3's number format, or D3's time formatting, if the accessor pulls out Date objects.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        y_mouseover: '%d',
+        x_mouseover: '%e of %b? Well, ',
+        target: '#y-formatting'
+    });
+})
+
+ +
+
+ + +
+
+
+
data
+ +

+d3.json('data/float.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    MG.data_graphic({
+        title: "Rollover Formatting With Functions",
+        description: "You can also pass in a function, whose arguments are the data point and the index.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        y_rollover_format: function(d){
+            return Math.round(d.value) + (Math.random() > .5 ? ' + 1' : ' - 1')
+        },
+        x_rollover_format: function(d){
+            var today = new Date()
+            return Math.round((today - d.date)/ (1000 * 60 * 60 * 24)) + ' days ago, ';
+        },
+        target: '#formatting-with-functions'
+    });
+})
+
+ +
+
+ + + diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/updating.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/updating.htm new file mode 100644 index 0000000..af3919b --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/updating.htm @@ -0,0 +1,169 @@ +
+
+
+
+ + + +
+
+
+ + + +
+
+
+
data
+ +
var globals = {};
+
+var split_by_params = {
+    title: "Downloads by Channel",
+    description: "We sometimes have the need to split the data and then gracefully update the graphic with the newly selected subset of data.",
+    width: 600,
+    height: 200,
+    right: 40,
+    xax_count: 4,
+    target: '#split_by',
+    x_accessor: 'date',
+    y_accessor: 'release'
+};
+
+var modify_time_period_params = {
+    title: "Beta Downloads",
+    description: "We sometimes have the need to view data for just the past n days. Here, the transition_on_update option is set to false.",
+    width: 600,
+    height: 200,
+    right: 40,
+    show_secondary_x_label: false,
+    xax_count: 4,
+    target: '#modify_time_period',
+    x_accessor: 'date',
+    y_accessor: 'beta'
+}
+
+d3.json('data/split_by.json', function(data) {
+    data = MG.convert.date(data, 'date');
+    globals.data = data;
+
+    split_by_params.data = data;
+    MG.data_graphic(split_by_params);
+
+    modify_time_period_params.data = data;
+    MG.data_graphic(modify_time_period_params);
+});
+
+$('.split-by-controls button').click(function() {
+    var new_y_accessor = $(this).data('y_accessor');
+    split_by_params.y_accessor = new_y_accessor;
+
+    // change button state
+    $(this).addClass('active').siblings().removeClass('active');
+
+    // update data
+    delete split_by_params.xax_format;
+    MG.data_graphic(split_by_params);
+});
+
+$('.modify-time-period-controls button').click(function() {
+    var past_n_days = $(this).data('time_period');
+    var data = modify_time_period(globals.data, past_n_days);
+
+    // change button state
+    $(this).addClass('active').siblings().removeClass('active');
+
+    delete modify_time_period_params.xax_format;
+    modify_time_period_params.data = data;
+    MG.data_graphic(modify_time_period_params);
+});
+
+function modify_time_period(data, past_n_days) {
+    if (past_n_days !== '') {
+        return MG.clone(data).slice(past_n_days * -1);
+    }
+
+    return data;
+}
+ +
+
+ + \ No newline at end of file -- cgit v1.2.3