examples.js

;(function () {

    // This file contains the code to define the graphics and then
    // renders them using data randomly generated by data.js.

    // Define graphics ...

    var linechart = gg(
        { geometry: 'line', x: 'd', y: 'r', group: 'subject', color: 'subject' },
        { geometry: 'text',  x: 'd', y: 'r', text: '{d}, {r}', show: 'hover' },
        { aesthetic: 'color', range: ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686'] });

    var combined = gg(
        { geometry: 'point', x: 'd', y: 'r', size: 3 },
        { geometry: 'line', x: 'd', y: 'r' });

    var barchart = gg(
        { geometry: 'interval', x: 'd', y: 'r', width: 2, name: 'barchart' },
        { aesthetic: 'y', min: 0 });

    var quadrants = gg(
        { geometry: 'point', x: 'x', y: 'y', size: 'size' },
        { geometry: 'text', x: 'x', y: 'y', text: '{name}: {size}',  show: 'hover' },
        { aesthetic: 'size', range: [ 1, 5 ]});

    var histogram = gg(
        { geometry: 'interval', x: 'group', y: 'count', color: 'group', width: 20, statistic: 'sum', group: 'who', variable: 'purchases' },
        { aesthetic: 'x', type: 'categorical' },
        { aesthetic: 'y', min: 0 });

    var semilog = gg(
        { geometry: 'point', x: 'd', y: 'r', size: 3 },
        { geometry: 'line', x: 'd', y: 'r' },
        { aesthetic: 'y', type: 'log', legend: 'whatever' },
        { aesthetic: 'x', legend: 'foo' });

    var heightHistogram = gg(
        { geometry: 'interval', x: 'bin', y: 'count', statistic: 'bin', variable: 'height', bins: 30 },
        { aesthetic: 'x', type: 'categorical' },
        { aesthetic: 'y', min: 0 });

    var twoPopulations = gg(
        { geometry: 'point', x: 'intelligence', y: 'wisdom', color: 'group', name: 'twoPopulations' });

    var boxplot = gg(
        { geometry: 'box', x: 'group', group: 'grade', variable: 'score' },
        { aesthetic: 'x', type: 'categorical' });

    var symmetric = gg(
        { geometry: 'line', x: 'd', y: 'r' },
        { aesthetic: 'y', center: 0 });

    var areachartSmooth = gg(
        { geometry: 'area', x: 'a', y0: 'top', y1: 'bottom', smooth: true });

    var areachart = gg(
        { geometry: 'area', x: 'a', y0: 'top', y1: 'bottom' });

    var facets = gg(
        { facets: 'xy', x: 'gender', y: 'job' },
        { geometry: 'point', x: 'experience', y: 'pay', size: 2 }
    );

    // ... and render 'em

    var data = gg.sampleData;
    var div  = d3.select('#examples');
    var opts = { width: 300, height: 200, padding: 35 };
    var wide = { width: 915, height: 600, paddingX: 35, paddingY: 20 };

    linechart(data.upwardSubjects, div, opts);
    combined(data.upward, div, opts);
    barchart(_.map(data.upward, function (d) { return { d: d.d, r: Math.max(d.r, 0) }; }), div, opts);
    quadrants(data.quadrants, div, opts);
    histogram(data.purchases, div, opts);
    semilog(data.semiLogData, div, opts);
    heightHistogram(data.heightWeight, div, opts);
    twoPopulations(data.twoPopulations, div, opts);
    boxplot(data.forBoxPlots, div, opts);
    symmetric(data.toBeCentered, div, opts);
    areachartSmooth(data.upwardPairs, div, opts);
    areachart(data.upwardPairs, div, opts);
    facets(data.facets, div, wide);

})();