vikkya/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from vikkya's block: time series bar chart (horizontal)

  
## data.json
[ {
    "time": "17:00:00",
"time_2": "19:00:00",
    "total": "H"
}]

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="viz"></div>
  <script>
 var margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
},
width = 130 - margin.left - margin.right,
height = 10 - margin.top - margin.bottom;
var today = new Date();
today.setHours(0, 0, 0, 0);
todayMillis = today.getTime();

 var svg = d3.select("#viz").append("svg").attr("viewBox", `0 0 ${(width + margin.left + margin.right)} ${(height + margin.top + margin.bottom)}`)
            .attr("width", "100%")
            .attr("height", "100%");
  var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json("data.json", function(err, data){
      data.forEach(function(d) {
    var parts = d.time.split(/:/);
    var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                           (parseInt(parts[1], 10) * 60 * 1000) +
                           (parseInt(parts[2], 10) * 1000);

    d.time = new Date();
    d.time.setTime(todayMillis + timePeriodMillis);
        var parts_2 = d.time_2.split(/:/);
    var timePeriodMillis_2 = (parseInt(parts_2[0], 10) * 60 * 60 * 1000) +
                           (parseInt(parts_2[1], 10) * 60 * 1000) +
                           (parseInt(parts_2[2], 10) * 1000);

    d.time_2 = new Date();
    d.time_2.setTime(todayMillis + timePeriodMillis_2);
});
      var x = d3.scaleTime()
    .range([0, width]);

      var y = d3.scaleBand().rangeRound([height, 0]).padding(0.5);

    var xAxis = d3.axisBottom()
    .scale(x)

    var yAxis = d3.axisLeft()
    .scale(y)

       var max_date = d3.extent([d3.max(data, function(d){return d.time}), d3.max(data, function(d){return d.time_2})])
       console.log(max_date)
     x.domain([today, max_date[1]])
      y.domain(data.map(function(d){ return d.total}))

      g.selectAll('.chart_1')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
      .attr("fill", "#cccccc")
    .attr('y', function (d) {
        return y(d.total)
    })
    .attr('width', "100%")
    .attr('height', y.bandwidth());

      g.selectAll('.chart')
    .data(data)
    .enter().append('circle')
    .attr('class', 'bar')
      .attr("fill", "blue")
    .attr('cy', function (d) {
        return y(d.total)
    })
    .attr("cx", function(d){ return x(d.time)})
      .attr("r", 2.5)

    g.selectAll('.lines')
    .data(data)
    .enter().append('line')
    .attr('class', 'line_1')
    .attr("stroke", "red")
    .attr("x1", function(d){ return  x(d.time_2)})
    .attr('y1', function(d){ return y(d.total) + y.bandwidth()})
    .attr("x2", function(d){ return x(d.time_2)})
    .attr('y2', function(d){ return y(d.total) - 10});

    })
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

	</style>
	</head>

	<body>
	<div id="viz"></div>
	<script>
	var margin = {
	top: 10,
	right: 10,
	bottom: 10,
	left: 10
	},
	width = 130 - margin.left - margin.right,
	height = 10 - margin.top - margin.bottom;
	var today = new Date();
	today.setHours(0, 0, 0, 0);
	todayMillis = today.getTime();

	var svg = d3.select("#viz").append("svg").attr("viewBox", `0 0 ${(width + margin.left + margin.right)} ${(height + margin.top + margin.bottom)}`)
	.attr("width", "100%")
	.attr("height", "100%");
	var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.json("data.json", function(err, data){
	data.forEach(function(d) {
	var parts = d.time.split(/:/);
	var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
	(parseInt(parts[1], 10) * 60 * 1000) +
	(parseInt(parts[2], 10) * 1000);

	d.time = new Date();
	d.time.setTime(todayMillis + timePeriodMillis);
	var parts_2 = d.time_2.split(/:/);
	var timePeriodMillis_2 = (parseInt(parts_2[0], 10) * 60 * 60 * 1000) +
	(parseInt(parts_2[1], 10) * 60 * 1000) +
	(parseInt(parts_2[2], 10) * 1000);

	d.time_2 = new Date();
	d.time_2.setTime(todayMillis + timePeriodMillis_2);
	});
	var x = d3.scaleTime()
	.range([0, width]);

	var y = d3.scaleBand().rangeRound([height, 0]).padding(0.5);

	var xAxis = d3.axisBottom()
	.scale(x)

	var yAxis = d3.axisLeft()
	.scale(y)

	var max_date = d3.extent([d3.max(data, function(d){return d.time}), d3.max(data, function(d){return d.time_2})])
	console.log(max_date)
	x.domain([today, max_date[1]])
	y.domain(data.map(function(d){ return d.total}))

	g.selectAll('.chart_1')
	.data(data)
	.enter().append('rect')
	.attr('class', 'bar')
	.attr("fill", "#cccccc")
	.attr('y', function (d) {
	return y(d.total)
	})
	.attr('width', "100%")
	.attr('height', y.bandwidth());

	g.selectAll('.chart')
	.data(data)
	.enter().append('circle')
	.attr('class', 'bar')
	.attr("fill", "blue")
	.attr('cy', function (d) {
	return y(d.total)
	})
	.attr("cx", function(d){ return x(d.time)})
	.attr("r", 2.5)

	g.selectAll('.lines')
	.data(data)
	.enter().append('line')
	.attr('class', 'line_1')
	.attr("stroke", "red")
	.attr("x1", function(d){ return x(d.time_2)})
	.attr('y1', function(d){ return y(d.total) + y.bandwidth()})
	.attr("x2", function(d){ return x(d.time_2)})
	.attr('y2', function(d){ return y(d.total) - 10});

	})
	</script>
	</body>
No results found