[FEATURE] Dynamic graph to select documents in time series.

gargantext_web/urls.py

@@ -4,8 +4,8 @@ from django.contrib import admin
 
 from gargantext_web.views import home, projects, project, corpus
 from gargantext_web.views import delete_project, delete_corpus
-from gargantext_web.views import exploration
-from gargantext_web.views import explorer_graph, explorer_matrix
+from gargantext_web.views import exploration, send_csv
+from gargantext_web.views import explorer_graph, explorer_matrix, explorer_chart
 
 admin.autodiscover()
 
@@ -27,9 +27,12 @@ urlpatterns = patterns('',
     url(r'^project/(\d+)/corpus/(\d+)/delete/$', delete_corpus),
     
     url(r'^graph$', explorer_graph),
+    url(r'^chart$', explorer_chart),
     url(r'^matrix$', explorer_matrix),
     
     url(r'^exploration$', exploration),
+
+    url(r'^data.csv$', send_csv),
 )
 
 from django.conf import settings

gargantext_web/views.py

@@ -401,5 +401,60 @@ def exploration(request):
     
     return HttpResponse(html)
 
+def explorer_chart(request):
+    t = get_template('chart.html')
+    user = request.user
+    date = datetime.datetime.now()
+
+    html = t.render(Context({\
+            'user': user,\
+            'date': date,\
+            }))
+    
+    return HttpResponse(html)
 
+import csv
 
+def send_csv(request):
+    '''
+    Create the HttpResponse object with the appropriate CSV header.
+    '''
+    response = HttpResponse(content_type='text/csv')
+    response['Content-Disposition'] = 'attachment; filename="somefilename.csv"'
+
+    writer = csv.writer(response)
+
+#    file = open('/srv/gargantext/static/js/d3/ndx.csv', 'r')
+#    for line in file.readlines():
+#        writer.writerow(line)
+    
+    writer.writerow(['date','open','high','low','close','volume','oi'])
+    writer.writerow(['12/19/2001','96.05','99.98','95.79','99.98','1260','0'])
+    writer.writerow(['12/20/2001','104.3','104.39','99.98','104.39','197','0'])
+    writer.writerow(['12/21/2001','109.07','109.13','103.73','109.13','28','0'])
+    writer.writerow(['12/24/2001','113.57','114.55','109.13','114.55','32','0'])
+    writer.writerow(['12/25/2001','120.09','120.25','114.55','120.25','15','0'])
+    writer.writerow(['12/26/2001','125.27','125.27','120.25','125.27','100','0'])
+    writer.writerow(['12/19/2002','96.05','99.98','95.79','99.98','1260','0'])
+    writer.writerow(['12/20/2002','104.3','104.39','99.98','104.39','197','0'])
+    writer.writerow(['12/21/2002','109.07','109.13','103.73','109.13','28','0'])
+    writer.writerow(['12/24/2002','113.57','114.55','109.13','114.55','32','0'])
+    writer.writerow(['12/25/2002','120.09','120.25','114.55','120.25','15','0'])
+    writer.writerow(['12/26/2002','125.27','125.27','120.25','125.27','100','0'])
+    writer.writerow(['12/19/2003','96.05','99.98','95.79','99.98','1260','0'])
+    writer.writerow(['12/20/2003','104.3','104.39','99.98','104.39','197','0'])
+    writer.writerow(['12/21/2003','109.07','109.13','103.73','109.13','28','0'])
+    writer.writerow(['12/24/2003','113.57','114.55','109.13','114.55','32','0'])
+    writer.writerow(['12/25/2003','120.09','120.25','114.55','120.25','15','0'])
+    writer.writerow(['12/26/2003','125.27','125.27','120.25','125.27','100','0'])
+    writer.writerow(['12/19/2004','96.05','99.98','95.79','99.98','1260','0'])
+    writer.writerow(['12/20/2004','104.3','104.39','99.98','104.39','197','0'])
+    writer.writerow(['12/21/2004','109.07','109.13','103.73','109.13','28','0'])
+    writer.writerow(['12/24/2004','113.57','114.55','109.13','114.55','32','0'])
+    writer.writerow(['12/25/2004','120.09','120.25','114.55','120.25','15','0'])
+    writer.writerow(['12/26/2004','125.27','125.27','120.25','125.27','100','0'])
+
+
+
+
+    return response

