November 8, 2017 02:37
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 var margins = { top: 10, left: 20, right: 0, bottom: 0, between: 50 };
 var width = 300, height = 100;

 var svg = d3.select('body')
      .append('svg')
      .attr('width', width+margins.left)
      .attr('height', height+100+margins.top);

 var xScale = d3.time.scale().range([0,width]);
 var yScale = d3.scale.linear().range([height,0]);

 var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
 var yAxis = d3.svg.axis().scale(yScale).orient('left');

 var graphLine = d3.svg.line()
    .x(function(d) {return xScale(d.date); })
    .y(function(d) {return yScale(d.y_value); });

 var parseTime = d3.time.format("%H:%M").parse;

    var url = "my_data.csv";
            d3.csv(url, function (error, rawData) {
                var data = rawData.map(function (d) {
                    return { y_value: +d.value, date: parseTime(d.time)}
                });

            xScale.domain(d3.extent(data, function(d) {return d.date}));
            yScale.domain([514,530]).nice().ticks(3);
              

        svg.append('path')
            .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
            .datum(data)
            .attr('class', 'line')
            .attr('d', graphLine);

        var yAxisNodes = svg.append('g')
            .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
            .call(yAxis);
        styleAxisNodes(yAxisNodes,1);

        styleLines(svg);

        });

        function styleLines(svg) {
            svg.selectAll('path.line')
                .attr({
                    fill: 'none',
                    'stroke-width': 1.5,
                    stroke: '#77b4c9',
                    'clip-path': 'url(#clip)'
                });
        }

        function styleAxisNodes(axisNodes, strokeWidth) {
            axisNodes.selectAll('.domain')
                .attr({
                    fill: 'none',
                    'stroke-width': strokeWidth,
                    stroke: 'black'
                });
            axisNodes.selectAll('.tick line')
                .attr({
                    fill: 'none',
                    'stroke-width': 1,
                    stroke: 'black'
                });
            axisNodes.selectAll('text')
                .attr('fill','black')
                .attr('font-family','Play');
        }

    </script>
    </body>
diff --git a/my_data.csv b/my_data.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var margins = { top: 10, left: 20, right: 0, bottom: 0, between: 50 };
	var width = 300, height = 100;

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width+margins.left)
	.attr('height', height+100+margins.top);

	var xScale = d3.time.scale().range([0,width]);
	var yScale = d3.scale.linear().range([height,0]);

	var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
	var yAxis = d3.svg.axis().scale(yScale).orient('left');

	var graphLine = d3.svg.line()
	.x(function(d) {return xScale(d.date); })
	.y(function(d) {return yScale(d.y_value); });

	var parseTime = d3.time.format("%H:%M").parse;

	var url = "my_data.csv";
	d3.csv(url, function (error, rawData) {
	var data = rawData.map(function (d) {
	return { y_value: +d.value, date: parseTime(d.time)}
	});

	xScale.domain(d3.extent(data, function(d) {return d.date}));
	yScale.domain([514,530]).nice().ticks(3);


	svg.append('path')
	.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
	.datum(data)
	.attr('class', 'line')
	.attr('d', graphLine);

	var yAxisNodes = svg.append('g')
	.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
	.call(yAxis);
	styleAxisNodes(yAxisNodes,1);

	styleLines(svg);

	});

	function styleLines(svg) {
	svg.selectAll('path.line')
	.attr({
	fill: 'none',
	'stroke-width': 1.5,
	stroke: '#77b4c9',
	'clip-path': 'url(#clip)'
	});
	}

	function styleAxisNodes(axisNodes, strokeWidth) {
	axisNodes.selectAll('.domain')
	.attr({
	fill: 'none',
	'stroke-width': strokeWidth,
	stroke: 'black'
	});
	axisNodes.selectAll('.tick line')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	axisNodes.selectAll('text')
	.attr('fill','black')
	.attr('font-family','Play');
	}

	</script>
	</body>
	time	value
	09:00	527.19
	09:05	526.61
	09:10	524.7
	09:15	524.45
	09:20	524.02
	09:25	24.4
	09:30	525.06
	09:35	523.85
	09:40	523.02
	09:45	523.12
	09:50	522.81
	09:55	522.26
	10:00	521.44
	10:05	521.26
	10:10	522.1
	10:15	522.06
	10:20	522.68
	10:25	522.41
	10:30	521.84
	10:35	522.25
	10:40	522.41
	10:45	522.31
	10:50	522.08
	10:55	521.46
	11:00	520.81
	11:05	520.53
	11:10	519.94
	11:15	519.81
	11:20	519.83
	11:25	519.60
	11:30	519.39
	11:35	519.75
	11:40	519.51
	11:45	519.60
	11:50	519.53
	11:55	520.06
	12:00	520.3
	12:05	520.05
	12:10	519.73
	12:15	519.35
	12:20	518.98
	12:25	518.05
	12:30	517.63
	12:35	516.42
	12:40	516.0
	12:45	515.45
	12:50	516.57
	12:55	517
	13:00	517.13
	13:05	516.62
	13:10	516.66
	13:15	516.70
	13:20	516.73
	13:25	517.48
	13:30	517.55
	13:35	517.12
	13:40	518.40
	13:45	517.84
	13:50	517.43
	13:55	517.43
	14:00	517.43
	14:05	517.95
	14:10	518.12
	14:15	518.18
	14:20	518.64
	14:25	518.08
	14:30	518.60
	14:35	519.16
	14:40	519.2
	14:45	519.27
	14:50	518.88
	14:55	519.08
	15:00	518.94
	15:05	518.69
	15:10	518.58
	15:15	518.45
	15:20	517.7
	15:25	517.72
	15:30	518.21