ddonatien · July 25, 2019 02:59
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/digital_twins.csv b/digital_twins.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .enter {
      fill: #EDCA3A;
    }

    .update {
      fill: #1FBAD6;
    }

    .exit {
      fill: #F25754;
    }

    .selected {
      fill: #E6B0F1;
    }

    div.tooltip {
      color: black;
      position: absolute;
      text-align: left;
      width: auto;
      height: auto;
      padding: 5px;
      font-family: Futura;
      font: 12px sans-serif ;
      background: #FCB8C3FF;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
  </style>
 </head>

 <body>
  <div id="my_dataviz"></div>
  <p>
    <label># bins</label>
    <input type="number" min="1" max="100" step="60" value="20" id="nBin">
  </p>
  <script>
    // set the dimensions and margins of the graph
    var margin = {top: 10, right: 30, bottom: 30, left: 40},
        width = 460 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    const tooltip = d3.select("#my_dataviz")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

    const t = d3.transition()
      .duration(1000);
    
    // append the svg object to the body of the page
    var svg = d3.select("#my_dataviz")
         .append("svg")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom)
         .append("g")
           .attr("transform",
                 "translate(" + margin.left + "," + margin.top + ")");
    
    var selectionArea = d3.select("#my_dataviz")
         .append("div")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom)
           .style("display", "inline-block")
         .append("g")
           .attr("transform",
                 "translate(" + margin.left + "," + margin.top + ")");
    // get the data
    d3.csv("digital_twins.csv", initialize);
    
    function initialize(data) {
      d3.keys(data[0]).forEach((k,i) => {
        let node = selectionArea.append("g")
          .text(k) 
        node.append('label')
            .text("Min")
            .append("input")
            .attr("type", "number")
            .attr("id", k + "Min")
            .attr("min", d3.min(data, function(row) { return +row[k];}))
            .attr("max", d3.max(data, function(row) { return +row[k];}))
            .attr("value", d3.min(data, function(row) { return +row[k];}))
            .on("input", function() {
              renderData(data.filter(d => d[k]>+this.value));
            });
        node.append('label')
            .text("Max")
            .append("input")
            .attr("type", "number")
            .attr("id", k + "Max")
            .attr("min", d3.min(data, function(row) { return +row[k];}))
            .attr("max", d3.max(data, function(row) { return +row[k];}))
            .attr("value", d3.max(data, function(row) { return +row[k];}))
            .on("input", function() {
              renderData(data.filter(d => d[k]<+this.value));
            });
      });
      renderData(data)
    }
    
    function renderData(data) {
      d3.select("#wrapper").remove();
      let g = svg.append("g")
                 .attr("id", "wrapper")
      // X axis: scale and draw:
      var x = d3.scaleLinear()
          .domain([0, d3.max(data, function(d) { return +d.PVA_M1M_DB_CENT_CC_W })])     // can use this instead of 1000 to have the max of data:   
          .range([0, width]);
      g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      // Y axis: initialization
      var y = d3.scaleLinear()
        .range([height, 0]);
      var yAxis = g.append("g")

      // A function that builds the graph for a specific value of bin
      function update(nBin) {

        // set the parameters for the histogram
        var histogram = d3.histogram()
          .value(function(d) { return d.PVA_M1M_DB_CENT_CC_W; })   // I need to give the vector of value
          .domain(x.domain())  // then the domain of the graphic
          .thresholds(x.ticks(nBin)); // then the numbers of bins

        
        // And apply this function to data to get the bins
        var bins = histogram(data).filter(d => d.length>0);

        // Y axis: update now that we know the domain
        let maxLength = d3.max(bins, function(d) { return d.length; })
        y.domain([0, maxLength]);   // d3.hist has to be called before the Y axis obviously
        let radius = height / (2 * maxLength)

        yAxis.transition()
          .duration(1000)
          .call(d3.axisLeft(y));


        // Manage the existing bars and eventually the new ones:
        let binContainer = g.selectAll(".gBin")
                              .data(bins);

        binContainer.exit().remove()

        let binContainerEnter = binContainer.enter()
          .append("g")
            .attr("class", "gBin")
            .attr("transform", d => `translate(${x(d.x0)}, 0)`)

        //need to populate the bin containers with data the first time
        binContainerEnter.selectAll("circle")
          .data(d => d.map((p, i) => {
            return {idx: i,
                    entry_datetime: p.entry_datetime,
                    exit_datetime: p.exit_datetime,
                    radius: radius
                  }
          }))
          .enter()
          .append("circle")
          .attr("class", "enter")
          .attr("cx", 0) //g element already at correct x pos
          .attr("cy", function(d) {
              return y(d.idx); })
          .attr("r", 0)
          .on("mouseover", tooltipOn)
          .on("mouseout", tooltipOff)
          .transition()
            .duration(500)
            .attr("r", function(d) {
            return (d.length==0) ? 0 : d.radius; })

        binContainerEnter.merge(binContainer)
          .attr("transform", d => `translate(${x(d.x0)}, 0)`)
     }

     function tooltipOn(d) {
       console.log(d);
       //x position of parent g element
       let gParent = d3.select(this.parentElement)
       let translateValue = gParent.attr("transform")
       
       let gX = translateValue.split(",")[0].split("(")[1]
       let gY = (+d3.select(this).attr("cy")-50)

       d3.select(this)
         .classed("selected", true)
       tooltip.transition()
         .duration(200)
         .style("opacity", .9);
       tooltip.html("Entry time : " + d.entry_datetime + "<br/>Exit time : " + d.exit_datetime)
         .style("left", gX + "px")
         .style("top", gY + "px");
     }//tooltipOn

     function tooltipOff(d) {
       d3.select(this)
        .classed("selected", false);
       tooltip.transition()
         .duration(500)
         .style("opacity", 0);
     }//tooltipOff

      update(60)


      // Listen to the button -> update if user change it
      d3.select("#nBin").on("input", function() {
        update(+this.value);
      });

  };
  </script>
 
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.enter {
	fill: #EDCA3A;
	}

	.update {
	fill: #1FBAD6;
	}

	.exit {
	fill: #F25754;
	}

	.selected {
	fill: #E6B0F1;
	}

	div.tooltip {
	color: black;
	position: absolute;
	text-align: left;
	width: auto;
	height: auto;
	padding: 5px;
	font-family: Futura;
	font: 12px sans-serif ;
	background: #FCB8C3FF;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	</style>
	</head>

	<body>
	<div id="my_dataviz"></div>
	<p>
	<label># bins</label>
	<input type="number" min="1" max="100" step="60" value="20" id="nBin">
	</p>
	<script>
	// set the dimensions and margins of the graph
	var margin = {top: 10, right: 30, bottom: 30, left: 40},
	width = 460 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	const tooltip = d3.select("#my_dataviz")
	.append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	const t = d3.transition()
	.duration(1000);

	// append the svg object to the body of the page
	var svg = d3.select("#my_dataviz")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	var selectionArea = d3.select("#my_dataviz")
	.append("div")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("display", "inline-block")
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");
	// get the data
	d3.csv("digital_twins.csv", initialize);

	function initialize(data) {
	d3.keys(data[0]).forEach((k,i) => {
	let node = selectionArea.append("g")
	.text(k)
	node.append('label')
	.text("Min")
	.append("input")
	.attr("type", "number")
	.attr("id", k + "Min")
	.attr("min", d3.min(data, function(row) { return +row[k];}))
	.attr("max", d3.max(data, function(row) { return +row[k];}))
	.attr("value", d3.min(data, function(row) { return +row[k];}))
	.on("input", function() {
	renderData(data.filter(d => d[k]>+this.value));
	});
	node.append('label')
	.text("Max")
	.append("input")
	.attr("type", "number")
	.attr("id", k + "Max")
	.attr("min", d3.min(data, function(row) { return +row[k];}))
	.attr("max", d3.max(data, function(row) { return +row[k];}))
	.attr("value", d3.max(data, function(row) { return +row[k];}))
	.on("input", function() {
	renderData(data.filter(d => d[k]<+this.value));
	});
	});
	renderData(data)
	}

	function renderData(data) {
	d3.select("#wrapper").remove();
	let g = svg.append("g")
	.attr("id", "wrapper")
	// X axis: scale and draw:
	var x = d3.scaleLinear()
	.domain([0, d3.max(data, function(d) { return +d.PVA_M1M_DB_CENT_CC_W })]) // can use this instead of 1000 to have the max of data:
	.range([0, width]);
	g.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	// Y axis: initialization
	var y = d3.scaleLinear()
	.range([height, 0]);
	var yAxis = g.append("g")

	// A function that builds the graph for a specific value of bin
	function update(nBin) {

	// set the parameters for the histogram
	var histogram = d3.histogram()
	.value(function(d) { return d.PVA_M1M_DB_CENT_CC_W; }) // I need to give the vector of value
	.domain(x.domain()) // then the domain of the graphic
	.thresholds(x.ticks(nBin)); // then the numbers of bins


	// And apply this function to data to get the bins
	var bins = histogram(data).filter(d => d.length>0);

	// Y axis: update now that we know the domain
	let maxLength = d3.max(bins, function(d) { return d.length; })
	y.domain([0, maxLength]); // d3.hist has to be called before the Y axis obviously
	let radius = height / (2 * maxLength)

	yAxis.transition()
	.duration(1000)
	.call(d3.axisLeft(y));


	// Manage the existing bars and eventually the new ones:
	let binContainer = g.selectAll(".gBin")
	.data(bins);

	binContainer.exit().remove()

	let binContainerEnter = binContainer.enter()
	.append("g")
	.attr("class", "gBin")
	.attr("transform", d => `translate(${x(d.x0)}, 0)`)

	//need to populate the bin containers with data the first time
	binContainerEnter.selectAll("circle")
	.data(d => d.map((p, i) => {
	return {idx: i,
	entry_datetime: p.entry_datetime,
	exit_datetime: p.exit_datetime,
	radius: radius
	}
	}))
	.enter()
	.append("circle")
	.attr("class", "enter")
	.attr("cx", 0) //g element already at correct x pos
	.attr("cy", function(d) {
	return y(d.idx); })
	.attr("r", 0)
	.on("mouseover", tooltipOn)
	.on("mouseout", tooltipOff)
	.transition()
	.duration(500)
	.attr("r", function(d) {
	return (d.length==0) ? 0 : d.radius; })

	binContainerEnter.merge(binContainer)
	.attr("transform", d => `translate(${x(d.x0)}, 0)`)
	}

	function tooltipOn(d) {
	console.log(d);
	//x position of parent g element
	let gParent = d3.select(this.parentElement)
	let translateValue = gParent.attr("transform")

	let gX = translateValue.split(",")[0].split("(")[1]
	let gY = (+d3.select(this).attr("cy")-50)

	d3.select(this)
	.classed("selected", true)
	tooltip.transition()
	.duration(200)
	.style("opacity", .9);
	tooltip.html("Entry time : " + d.entry_datetime + "<br/>Exit time : " + d.exit_datetime)
	.style("left", gX + "px")
	.style("top", gY + "px");
	}//tooltipOn

	function tooltipOff(d) {
	d3.select(this)
	.classed("selected", false);
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	}//tooltipOff

	update(60)


	// Listen to the button -> update if user change it
	d3.select("#nBin").on("input", function() {
	update(+this.value);
	});

	};
	</script>

	</body>
No results found