straypacket · December 31, 2015 19:19
diff --git a/dc_demo.html b/dc_demo.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>dc.js - Demo</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/dc.css"/>

    <style>
        #monthly-volume-chart g.y {
            display: none;
        }
    </style>
 </head>
 <body>

 <div class="container">

 <h2>Sales 2013/06/01-2013/11/21</h2>

 <div class="row">
    <div id="yearly-bubble-chart" class="dc-chart">
        <strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
        <a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();"
           style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 </div>

 <div class="row">
    <div id="gain-loss-chart">
        <strong>Days by Gain/Loss</strong>
        <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
    <div id="store-sales-chart">
        <strong>Sales per store (top 20)</strong>
        <a class="reset" href="javascript:storeSalesChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
    <div id="quarter-chart">
        <strong>Quarters</strong>
        <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>

    <div id="day-of-week-chart">
        <strong>Day of Week</strong>
        <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>

    <div id="fluctuation-chart">
        <strong>Days by Fluctuation(%)</strong>
        <span class="reset" style="display: none;">range: <span class="filter"></span></span>
        <a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 </div>

 <div class="row">
    <div id="monthly-move-chart">
        <strong>Average sales & Total sales</strong>
        <span class="reset" style="display: none;">range: <span class="filter"></span></span>
        <a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
           style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 </div>

 <div class="row">
    <div id="monthly-volume-chart">
    </div>
    <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
 </div>

 <div class="row">
    <div>
        <div class="dc-data-count">
            <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
                href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
        </div>
    </div>
    <table class="table table-hover dc-data-table">
        <thead>
        <tr class="header">
            <th>Date</th>
            <th>Open</th>
            <th>Close</th>
            <th>Change</th>
            <th>Volume</th>
        </tr>
        </thead>
    </table>
 </div>

 <div class="clearfix"></div>

 </div>

 <script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
 <script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
 <script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
 <script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/colorbrewer.js"></script>

 <script type="text/javascript" src="stock.js"></script>

 </body>
 </html>
diff --git a/ndx.csv b/ndx.csv
diff --git a/queries.sql b/queries.sql
 select sale_date, sum(sale_total) as "open", sum(sale_total) as sale_total, sum(articles) as articles into outfile '/Users/gsc/Sites/sales.csv' fields terminated by ',' optionally enclosed by '"' lines terminated by '\n' from sales group by date(sales.sale_date);
