datesime

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;
  }
  
.line{
  fill: none;
  stroke-width: 2px;
  clip-path: url(#clip);
}
}

JavaScript

////////////////////////////////////////////////////////////
//////////////////////////// SETUP /////////////////////////
var margin = {top: 40, right: 30, bottom: 120, left: 30};
var width = 350 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 30]);
var new_xScale = x;
var new_yScale = y;
var xAxis = d3.axisBottom(new_xScale).tickFormat(d3.timeFormat("%Y"));
var yAxis = d3.axisLeft(new_yScale);
var parseTime = d3.timeParse("%Y-%m-%d");
var color = d3.scaleOrdinal(d3.schemeCategory10);
var mydata = d3.csvParse(d3.select("pre#data").text());

mydata.forEach(function(d){
  d.date = parseTime(d.date);
  d.value = +d.value;
});  

d3.selectAll(".myCheckbox").on("change", update);
update();

///////////////////////////////////////////////////////////////
////////////////// Function START /////////////////////////////
function update() {

		d3.selectAll("svg").remove();
    var choices = [];
    console.log({choices})
      d3.selectAll(".myCheckbox").each(function(d){
        cb = d3.select(this);
        if(cb.property("checked")){
          choices.push(cb.property("value"));
        }
      });
      
    newData = mydata.filter(function(d,i){
    	 return choices.includes(d.variable);
    });   
    
    x.domain(d3.extent(mydata, function(d){return d.date;}));
  	y.domain([0, 11]).range([height, 30]);   
    
		//console.log(x.domain() == new_xScale.domain());
		//console.log("x-axis original:" + x.domain());
    //console.log("x-axis new     :" + new_xScale.domain());
    
    var panelData = d3.nest()
      .key(function(d) { return d.variable; })
      .entries(newData);
                
    var line = d3.line()
      .x(function(d) { return new_xScale(d.date); })
      .y(function(d) { return new_yScale(d.value); })
          
    var panel = d3.selectAll("body")
      .append("svg") 
      .attr("class", "container")
      .attr("width", width +...