thole/index.html

## index.html
<html>
    <head>
      <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
      <script type="text/javascript" src="//thole.github.io/lib/crossfilter/crossfilter.js"></script>
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
      <style>

        rect {
          fill: steelblue;
        }

      </style>
    </head>
    <body>
      <button onclick="timeSelector.groupSelected('day',d3.select('#timeSelector'))">Day</button>
      <button onclick="timeSelector.groupSelected('week',d3.select('#timeSelector'))">Week</button>
      <button onclick="timeSelector.groupSelected('month',d3.select('#timeSelector'))">Month</button>
      <button onclick="timeSelector.groupSelected('year',d3.select('#timeSelector'))">Year</button>
      <div id="timeSelector"></div>
    </body>

    <script>

      function generateTestData(start, end){
        var data = new Array();
        for(start; start < end; start.setDate(start.getDate()+1)){
          data.push({'date':new Date(start),
                      'value':Math.round(Math.random()*500 + 500)});
        }
        return data;
      }

      var data = generateTestData(new Date("01.01.2014"),new Date("12.31.2015"));

      var timeSelector = chart().data(data);
      timeSelector(d3.select("#timeSelector"));


      function chart() {
        var width = 960, // default width
            height = 200, // default height
            margins = {"top":10,"right":10,"bottom":10,"left":10}


        var chart;

        var xScale,
            yScale;

        var statistics = crossfilter();
        var statisticsByDate = statistics.dimension(function(d) { return d.date; });


        var groupedStatisticByWeek = statisticsByDate.group(function(d) { return moment(d).startOf('week').toDate() })
          .reduce(function(p, v) { return p + v.value; },
                  function(p, v) { return p - v.value; },
                  function() { return 0; });

        var groupedStatisticByMonth = statisticsByDate.group(function(d) { return moment(d).startOf('month').toDate() })
          .reduce(function(p, v) { return p + v.value; },
                  function(p, v) { return p - v.value; },
                  function() { return 0; });

        var groupedStatisticByYear = statisticsByDate.group(function(d) { return moment(d).startOf('year').toDate() })
          .reduce(function(p, v) { return p + v.value; },
                  function(p, v) { return p - v.value; },
                  function() { return 0; });

        var groupedStatisticByDay = statisticsByDate.group(function(d) { return moment(d).toDate() })
          .reduce(function(p, v) { return p + v.value; }, function(p, v) { return p - v.value; }, function() { return 0; });

        var groupSelected = groupedStatisticByWeek;


        my.data = function(value) {
          if (!arguments.length) return statistics;
          statistics.remove();
          statistics.add(value);
          return my;
        }

        my.width = function(value) {
          if (!arguments.length) return width;
          width = value;
          return my;
        };

        my.height = function(value) {
          if (!arguments.length) return height;
          height = value;
          return my;
        };

        function calculateInnerWidth(){
          return width - (margins.left + margins.right);
        }

        function calculateInnerHeight(){
          return height - (margins.top + margins.top);
        }

        function calculateBarWidthWithSpace(data){
          return calculateInnerWidth() / groupSelected.size();
        }
        function calculateBarWidth(data){
          return calculateInnerWidth() / groupSelected.size() - 0.5;
        }

        function my(selection) {

          xScale = d3.time.scale()
            .domain(d3.extent(groupSelected.all(),function(d){return d.key;}))
            .range([0,calculateInnerWidth()]);

          yScale = d3.scale.linear()
            .domain([0,d3.max(groupSelected.all(),function(d){return d.value})])
            .range([0,calculateInnerHeight()])


          chart = selection.append("svg")
            .attr("width",width)
            .attr("height",height)
            .append("g")
            .attr("transform", function(d) { return "translate(" + margins.left + "," + margins.top + ")"; })


          chart.selectAll("rect")
            .data(groupSelected.all())
            .enter()
            .append("rect")
            .attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
            .attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
            .attr("width",function(d,i){ return calculateBarWidth();})
            .attr("height",function(d,i){ return yScale(d.value);})

        }


        my.groupSelected = function(value) {

          if(value === "year"){ groupSelected = groupedStatisticByYear; }
          if(value === 'month'){ groupSelected = groupedStatisticByMonth; }
          if(value === 'week'){ groupSelected = groupedStatisticByWeek; }
          if(value === 'day'){ groupSelected = groupedStatisticByDay; }

          yScale.domain([0,d3.max(groupSelected.all(),function(d){return d.value})])
          xScale.domain(d3.extent(groupSelected.all(),function(d){return d.key;}))

          var bars = chart.selectAll("rect")
            .data(groupSelected.all())

          bars
            .transition().duration(1000)
            .attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
            .attr("width",function(d,i){ return calculateBarWidth();})
            .attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
            .attr("height",function(d,i){ return yScale(d.value);})

          bars
            .enter()
            .append("rect")
            .attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
            .attr("width",function(d,i){ return calculateBarWidth();})
            .attr("y",function(d,i){ return calculateInnerHeight(); })
            .attr("height",function(d,i){ return 0})
            .transition().delay(250).duration(1000)
            .attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
            .attr("height",function(d,i){ return yScale(d.value);})

          bars.exit().remove()
          return my;
        }

        return my;
      }

    </script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="//thole.github.io/lib/crossfilter/crossfilter.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
	<style>

	rect {
	fill: steelblue;
	}

	</style>
	</head>
	<body>
	<button onclick="timeSelector.groupSelected('day',d3.select('#timeSelector'))">Day</button>
	<button onclick="timeSelector.groupSelected('week',d3.select('#timeSelector'))">Week</button>
	<button onclick="timeSelector.groupSelected('month',d3.select('#timeSelector'))">Month</button>
	<button onclick="timeSelector.groupSelected('year',d3.select('#timeSelector'))">Year</button>
	<div id="timeSelector"></div>
	</body>

	<script>

	function generateTestData(start, end){
	var data = new Array();
	for(start; start < end; start.setDate(start.getDate()+1)){
	data.push({'date':new Date(start),
	'value':Math.round(Math.random()*500 + 500)});
	}
	return data;
	}

	var data = generateTestData(new Date("01.01.2014"),new Date("12.31.2015"));

	var timeSelector = chart().data(data);
	timeSelector(d3.select("#timeSelector"));


	function chart() {
	var width = 960, // default width
	height = 200, // default height
	margins = {"top":10,"right":10,"bottom":10,"left":10}


	var chart;

	var xScale,
	yScale;

	var statistics = crossfilter();
	var statisticsByDate = statistics.dimension(function(d) { return d.date; });


	var groupedStatisticByWeek = statisticsByDate.group(function(d) { return moment(d).startOf('week').toDate() })
	.reduce(function(p, v) { return p + v.value; },
	function(p, v) { return p - v.value; },
	function() { return 0; });

	var groupedStatisticByMonth = statisticsByDate.group(function(d) { return moment(d).startOf('month').toDate() })
	.reduce(function(p, v) { return p + v.value; },
	function(p, v) { return p - v.value; },
	function() { return 0; });

	var groupedStatisticByYear = statisticsByDate.group(function(d) { return moment(d).startOf('year').toDate() })
	.reduce(function(p, v) { return p + v.value; },
	function(p, v) { return p - v.value; },
	function() { return 0; });

	var groupedStatisticByDay = statisticsByDate.group(function(d) { return moment(d).toDate() })
	.reduce(function(p, v) { return p + v.value; }, function(p, v) { return p - v.value; }, function() { return 0; });

	var groupSelected = groupedStatisticByWeek;


	my.data = function(value) {
	if (!arguments.length) return statistics;
	statistics.remove();
	statistics.add(value);
	return my;
	}

	my.width = function(value) {
	if (!arguments.length) return width;
	width = value;
	return my;
	};

	my.height = function(value) {
	if (!arguments.length) return height;
	height = value;
	return my;
	};

	function calculateInnerWidth(){
	return width - (margins.left + margins.right);
	}

	function calculateInnerHeight(){
	return height - (margins.top + margins.top);
	}

	function calculateBarWidthWithSpace(data){
	return calculateInnerWidth() / groupSelected.size();
	}
	function calculateBarWidth(data){
	return calculateInnerWidth() / groupSelected.size() - 0.5;
	}

	function my(selection) {

	xScale = d3.time.scale()
	.domain(d3.extent(groupSelected.all(),function(d){return d.key;}))
	.range([0,calculateInnerWidth()]);

	yScale = d3.scale.linear()
	.domain([0,d3.max(groupSelected.all(),function(d){return d.value})])
	.range([0,calculateInnerHeight()])


	chart = selection.append("svg")
	.attr("width",width)
	.attr("height",height)
	.append("g")
	.attr("transform", function(d) { return "translate(" + margins.left + "," + margins.top + ")"; })


	chart.selectAll("rect")
	.data(groupSelected.all())
	.enter()
	.append("rect")
	.attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
	.attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
	.attr("width",function(d,i){ return calculateBarWidth();})
	.attr("height",function(d,i){ return yScale(d.value);})

	}


	my.groupSelected = function(value) {

	if(value === "year"){ groupSelected = groupedStatisticByYear; }
	if(value === 'month'){ groupSelected = groupedStatisticByMonth; }
	if(value === 'week'){ groupSelected = groupedStatisticByWeek; }
	if(value === 'day'){ groupSelected = groupedStatisticByDay; }

	yScale.domain([0,d3.max(groupSelected.all(),function(d){return d.value})])
	xScale.domain(d3.extent(groupSelected.all(),function(d){return d.key;}))

	var bars = chart.selectAll("rect")
	.data(groupSelected.all())

	bars
	.transition().duration(1000)
	.attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
	.attr("width",function(d,i){ return calculateBarWidth();})
	.attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
	.attr("height",function(d,i){ return yScale(d.value);})

	bars
	.enter()
	.append("rect")
	.attr("x",function(d,i){ return calculateBarWidthWithSpace() * i })
	.attr("width",function(d,i){ return calculateBarWidth();})
	.attr("y",function(d,i){ return calculateInnerHeight(); })
	.attr("height",function(d,i){ return 0})
	.transition().delay(250).duration(1000)
	.attr("y",function(d,i){ return calculateInnerHeight() - yScale(d.value);})
	.attr("height",function(d,i){ return yScale(d.value);})

	bars.exit().remove()
	return my;
	}

	return my;
	}

	</script>
	</html>