michaelmruta/.block

## .block
license: mit
author: michael angelo ruta

## Readme.MD

      
    Raw
  

              Readme.MD
            
          
    Scrolling Vertical Line Chart

Michael Angelo Ruta © 2018

  
## data.tsv

          
            date
            value

            
              24-Jul-18 12:17:30
              93.24

            
              25-Jul-18 12:17:33
              95.35

            
              26-Jul-18 12:17:36
              98.84

            
              27-Jul-18 12:17:39
              99.92

            
              30-Jul-18 12:17:46
              99.80

            
              1-Aug-18 12:17:49
              99.47

            
              2-Aug-18 12:17:52
              100.39

            
              3-Aug-18 12:17:55
              100.40

            
              4-Aug-18 12:17:58
              100.81

            
              7-Aug-18 12:18:01
              103.92

            
              8-Aug-18 12:18:04
              105.06

            
              9-Aug-18 12:18:07
              106.88

            
              10-Aug-18 12:18:10
              107.34

            
              11-Aug-18 12:18:13
              108.74

            
              14-Aug-18 12:18:16
              109.36

            
              15-Aug-18 12:18:19
              107.52

            
              16-Aug-18 12:18:22
              107.34

            
              17-Aug-18 12:18:25
              109.44

            
              18-Aug-18 12:18:28
              110.02

            
              21-Aug-18 12:18:31
              111.98

            
              22-Aug-18 12:18:34
              113.54

            
              23-Aug-18 12:18:37
              112.89

            
              24-Aug-18 12:18:40
              110.69

            
              25-Aug-18 12:18:43
              113.62

            
              29-Aug-18 12:18:46
              114.35

            
              30-Aug-18 12:18:49
              118.77

            
              31-Aug-18 12:18:52
              121.19

            
              1-Sep-18 12:18:55
              118.40

            
              4-Sep-18 12:18:58
              50.33

            
              15-Sep-18 12:19:01
              122.67

            
              16-Sep-18 12:19:04
              123.64

            
              27-Sep-18 12:19:07
              124.07

            
              30-Sep-18 12:19:10
              420.12

## index.html
<!DOCTYPE html>
<svg width="200" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script>

    var parseUNIXTime = d3.timeParse("%Q");
    var parseTime = d3.timeParse("%d-%b-%y %I:%M:%S");

    d3.tsv("data.tsv", function(d) {
        d.date = parseTime(d.date);
        d.value = +d.value;
        return d;
    }, function(error, data) {

        if (error) throw error;

        var svg = d3.select("svg"),
            margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var y = d3.scaleTime().rangeRound([0, height]);
        var x = d3.scaleLinear().rangeRound([0, width]);

        var line = d3.line()
            .y(function(d) { return y(d.date); })
            .x(function(d) { return x(d.value); });

        y.domain(d3.extent(data, function(d) { return d.date; }));
        x.domain(d3.extent(data, function(d) { return d.value; }));

        g.append("g")
            .attr("class", "x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).ticks(4))
            .select(".domain")
            .remove();

        g.append("g")
            .attr("class", "y")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("fill", "#000")
            .attr("transform", "rotate(-90)")
            .attr("y", 1)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text("Time");

        g.append("path")
            .datum(data)
            .attr("id", "clip")
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 3)
            .attr("d", line)
            .transition()
            .on("start", tick)

        var n = 0
        function tick(data) {

            n++;
            data.push({ date: moment().add(n,'days'), value:(Math.random()*100)});

            d3.select(this)
                // .transition()
                // .ease(d3.easeLinear)
                .attr("d", line)

            d3.select(".y")
                .transition()
                .ease(d3.easeLinear)
                .call(d3.axisLeft(y))

            d3.select(".x")
              .transition()
              .call(d3.axisBottom(x).ticks(4))

            d3.active(this)
                .transition()
                .on("start", tick)

            y.domain(d3.extent(data, function(d) { return d.date; }));
            x.domain(d3.extent(data, function(d) { return d.value; }));

            data.shift();

        }

    });
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	date	value
	24-Jul-18 12:17:30	93.24
	25-Jul-18 12:17:33	95.35
	26-Jul-18 12:17:36	98.84
	27-Jul-18 12:17:39	99.92
	30-Jul-18 12:17:46	99.80
	1-Aug-18 12:17:49	99.47
	2-Aug-18 12:17:52	100.39
	3-Aug-18 12:17:55	100.40
	4-Aug-18 12:17:58	100.81
	7-Aug-18 12:18:01	103.92
	8-Aug-18 12:18:04	105.06
	9-Aug-18 12:18:07	106.88
	10-Aug-18 12:18:10	107.34
	11-Aug-18 12:18:13	108.74
	14-Aug-18 12:18:16	109.36
	15-Aug-18 12:18:19	107.52
	16-Aug-18 12:18:22	107.34
	17-Aug-18 12:18:25	109.44
	18-Aug-18 12:18:28	110.02
	21-Aug-18 12:18:31	111.98
	22-Aug-18 12:18:34	113.54
	23-Aug-18 12:18:37	112.89
	24-Aug-18 12:18:40	110.69
	25-Aug-18 12:18:43	113.62
	29-Aug-18 12:18:46	114.35
	30-Aug-18 12:18:49	118.77
	31-Aug-18 12:18:52	121.19
	1-Sep-18 12:18:55	118.40
	4-Sep-18 12:18:58	50.33
	15-Sep-18 12:19:01	122.67
	16-Sep-18 12:19:04	123.64
	27-Sep-18 12:19:07	124.07
	30-Sep-18 12:19:10	420.12
	<!DOCTYPE html>
	<svg width="200" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
	<script>

	var parseUNIXTime = d3.timeParse("%Q");
	var parseTime = d3.timeParse("%d-%b-%y %I:%M:%S");

	d3.tsv("data.tsv", function(d) {
	d.date = parseTime(d.date);
	d.value = +d.value;
	return d;
	}, function(error, data) {

	if (error) throw error;

	var svg = d3.select("svg"),
	margin = { top: 20, right: 20, bottom: 30, left: 50 },
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var y = d3.scaleTime().rangeRound([0, height]);
	var x = d3.scaleLinear().rangeRound([0, width]);

	var line = d3.line()
	.y(function(d) { return y(d.date); })
	.x(function(d) { return x(d.value); });

	y.domain(d3.extent(data, function(d) { return d.date; }));
	x.domain(d3.extent(data, function(d) { return d.value; }));

	g.append("g")
	.attr("class", "x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).ticks(4))
	.select(".domain")
	.remove();

	g.append("g")
	.attr("class", "y")
	.call(d3.axisLeft(y))
	.append("text")
	.attr("fill", "#000")
	.attr("transform", "rotate(-90)")
	.attr("y", 1)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Time");

	g.append("path")
	.datum(data)
	.attr("id", "clip")
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 3)
	.attr("d", line)
	.transition()
	.on("start", tick)

	var n = 0
	function tick(data) {

	n++;
	data.push({ date: moment().add(n,'days'), value:(Math.random()*100)});

	d3.select(this)
	// .transition()
	// .ease(d3.easeLinear)
	.attr("d", line)

	d3.select(".y")
	.transition()
	.ease(d3.easeLinear)
	.call(d3.axisLeft(y))

	d3.select(".x")
	.transition()
	.call(d3.axisBottom(x).ticks(4))

	d3.active(this)
	.transition()
	.on("start", tick)

	y.domain(d3.extent(data, function(d) { return d.date; }));
	x.domain(d3.extent(data, function(d) { return d.value; }));

	data.shift();

	}

	});
	</script>