Chart Slider

forked from wonga00's block: Chart Slider

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    font-family: sans-serif;
  	background-color: #c2e5a8;
}

.slider rect {
    fill: gray;
    shape-rendering: crispEdges;
}

.slider line {
    fill: none;
    stroke: red;
    stroke-width: 12px;
  	opacity: 0.3;
  	padding-top: 30px;
    shape-rendering: crispEdges;
}

</style>
<body>

function translate(x, y) {
    return 'translate(' + x + ',' + y + ')';
}

var margin = { top: 60, right: 20, bottom: 0, left: 20},
    width = 560 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom,
    svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
// 				.attr("margin", "10px")
        .append('g')
        .attr('transform', translate(margin.left, margin.top));

var minDate = new Date(2018, 7, 1, 4),
    scale = d3.scaleTime()
        .domain([minDate, d3.timeHour.offset(minDate, 6)])
        .range([0, width])
        .clamp(true),
    format = d3.timeFormat('%-I:%M %p');

// axis
svg.append('g')
    .attr('class', 'axis')
    .call(d3.axisBottom(scale).ticks(d3.timeMinute.every(120)));

var slider = svg.append('g')
    .attr("class", "slider")
    .call(d3.drag().on('drag', dragged));

var rectWidth = 8;
var rect = slider.append("rect")
    .attr("x", -rectWidth / 2 - 10)
    .attr("y", -20)
    .attr("width", rectWidth + 20)
    .attr("height", 50)
    .attr("fill", "blue")
    .attr("stroke", "red")
    .attr("stroke-width", "4px")
    .attr("opacity", 0.5)

var line = slider.append("line")
    .attr('y2', height)
    .attr('x2', 0)
    .attr('stroke-dasharray', '1,1');

function updateHeader(date) {
    d3.select('#header').text('at the stroke of ' + format(date) + ", you go hard in the paint")
}

function dragged(d) {
    var x = Math.min(Math.max(d3.event.x, 0), width);
        value = scale.invert(x);

d3.select('.slider').attr('transform', translate(x, -30));
    updateHeader(value);
}

updateHeader(minDate);

</script>

</body>

https://d3js.org/d3.v4.min.js