LimitLess-admin-panel/assets/js/charts/d3/lines/lines_advanced_small_multiples.js

/* ------------------------------------------------------------------------------
 *
 *  # D3.js - small multiples chart
 *
 *  Demo d3.js small multiples chart setup with .csv data source
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */

$(function () {

    // Initialize chart
    smallMultiples('#d3-small-multiples', 100);

    // Chart setup
    function smallMultiples(element, height) {


        // Basic setup
        // ------------------------------

        // Define main variables
        var d3Container = d3.select(element),
            margin = {top: 5, right: 10, bottom: 5, left: 10},
            width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
            height = height - margin.top - margin.bottom - 5;

        // Format data
        var parseDate = d3.time.format("%b %Y").parse;



        // Construct scales
        // ------------------------------

        // Horizontal
        var x = d3.time.scale()
            .range([0, width]);

        // Vertical
        var y = d3.scale.linear()
            .range([height, 0]);



        // Construct chart layout
        // ------------------------------

        // Area
        var area = d3.svg.area()
            .x(function(d) { return x(d.date); })
            .y0(height)
            .y1(function(d) { return y(d.price); });

        // Line
        var line = d3.svg.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.price); });


        // Load data
        // ------------------------------

        d3.csv("assets/demo_data/d3/lines/lines_small_multiples.csv", function(error, data) {

            // Pull out values
            data.forEach(function(d) {
                d.price = +d.price;
                d.date = parseDate(d.date);
            })

            // Nest data by symbol
            var symbols = d3.nest()
                .key(function(d) { return d.symbol; })
                .entries(data);

            // Compute the maximum price per symbol, needed for the y-domain.
            symbols.forEach(function(s) {
                s.maxPrice = d3.max(s.values, function(d) { return d.price; });
            });

            // Compute the minimum and maximum date across symbols.
            // We assume values are sorted by date.
            x.domain([
                d3.min(symbols, function(s) { return s.values[0].date; }),
                d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; })
            ]);


            // Create chart
            // ------------------------------

            // Add SVG elements
            var svg = d3Container.selectAll("svg")
                .data(symbols)
                .enter()
                .append("svg")
                    .attr("class", "multiples")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


            //
            // Append chart elements
            //

            // Add area
            svg.append("path")
                //.attr("class", function(d) {return d.key.toLowerCase();})
                .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); })
                .attr("class", "d3-area")
                .style("fill", "#81D4FA");

            // Add line
            svg.append("path")
                .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); })
                .attr("class", "d3-line")
                .style("stroke", "rgba(0,0,0,0.5)");

            // Add name label
            svg.append("text")
                .attr("class", "multiples-label")
                .attr("x", width - 8)
                .attr("y", height - 8)
                .style("fill", "#fff")
                .style("text-anchor", "end")
                .style("text-weight", 500)
                .text(function(d) { return d.key; });



            // Resize chart
            // ------------------------------

            // Call function on window resize
            $(window).on('resize', resize);

            // Call function on sidebar width change
            $('.sidebar-control').on('click', resize);

            // Resize function
            // 
            // Since D3 doesn't support SVG resize by default,
            // we need to manually specify parts of the graph that need to 
            // be updated on window resize
            function resize() {

                // Layout variables
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;


                // Layout
                // -------------------------

                // Resize all multiples
                d3.selectAll(".multiples").attr("width", width + margin.left + margin.right);

                // Horizontal range
                x.range([0, width]);


                // Chart elements
                // -------------------------

                // Line path
                svg.selectAll('.d3-line').attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); })

                // Area path
                svg.selectAll('.d3-area').attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });

                // Text label
                svg.selectAll('.multiples-label').attr("x", width - 8);
            }
        });
    }
});