Projections: Axis Slider

by nancynancy

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre...

CSS

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
	background-color: white;
}

pre {
  display:none;
  }
  
 div{
    margin-top:20px;
    }

.line{
  fill: none;
  stroke-width: 2px;
  clip-path: url(#clip);

}

    .ticks {
      font-size: 10px;
    }

    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

    .track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }

    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }

    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
    
    .legend{
  stroke: black;
	font-family: "Arial", sans-serif;
  stroke-width: 2px;
  fill: none;
}

JavaScript

////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var margin = {top: 30, right: 30, bottom: 30, left: 30};        
var width = 400 - margin.left - margin.right;
var height = 200
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height - 30, 0]);
var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%b-%y"));
var yAxis = d3.axisLeft(y);
var color = d3.scaleOrdinal(["navy", "pink", "red"]);
var parseTime = d3.timeParse("%Y-%m-%d");
var formatDate = d3.timeFormat("%Y-%m-%d");
var startDate = parseTime("2018-01-01");
var endDate = parseTime("2018-12-30");
var xSlider = d3.scaleTime()
    .domain([startDate, endDate])
    .range([0, 300])
    .clamp(true);

var mydata = d3.csvParse(d3.select("pre#data").text());
mydata.forEach(function(d){
     d.site = d.site;
     d.date = parseTime(d.date);
     d.projected = +d.projected;
});

var legendData = d3.nest()
  			.key(function(d) { return d.site; })
  			.entries(mydata);

legendData = d3.values(legendData).map(function(d) { 
    		return d.key; });

console.log({legendData});

////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var createGraph = function(){
      
    var panel = d3.selectAll("body")
      .append("svg") 
      .attr("class", "container")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + 
      margin.top + ")");
     
            
/*     panel.append("rect")
      .attr("width", width + margin.left - margin.right)
      .attr("height", height)
      .style('opacity', 1)
      .style('fill', '#E6E6E6'); */

 /*    panel.append("rect")
      .attr("width", width + margin.left - margin.right)
      .attr("height",  30)
      .style('opacity', 0.2)
      .style('fill', "black");
   ...