diff --git a/stock.js b/stock.js
 //# dc.js Getting Started and How-To Guide
 'use strict';

 /* jshint globalstrict: true */
 /* global dc,d3,crossfilter,colorbrewer */

 // ### Create Chart Objects
 // Create chart objects assocated with the container elements identified by the css selector.
 // Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or filtered by other page controls.
 var gainOrLossChart = dc.pieChart("#gain-loss-chart");
 var storeSalesChart = dc.pieChart("#store-sales-chart");
 var fluctuationChart = dc.barChart("#fluctuation-chart");
 var quarterChart = dc.pieChart("#quarter-chart");
 var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
 var moveChart = dc.lineChart("#monthly-move-chart");
 var volumeChart = dc.barChart("#monthly-volume-chart");
 var yearlyBubbleChart = dc.bubbleChart("#yearly-bubble-chart");
 var debug;

 // ### Anchor Div for Charts
 /*
 // A div anchor that can be identified by id
    <div id="your-chart"></div>
 // Title or anything you want to add above the chart
    <div id="chart"><span>Days by Gain or Loss</span></div>
 // ##### .turnOnControls()
 // If a link with css class "reset" is present then the chart
 // will automatically turn it on/off based on whether there is filter
 // set on this chart (slice selection for pie chart and brush
 // selection for bar chart). Enable this with `chart.turnOnControls(true)`
     <div id="chart">
       <a class="reset" href="javascript:myChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
     </div>
 // dc.js will also automatically inject applied current filter value into
 // any html element with css class set to "filter"
    <div id="chart">
        <span class="reset" style="display: none;">Current filter: <span class="filter"></span></span>
    </div>
 */

 //### Load your data
 //Data can be loaded through regular means with your
 //favorite javascript library
 //
 //```javascript
 //d3.csv("data.csv", function(data) {...};
 //d3.json("data.json", function(data) {...};
 //jQuery.getJson("data.json", function(data){...});
 //```
 d3.csv("sales.csv", function (data) {
    /* since its a csv file we need to format the data a bit */
    //var dateFormat = d3.time.format("%m/%d/%Y");
    var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
    var numberFormat = d3.format(".2f");

    var prevday = -1;
    var store = -1;
    data.forEach(function (d) {
        d.dd = dateFormat.parse(d.date);
        // if (+d.store != store){
        //     store = +d.store;
        //     prevday = -1;
        // }
        debug = d.dd;
        d.period = d3.time.day(d.dd); // pre-calculate month for better performance
        d.close = +d.close; // coerce to number
        if (prevday != -1) {
            d.open = prevday;
        }
        else {
            d.open = +d.open;
        }
        d.fluctuation = d.close - d.open;
        prevday = +d.close;
    });

    console.log(data)

    //### Create Crossfilter Dimensions and Groups
    //See the [crossfilter API](https://github.com/square/crossfilter/wiki/API-Reference) for reference.
    var ndx = crossfilter(data);
    var all = ndx.groupAll();
    debug = ndx;

    // dimension by year
    var yearlyDimension = ndx.dimension(function (d) {
        return d3.time.year(d.dd).getFullYear();
    });
    // maintain running tallies by year as filters are applied or removed
    var yearlyPerformanceGroup = yearlyDimension.group().reduce(
        /* callback for when data is added to the current filter results */
        function (p, v) {
            ++p.count;
            p.absGain += v.fluctuation;
            p.fluctuation += Math.abs(v.fluctuation);
            p.sumIndex += Math.abs(v.open + v.close) / 2;
            p.avgIndex = p.sumIndex / p.count;
            p.percentageGain = (p.absGain / p.avgIndex) * 100;
            p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
            return p;
        },
        /* callback for when data is removed from the current filter results */
        function (p, v) {
            --p.count;
            p.absGain -= v.fluctuation;
            p.fluctuation -= Math.abs(v.fluctuation);
            p.sumIndex -= Math.abs(v.open + v.close) / 2;
            p.avgIndex = p.sumIndex / p.count;
            p.percentageGain = (p.absGain / p.avgIndex) * 100;
            p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
            return p;
        },
        /* initialize p */
        function () {
            return {count: 0, absGain: 0, fluctuation: 0, fluctuationPercentage: 0, sumIndex: 0, avgIndex: 0, percentageGain: 0};
        }
    );

    // dimension by full date
    var dateDimension = ndx.dimension(function (d) {
        return d.dd;
    });

    // dimension by period of time
    var movePeriods = ndx.dimension(function (d) {
        return d.period;
    });
    // group by total movement within month
    var monthlySaleGroup = movePeriods.group().reduceSum(function (d) {
        return Math.abs(d.fluctuation);
    });
    // group by total volume within move, and scale down result
    var volumeByPeriodGroup = movePeriods.group().reduceSum(function (d) {
        return d.volume;
    });
    var indexAvgByMonthGroup = movePeriods.group().reduce(
        function (p, v) {
            ++p.days;
            p.total += (v.open + v.close) / 2;
            p.avg = Math.round(p.total / p.days);
            return p;
        },
        function (p, v) {
            --p.days;
            p.total -= (v.open + v.close) / 2;
            p.avg = p.days ? Math.round(p.total / p.days) : 0;
            return p;
        },
        function () {
            return {days: 0, total: 0, avg: 0};
        }
    );

    // create categorical dimension
    var gainOrLoss = ndx.dimension(function (d) {
        return d.open > d.close ? "Loss" : "Gain";
    });
    // produce counts records in the dimension
    var gainOrLossGroup = gainOrLoss.group();

    // create categorical dimension
    var storeSales = ndx.dimension(function (d) {
        return d.store;
    });
    // produce counts records in the dimension
    var storeSalesGroup = storeSales.group().reduceSum(function (d) {
        return d.volume;
    });

    // determine a histogram of percent changes
    var fluctuation = ndx.dimension(function (d) {
        return d.store;
        //return Math.round((d.fluctuation) / d.open * 100);
    });

    var fluctuationGroup = fluctuation.group().reduceSum(function (d) {
        //return Math.round((d.fluctuation) / d.open * 100);
        //console.log(d.close+" "+d.open+" "+d.fluctuation);
        //return d.store;
        return d.close-d.open;
    });

    // summerize volume by quarter
    var quarter = ndx.dimension(function (d) {
        var month = d.dd.getMonth();
        if (month <= 2)
            return "Q1";
        else if (month > 3 && month <= 5)
            return "Q2";
        else if (month > 5 && month <= 8)
            return "Q3";
        else
            return "Q4";
    });
    var quarterGroup = quarter.group().reduceSum(function (d) {
        return d.volume;
    });

    // counts per weekday
    var dayOfWeek = ndx.dimension(function (d) {
        var day = d.dd.getDay();
        var name=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
        return day+"."+name[day];
    });
    var dayOfWeekGroup = dayOfWeek.group().reduceSum(function (d) {
        return d.close/10000;
    });

    //### Define Chart Attributes
    //Define chart attributes using fluent methods. See the [dc API Reference](https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-1.7.0.md) for more information
    //
    var siScaleFormat = d3.format("s");
    var tickManEnFormat = function (v) {
            return siScaleFormat(v) + "万円";
        };
    //#### Bubble Chart
    //Create a bubble chart and use the given css selector as anchor. You can also specify
    //an optional chart group for this chart to be scoped within. When a chart belongs
    //to a specific group then any interaction with such chart will only trigger redraw
    //on other charts within the same chart group.
    /* dc.bubbleChart("#yearly-bubble-chart", "chartGroup") */
    yearlyBubbleChart
        .width(990) // (optional) define chart width, :default = 200
        .height(250)  // (optional) define chart height, :default = 200
        .transitionDuration(1500) // (optional) define chart transition duration, :default = 750
        .margins({top: 10, right: 50, bottom: 30, left: 60})
        .dimension(yearlyDimension)
        //Bubble chart expect the groups are reduced to multiple values which would then be used
        //to generate x, y, and radius for each key (bubble) in the group
        .group(yearlyPerformanceGroup)
        .colors(colorbrewer.RdYlGn[9]) // (optional) define color function or array for bubbles
        .colorDomain([-500, 500]) //(optional) define color domain to match your data domain if you want to bind data or color
        //##### Accessors
        //Accessor functions are applied to each value returned by the grouping
        //
        //* `.colorAccessor` The returned value will be mapped to an internal scale to determine a fill color
        //* `.keyAccessor` Identifies the `X` value that will be applied against the `.x()` to identify pixel location
        //* `.valueAccessor` Identifies the `Y` value that will be applied agains the `.y()` to identify pixel location
        //* `.radiusValueAccessor` Identifies the value that will be applied agains the `.r()` determine radius size, by default this maps linearly to [0,100]
        .colorAccessor(function (d) {
            return d.value.absGain;
        })
        .keyAccessor(function (p) {
            return p.value.absGain;
        })
        .valueAccessor(function (p) {
            return p.value.percentageGain;
        })
        .radiusValueAccessor(function (p) {
            return p.value.fluctuationPercentage;
        })
        .maxBubbleRelativeSize(0.3)
        .x(d3.scale.linear().domain([-2500, 2500]))
        .y(d3.scale.linear().domain([-100, 100]))
        .r(d3.scale.linear().domain([0, 40000000]))
        //##### Elastic Scaling
        //`.elasticX` and `.elasticX` determine whether the chart should rescale each axis to fit data.
        //The `.yAxisPadding` and `.xAxisPadding` add padding to data above and below their max values in the same unit domains as the Accessors.
        .elasticY(true)
        .elasticX(true)
        .yAxisPadding(100)
        .xAxisPadding(500)
        .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
        .renderVerticalGridLines(true) // (optional) render vertical grid lines, :default=false
        .xAxisLabel('Index Gain') // (optional) render an axis label below the x axis
        .yAxisLabel('Index Gain %') // (optional) render a vertical axis lable left of the y axis
        //#### Labels and  Titles
        //Labels are displaed on the chart for each bubble. Titles displayed on mouseover.
        .renderLabel(true) // (optional) whether chart should render labels, :default = true
        .label(function (p) {
            return p.key;
        })
        .renderTitle(true) // (optional) whether chart should render titles, :default = false
        .title(function (p) {
            return [p.key,
                   "Index Gain: " + numberFormat(p.value.absGain),
                   "Index Gain in Percentage: " + numberFormat(p.value.percentageGain) + "%",
                   "Fluctuation / Index Ratio: " + numberFormat(p.value.fluctuationPercentage) + "%"]
                   .join("\n");
        })
        //#### Customize Axis
        //Set a custom tick format. Note `.yAxis()` returns an axis object, so any additional method chaining applies to the axis, not the chart.
        .yAxis().tickFormat(function (v) {
            return v + "%";
        });

    // #### Pie/Donut Chart
    // Create a pie chart and use the given css selector as anchor. You can also specify
    // an optional chart group for this chart to be scoped within. When a chart belongs
    // to a specific group then any interaction with such chart will only trigger redraw
    // on other charts within the same chart group.

    gainOrLossChart
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(gainOrLoss) // set dimension
        .group(gainOrLossGroup) // set group
        /* (optional) by default pie chart will use group.key as it's label
         * but you can overwrite it with a closure */
        .label(function (d) {
            if (gainOrLossChart.hasFilter() && !gainOrLossChart.hasFilter(d.key))
                return d.key + "(0%)";
            return d.key + "(" + Math.floor(d.value / all.value() * 100) + "%)";
        }) /*
        // (optional) whether chart should render labels, :default = true
        .renderLabel(true)
        // (optional) if inner radius is used then a donut chart will be generated instead of pie chart
        .innerRadius(40)
        // (optional) define chart transition duration, :default = 350
        .transitionDuration(500)
        // (optional) define color array for slices
        .colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        // (optional) define color domain to match your data domain if you want to bind data or color
        .colorDomain([-1750, 1644])
        // (optional) define color value accessor
        .colorAccessor(function(d, i){return d.value;})
        */;

    storeSalesChart
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .slicesCap(10)
        .innerRadius(20)
        .dimension(storeSales) // set dimension
        .group(storeSalesGroup) // set group
        ;

    quarterChart.width(180)
        .height(180)
        .radius(80)
        .innerRadius(30)
        .dimension(quarter)
        .group(quarterGroup);

    //#### Row Chart
    dayOfWeekChart.width(180)
        .height(180)
        .margins({top: 20, left: 10, right: 10, bottom: 20})
        .group(dayOfWeekGroup)
        .dimension(dayOfWeek)
        // assign colors to each value in the x scale domain
        .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        .label(function (d) {
            return d.key.split(".")[1];
        })
        // title sets the row text
        .title(function (d) {
            return d.value;
        })
        .elasticX(true)
        .xAxis().tickFormat(tickManEnFormat).ticks(2);

    //#### Bar Chart
    // Create a bar chart and use the given css selector as anchor. You can also specify
    // an optional chart group for this chart to be scoped within. When a chart belongs
    // to a specific group then any interaction with such chart will only trigger redraw
    // on other charts within the same chart group.
    /* dc.barChart("#volume-month-chart") */
    fluctuationChart.width(420)
        .height(180)
        .margins({top: 10, right: 50, bottom: 30, left: 40})
        .dimension(fluctuation)
        .group(fluctuationGroup)
        .elasticY(true)
        // (optional) whether bar should be center to its x value. Not needed for ordinal chart, :default=false
        .centerBar(true)
        // (optional) set gap between bars manually in px, :default=2
        .gap(1)
        // (optional) set filter brush rounding
        .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.linear().domain([-100, 300]))
        .renderHorizontalGridLines(true)
        // customize the filter displayed in the control span
        .filterPrinter(function (filters) {
            var filter = filters[0], s = "";
            s += numberFormat(filter[0]) + "% -> " + numberFormat(filter[1]) + "%";
            return s;
        })
        .xAxis().ticks(5);

    // Customize axis
    fluctuationChart.xAxis().tickFormat(
        function (v) { return v + "%"; });
    fluctuationChart.yAxis().ticks(5);

    //#### Stacked Area Chart
    //Specify an area chart, by using a line chart with `.renderArea(true)`
    moveChart
        .renderArea(true)
        .width(990)
        .height(200)
        .transitionDuration(1000)
        .margins({top: 30, right: 50, bottom: 25, left: 60})
        .dimension(movePeriods)
        .mouseZoomable(true)
        // Specify a range chart to link the brush extent of the range with the zoom focue of the current chart.
        .rangeChart(volumeChart)
        .x(d3.time.scale().domain([new Date(2013, 5, 1), new Date(2013, 11, 31)]))
        .round(d3.time.month.round)
        .xUnits(d3.time.months)
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
        .brushOn(false)
        // Add the base layer of the stack with group. The second parameter specifies a series name for use in the legend
        // The `.valueAccessor` will be used for the base layer
        .group(indexAvgByMonthGroup, "Average Sale")
        .valueAccessor(function (d) {
            return d.value.avg;
        })
        // stack additional layers with `.stack`. The first paramenter is a new group.
        // The second parameter is the series name. The third is a value accessor.
        .stack(monthlySaleGroup, "Total Sales", function (d) {
            return d.value;
        })
        // title can be called by any stack layer.
        .title(function (d) {
            var value = d.value.avg ? d.value.avg : d.value;
            if (isNaN(value)) value = 0;
            return dateFormat(d.key) + "\n" + numberFormat(value);
        })
        .yAxis().tickFormat(tickManEnFormat);

    volumeChart.width(990)
        .height(40)
        .margins({top: 0, right: 50, bottom: 20, left: 60})
        .dimension(movePeriods)
        .group(volumeByPeriodGroup)
        .centerBar(true)
        .gap(1)
        .x(d3.time.scale().domain([new Date(2013, 5, 1), new Date(2013, 11, 31)]))
        .round(d3.time.day.round)
        .alwaysUseRounding(true)
        .xUnits(d3.time.days);

    /*
    //#### Data Count
    // Create a data count widget and use the given css selector as anchor. You can also specify
    // an optional chart group for this chart to be scoped within. When a chart belongs
    // to a specific group then any interaction with such chart will only trigger redraw
    // on other charts within the same chart group.
    <div id="data-count">
        <span class="filter-count"></span> selected out of <span class="total-count"></span> records
    </div>
    */
    dc.dataCount(".dc-data-count")
        .dimension(ndx)
        .group(all);

    /*
    //#### Data Table
    // Create a data table widget and use the given css selector as anchor. You can also specify
    // an optional chart group for this chart to be scoped within. When a chart belongs
    // to a specific group then any interaction with such chart will only trigger redraw
    // on other charts within the same chart group.
    <!-- anchor div for data table -->
    <div id="data-table">
        <!-- create a custom header -->
        <div class="header">
            <span>Date</span>
            <span>Open</span>
            <span>Close</span>
            <span>Change</span>
            <span>Volume</span>
        </div>
        <!-- data rows will filled in here -->
    </div>
    */
    dc.dataTable(".dc-data-table")
        .dimension(dateDimension)
        // data table does not use crossfilter group but rather a closure
        // as a grouping function
        .group(function (d) {
            var format = d3.format("02d");
            return d.dd.getFullYear() + "/" + format((d.dd.getMonth() + 1));
        })
        .size(10) // (optional) max number of records to be shown, :default = 25
        // dynamic columns creation using an array of closures
        .columns([
            function (d) {
                return d.date;
            },
            function (d) {
                return numberFormat(d.open);
            },
            function (d) {
                return numberFormat(d.close);
            },
            function (d) {
                return numberFormat(d.fluctuation);
            },
            function (d) {
                return d.volume;
            }
        ])
        // (optional) sort using the given field, :default = function(d){return d;}
        .sortBy(function (d) {
            return d.dd;
        })
        // (optional) sort order, :default ascending
        .order(d3.ascending)
        // (optional) custom renderlet to post-process chart using D3
        .renderlet(function (table) {
            table.selectAll(".dc-table-group").classed("info", true);
        });

    /*
    //#### Geo Choropleth Chart
    //Create a choropleth chart and use the given css selector as anchor. You can also specify
    //an optional chart group for this chart to be scoped within. When a chart belongs
    //to a specific group then any interaction with such chart will only trigger redraw
    //on other charts within the same chart group.
    dc.geoChoroplethChart("#us-chart")
        .width(990) // (optional) define chart width, :default = 200
        .height(500) // (optional) define chart height, :default = 200
        .transitionDuration(1000) // (optional) define chart transition duration, :default = 1000
        .dimension(states) // set crossfilter dimension, dimension key should match the name retrieved in geo json layer
        .group(stateRaisedSum) // set crossfilter group
        // (optional) define color function or array for bubbles
        .colors(["#ccc", "#E2F2FF","#C4E4FF","#9ED2FF","#81C5FF","#6BBAFF","#51AEFF","#36A2FF","#1E96FF","#0089FF","#0061B5"])
        // (optional) define color domain to match your data domain if you want to bind data or color
        .colorDomain([-5, 200])
        // (optional) define color value accessor
        .colorAccessor(function(d, i){return d.value;})
        // Project the given geojson. You can call this function mutliple times with different geojson feed to generate
        // multiple layers of geo paths.
        //
        // * 1st param - geo json data
        // * 2nd param - name of the layer which will be used to generate css class
        // * 3rd param - (optional) a function used to generate key for geo path, it should match the dimension key
        // in order for the coloring to work properly
        .overlayGeoJson(statesJson.features, "state", function(d) {
            return d.properties.name;
        })
        // (optional) closure to generate title for path, :default = d.key + ": " + d.value
        .title(function(d) {
            return "State: " + d.key + "\nTotal Amount Raised: " + numberFormat(d.value ? d.value : 0) + "M";
        });

        //#### Bubble Overlay Chart
        // Create a overlay bubble chart and use the given css selector as anchor. You can also specify
        // an optional chart group for this chart to be scoped within. When a chart belongs
        // to a specific group then any interaction with such chart will only trigger redraw
        // on other charts within the same chart group.
        dc.bubbleOverlay("#bubble-overlay")
            // bubble overlay chart does not generate it's own svg element but rather resue an existing
            // svg to generate it's overlay layer
            .svg(d3.select("#bubble-overlay svg"))
            .width(990) // (optional) define chart width, :default = 200
            .height(500) // (optional) define chart height, :default = 200
            .transitionDuration(1000) // (optional) define chart transition duration, :default = 1000
            .dimension(states) // set crossfilter dimension, dimension key should match the name retrieved in geo json layer
            .group(stateRaisedSum) // set crossfilter group
            // closure used to retrieve x value from multi-value group
            .keyAccessor(function(p) {return p.value.absGain;})
            // closure used to retrieve y value from multi-value group
            .valueAccessor(function(p) {return p.value.percentageGain;})
            // (optional) define color function or array for bubbles
            .colors(["#ccc", "#E2F2FF","#C4E4FF","#9ED2FF","#81C5FF","#6BBAFF","#51AEFF","#36A2FF","#1E96FF","#0089FF","#0061B5"])
            // (optional) define color domain to match your data domain if you want to bind data or color
            .colorDomain([-5, 200])
            // (optional) define color value accessor
            .colorAccessor(function(d, i){return d.value;})
            // closure used to retrieve radius value from multi-value group
            .radiusValueAccessor(function(p) {return p.value.fluctuationPercentage;})
            // set radius scale
            .r(d3.scale.linear().domain([0, 3]))
            // (optional) whether chart should render labels, :default = true
            .renderLabel(true)
            // (optional) closure to generate label per bubble, :default = group.key
            .label(function(p) {return p.key.getFullYear();})
            // (optional) whether chart should render titles, :default = false
            .renderTitle(true)
            // (optional) closure to generate title per bubble, :default = d.key + ": " + d.value
            .title(function(d) {
                return "Title: " + d.key;
            })
            // add data point to it's layer dimension key that matches point name will be used to
            // generate bubble. multiple data points can be added to bubble overlay to generate
            // multiple bubbles
            .point("California", 100, 120)
            .point("Colorado", 300, 120)
            // (optional) setting debug flag to true will generate a transparent layer on top of
            // bubble overlay which can be used to obtain relative x,y coordinate for specific
            // data point, :default = false
            .debug(true);
    */

    //#### Rendering
    //simply call renderAll() to render all charts on the page
    dc.renderAll();
    /*
    // or you can render charts belong to a specific chart group
    dc.renderAll("group");
    // once rendered you can call redrawAll to update charts incrementally when data
    // change without re-rendering everything
    dc.redrawAll();
    // or you can choose to redraw only those charts associated with a specific chart group
    dc.redrawAll("group");
    */
 });

 //#### Version
 //Determine the current version of dc with `dc.version`
 d3.selectAll("#version").text(dc.version);

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Demo</title>

	<meta charset="UTF-8">

	<link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="http://nickqizhu.github.io/dc.js/css/dc.css"/>

	<style>
	#monthly-volume-chart g.y {
	display: none;
	}
	</style>
	</head>
	<body>

	<div class="container">

	<h2>Sales 2013/06/01-2013/11/21</h2>

	<div class="row">
	<div id="yearly-bubble-chart" class="dc-chart">
	<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
	<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();"
	style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	</div>

	<div class="row">
	<div id="gain-loss-chart">
	<strong>Days by Gain/Loss</strong>
	<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="store-sales-chart">
	<strong>Sales per store (top 20)</strong>
	<a class="reset" href="javascript:storeSalesChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="quarter-chart">
	<strong>Quarters</strong>
	<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>

	<div id="day-of-week-chart">
	<strong>Day of Week</strong>
	<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>

	<div id="fluctuation-chart">
	<strong>Days by Fluctuation(%)</strong>
	<span class="reset" style="display: none;">range: <span class="filter"></span></span>
	<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	</div>

	<div class="row">
	<div id="monthly-move-chart">
	<strong>Average sales & Total sales</strong>
	<span class="reset" style="display: none;">range: <span class="filter"></span></span>
	<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
	style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	</div>

	<div class="row">
	<div id="monthly-volume-chart">
	</div>
	<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
	</div>

	<div class="row">
	<div>
	<div class="dc-data-count">
	<span class="filter-count"></span> selected out of <span class="total-count"></span> records \| <a
	href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
	</div>
	</div>
	<table class="table table-hover dc-data-table">
	<thead>
	<tr class="header">
	<th>Date</th>
	<th>Open</th>
	<th>Close</th>
	<th>Change</th>
	<th>Volume</th>
	</tr>
	</thead>
	</table>
	</div>

	<div class="clearfix"></div>

	</div>

	<script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
	<script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
	<script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
	<script type="text/javascript" src="http://nickqizhu.github.io/dc.js/js/colorbrewer.js"></script>

	<script type="text/javascript" src="stock.js"></script>

	</body>
	</html>