static/js/d3/DC.js

+
+// var gainOrLossChart = dc.pieChart("#gain-loss-chart");
+// var fluctuationChart = dc.barChart("#fluctuation-chart");
+// var quarterChart = dc.pieChart("#quarter-chart");
+// var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
+var moveChart = dc.compositeChart("#monthly-move-chart"); 
+var volumeChart = dc.barChart("#monthly-volume-chart");
+// var yearlyBubbleChart = dc.bubbleChart("#yearly-bubble-chart");
+
+// set dc.js version in title
+d3.selectAll("#version").text(dc.version);
+
+// load data from a csv file
+//
+//
+//
+//
+d3.csv("data.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 numberFormat = d3.format(".2f");
+
+            data.forEach(function (e) {
+                e.dd = dateFormat.parse(e.date);
+                e.month = d3.time.month(e.dd); // pre-calculate month for better performance
+            });
+
+            // feed it through crossfilter
+            var ndx = crossfilter(data);
+            var all = ndx.groupAll();
+
+            /*
+            var yearlyDimension = ndx.dimension(function (d) {
+                return d3.time.year(d.dd);
+            });
+            var yearlyPerformanceGroup = yearlyDimension.group().reduce(
+                    //add
+                    function (p, v) {
+                        ++p.count;
+                        p.absGain += +v.close - +v.open;
+                        p.fluctuation += Math.abs(+v.close - +v.open);
+                        p.sumIndex += (+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;
+                    },
+                    //remove
+                    function (p, v) {
+                        --p.count;
+                        p.absGain -= +v.close - +v.open;
+                        p.fluctuation -= Math.abs(+v.close - +v.open);
+                        p.sumIndex -= (+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;
+                    },
+                    //init
+                    function () {
+                        return {count: 0, absGain: 0, fluctuation: 0, fluctuationPercentage: 0, sumIndex: 0, avgIndex: 0, percentageGain: 0};
+                    }
+            );
+
+            var dateDimension = ndx.dimension(function (d) {
+                return d.dd;
+            });
+            */
+
+            //volumeChart:(1)
+            //moveChart:(1)
+            // monthly index avg fluctuation in percentage
+            var moveMonths = ndx.dimension(function (d) {
+                return d.month;
+            });
+
+            //moveChart:(3)
+            var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
+                return Math.abs(+d.close - +d.open);
+            });
+
+            //volumeChart:(2)
+            var volumeByMonthGroup = moveMonths.group().reduceSum(function (d) {
+                return d.volume / 500000;
+            });
+
+            //moveChart:(2)
+            var indexAvgByMonthGroup = moveMonths.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 == 0 ? 0 : Math.round(p.total / p.days);
+                        return p;
+                    },
+                    function () {
+                        return {days: 0, total: 0, avg: 0};
+                    }
+            );
+
+            /*
+            var gainOrLoss = ndx.dimension(function (d) {
+                return +d.open > +d.close ? "Loss" : "Gain";
+            });
+            var gainOrLossGroup = gainOrLoss.group();
+
+            var fluctuation = ndx.dimension(function (d) {
+                return Math.round((d.close - d.open) / d.open * 100);
+            });
+            var fluctuationGroup = fluctuation.group();
+
+            var quarter = ndx.dimension(function (d) {
+                var month = d.dd.getMonth();
+                if (month <= 3)
+                    return "Q1";
+                else if (month > 3 && month <= 5)
+                    return "Q2";
+                else if (month > 5 && month <= 7)
+                    return "Q3";
+                else
+                    return "Q4";
+            });
+            var quarterGroup = quarter.group().reduceSum(function (d) {
+                return d.volume;
+            });
+
+            var dayOfWeek = ndx.dimension(function (d) {
+                var day = d.dd.getDay();
+                switch (day) {
+                    case 0:
+                        return "0.Sun";
+                    case 1:
+                        return "1.Mon";
+                    case 2:
+                        return "2.Tue";
+                    case 3:
+                        return "3.Wed";
+                    case 4:
+                        return "4.Thu";
+                    case 5:
+                        return "5.Fri";
+                    case 6:
+                        return "6.Sat";
+                }
+            });
+            var dayOfWeekGroup = dayOfWeek.group();
+            */
+
+            /*
+            yearlyBubbleChart.width(990)
+                    .height(250)
+                    .margins({top: 10, right: 50, bottom: 30, left: 40})
+                    .dimension(yearlyDimension)
+                    .group(yearlyPerformanceGroup)
+                    .transitionDuration(1500)
+                    .colors(["#a60000", "#ff0000", "#ff4040", "#ff7373", "#67e667", "#39e639", "#00cc00"])
+                    .colorDomain([-12000, 12000])
+                    .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, 4000]))
+                    .elasticY(true)
+                    .yAxisPadding(100)
+                    .elasticX(true)
+                    .xAxisPadding(500)
+                    .renderHorizontalGridLines(true)
+                    .renderVerticalGridLines(true)
+                    .renderLabel(true)
+                    .renderTitle(true)
+                    .label(function (p) {
+                        return p.key.getFullYear();
+                    })
+                    .title(function (p) {
+                        return p.key.getFullYear()
+                                + "\n"
+                                + "Index Gain: " + numberFormat(p.value.absGain) + "\n"
+                                + "Index Gain in Percentage: " + numberFormat(p.value.percentageGain) + "%\n"
+                                + "Fluctuation / Index Ratio: " + numberFormat(p.value.fluctuationPercentage) + "%";
+                    })
+                    .yAxis().tickFormat(function (v) {
+                        return v + "%";
+                    });
+            */
+
+            /*
+            gainOrLossChart.width(180)
+                    .height(180)
+                    .radius(80)
+                    .dimension(gainOrLoss)
+                    .group(gainOrLossGroup)
+                    .label(function (d) {
+                        return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)";
+                    });
+            */
+
+            /*
+            quarterChart.width(180)
+                    .height(180)
+                    .radius(80)
+                    .innerRadius(30)
+                    .dimension(quarter)
+                    .group(quarterGroup);
+            */
+
+            /*
+            dayOfWeekChart.width(180)
+                .height(180)
+                .margins({top: 20, left: 10, right: 10, bottom: 20})
+                .group(dayOfWeekGroup)
+                .dimension(dayOfWeek)
+                .colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
+                .label(function (d){
+                    return d.key.split(".")[1];
+                })
+                .xAxis().ticks(4);
+            */
+
+            /*
+            fluctuationChart.width(420)
+                    .height(180)
+                    .margins({top: 10, right: 50, bottom: 30, left: 40})
+                    .dimension(fluctuation)
+                    .group(fluctuationGroup)
+                    .elasticY(true)
+                    .centerBar(true)
+                    .gap(1)
+                    .round(dc.round.floor)
+                    .x(d3.scale.linear().domain([-25, 25]))
+                    .renderHorizontalGridLines(true)
+                    .xAxis()
+                    .tickFormat(function (v) {
+                        return v + "%";
+                    });
+            */
+
+
+            moveChart.width(800)
+                    .height(150)
+                    .transitionDuration(1000)
+                    .margins({top: 10, right: 50, bottom: 25, left: 40})
+                    .dimension(moveMonths)
+                    .group(indexAvgByMonthGroup)
+                    .valueAccessor(function (d) {
+                        return d.value.avg;
+                    })
+                    .x(d3.time.scale().domain([new Date(1998, 12, 1), new Date(2013, 5, 31)]))
+                    .round(d3.time.month.round)
+                    .xUnits(d3.time.months)
+                    .elasticY(true)
+                    .renderHorizontalGridLines(true)
+                    .brushOn(false)
+                    .compose([
+                        dc.lineChart(moveChart).group(indexAvgByMonthGroup)
+                                .valueAccessor(function (d) {
+                                    return d.value.avg;
+                                })
+                                .renderArea(true)
+                                .stack(monthlyMoveGroup, function (d) {
+                                    return d.value;
+                                })
+                                .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);
+                                })
+                    ])
+                    .xAxis();
+
+            volumeChart.width(800)
+                    .height(100)
+                    .margins({top: 0, right: 50, bottom: 20, left: 40})
+                    .dimension(moveMonths)
+                    .group(volumeByMonthGroup)
+                    .centerBar(true)
+                    .gap(0)
+                    .x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2015, 01, 01)]))
+                    .round(d3.time.month.round)
+                    .xUnits(d3.time.months)
+                    .renderlet(function (chart) {
+                        chart.select("g.y").style("display", "none");
+                        moveChart.filter(chart.filter());
+                    })
+                    .on("filtered", function (chart) {
+                        dc.events.trigger(function () {
+                            moveChart.focus(chart.filter());
+                        });
+                    });
+
+
+            /*
+            dc.dataCount(".dc-data-count")
+                    .dimension(ndx)
+                    .group(all);
+            */
+
+            /*
+            dc.dataTable(".dc-data-table")
+                    .dimension(dateDimension)
+                    .group(function (d) {
+                        var format = d3.format("02d");
+                        return d.dd.getFullYear() + "/" + format((d.dd.getMonth() + 1));
+                    })
+                    .size(10)
+                    .columns([
+                        function (d) {
+                            return d.date;
+                        },
+                        function (d) {
+                            return d.open;
+                        },
+                        function (d) {
+                            return d.close;
+                        },
+                        function (d) {
+                            return numberFormat(d.close - d.open);
+                        },
+                        function (d) {
+                            return d.volume;
+                        }
+                    ])
+                    .sortBy(function (d) {
+                        return d.dd;
+                    })
+                    .order(d3.ascending)
+                    .renderlet(function (table) {
+                        table.selectAll(".dc-table-group").classed("info", true);
+                    });
+            */
+
+            dc.renderAll();
+        }
+);

templates/chart.html

+
+{% extends "menu.html" %}
+
+{% block css %}
+{% load staticfiles %}
+<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
+<link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
+
+<link rel="stylesheet" type="text/css" href="http://jun9.github.io/dc.js/css/dc.css"/>
+
+<script type="text/javascript" src="http://jun9.github.io/dc.js/js/d3.js"></script>
+<script type="text/javascript" src="http://jun9.github.io/dc.js/js/crossfilter.js"></script>
+<script type="text/javascript" src="http://jun9.github.io/dc.js/js/dc.js"></script>
+
+{% endblock %}
+
+
+
+{% block content %}
+
+<div class="container theme-showcase" role="main">
+        <div class="jumbotron">
+<div class="container">
+
+	<div class="row">
+	    <div id="monthly-move-chart">
+	        <strong>Title</strong> (Blue Line: Avg Index, Green Line: Index
+	        Fluctuation)
+	        <a class="reset" href="javascript: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-left" style="margin-right: 15px;">Select a time range to zoom in</p>
+	</div>
+
+
+
+</div>
+</div>
+
+
+</div>
+
+
+
+<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script src="http://jun9.github.io/dc.js/js/bootstrap.min.js"></script>
+<script src="{% static "js/d3/DC.js"%}"></script>
+
+
+{% endblock %}