All examples By author By category About

RicCheng

Full window Github gist

Focus+Context+Scanning

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

forked from vlandham's block: Focus+Context via Brushing

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

svg {
  font: 10px sans-serif;
}

path {
  fill: steelblue;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%Y%m%d").parse
		bisectDate = d3.bisector(function(d) { return d.date; }).left;
  
var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brush);

var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.price); });

// to remove
var area2 = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.price); });

var area = d3.svg.area()
    .interpolate("step-after")
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.price); });

var area_brush = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.price); })

var data;

var brush = d3.svg.brush()
  .x(x2)
  .extent([0.9, 1])
  .on("brush", brushed);

var scan = d3.svg.brush()
  .x(x)
  .on("brush", scanned)
  .on("brushstart", function () {d3.select("g.focus_box").remove();});

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

d3.csv("datapoints.csv", function(error, csv_data) {
	data = csv_data;
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
  });

x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());

// gradient color for the area for decoration
  focus.append("linearGradient")
      .attr("id", "temperature-gradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0).attr("y1", "0%")
      .attr("x2", 0).attr("y2", "100%")
    .selectAll("stop")
      .data([
        {offset: "0%", color: "#ADD8E6"},
        {offset: "70%", color: "lightgrey"},
        {offset: "100%", color: "white"}
      ])
    .enter().append("stop")
      .attr("offset", function(d) { return d.offset; })
      .attr("stop-color", function(d) { return d.color; });

focus.append("path")
      .datum(data)
      //.attr("clip-path", "url(#clip)")
      .attr("d", area);

focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  
  focus.append("g")
    .attr("class", "x scan")
    .call(scan)
  .selectAll("rect")
    .attr("height", height )
      .on("mouseover", function() { focus_dropline.style("display", null); })
      .on("mouseout", function() { focus_dropline.style("display", "none"); })
      .on("mousemove", mousemove);

// prettify: to block the stroke of the scanner
  focus.append("line")
    .style("stroke", "white")
    .style("stroke-width", "2px")
    .attr("x1",2)
    .attr("x2",width)

// prettify: to block the stroke of the scanner at bottom
  focus.append("line")
    .style("stroke", "black")
    .style("stroke-width", "2px")
    .attr("x1",0)
    .attr("x2",width)
    .attr("y1",height)
    .attr("y2",height);
  
  
  // for the drop line
  var focus_dropline = focus.append("g")
      .attr("class", "focus_dropline")
      .style("display", "none");

focus_dropline.append("circle")
      .attr("r", 4.5);

focus_dropline.append("line")
      .classed("x", true)

focus_dropline.append("line")
      .classed("y", true)

focus_dropline.append("text")
      .attr("x", 20)
      .attr("y", 20)
      .attr("dy", ".35em");
  
  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus_dropline.attr("transform", "translate(" + x(d.date) + "," + y(d.price) + ")");
    focus_dropline.select("line.x")
        .attr("x1", 0)
        .attr("x2", -x(d.date))
        .attr("y1", 0)
        .attr("y2", 0)
    focus_dropline.select("line.y")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", 0)
        .attr("y2", height - y(d.price))
    focus_dropline.select("text").text(d.price.toFixed(2));
  }

context.append("path")
      .datum(data)
      .attr("class", "brush-area")
      .attr("d", area_brush);

context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);
});

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());

var dataFiltered = data.filter(function(d, i) {
    if ( (d.date >= x.domain()[0]) && (d.date <= x.domain()[1]) ) {
      return d.price;
    }
  });

// to re-scale y-axis
  y.domain([0.9*d3.min(dataFiltered.map(function(d) { return d.price; })),
   1.1*d3.max(dataFiltered.map(function(d) { return d.price; }))]);

focus.select(".line").attr("d", line);
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").transition().call(xAxis);
  focus.select(".y.axis").call(yAxis);
  // focus.select(".dot").attr("d", circles);

d3.selectAll('circle.dot')
  .attr("cx",function(d) { return x( d.FileDate ); })
  .attr("cy", function(d) {

var i_price = bisectDate(data, d.FileDate, 1),
    d0_price = data[i_price - 1],
    d1_price = data[i_price],
    d_price = d.FileDate - d0_price.date > d1_price.date - d.FileDate ? d1_price.price : d0_price.price;
    return y( d_price); });
};

// here's the function that is called upon brushing the main chart
function scanned() {
   // get the brush that is being manipulated
   var brush_event = d3.event.target;
   // check if it is empty - if not, then do the analytics box
   if(!brush_event.empty()) {
       
     // get the extent of the brush as a two-element array [min, max]
       var extent = brush_event.extent();

minDate = extent[0];
       maxDate = extent[1];

console.log("minDate",minDate)
       console.log("maxDate",maxDate)

// day difference
       var timeDiff = Math.abs(maxDate-minDate);
       var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

console.log("TimeDiff", Date(timeDiff))

var i_min = bisectDate(data, minDate, 1),
          d0_min = data[i_min - 1],
          d1_min = data[i_min],
          d_min = minDate - d0_min.date > d1_min.date - minDate ? d1_min : d0_min;
    
       var i_max = bisectDate(data, maxDate, 1),
          d0_max = data[i_max - 1],
          d1_max = data[i_max],
          d_max = maxDate - d0_max.date > d1_max.date - maxDate ? d1_max : d0_max;

period_return = (d_max.price - d_min.price) / d_min.price
        annualized_return = (d_max.price - d_min.price) / d_min.price / (diffDays/365)

// get line data dynamically
      var lineData = [{"x": x(minDate), "y":y(d_min.price) }, {"x": x(maxDate), "y": y(d_max.price)}];

console.log(lineData);
      console.log(lineFunction(lineData));

//focus_box
      var focus_box = focus.selectAll("g.focus_box")
                        .data([maxDate]);

focus_box
          .enter()
            .append("g")
            .attr("class", "focus_box")

focus_box.selectAll("*").remove();

focus_box
            .append("g")
            .attr("class", "indicator")
            .append("path")
            .attr("class", "line")
            .attr("d", lineFunction(lineData))

focus_box
            .append("circle")
              .attr("cx", x(maxDate))
              .attr("cy", y(d_max.price))
              .attr("r", 8)
              .attr("fill", "none")
              .attr("stroke", "black")
              .attr("stroke-width", 2);

focus_box
            .append("circle")
              .attr("cx", x(maxDate))
              .attr("cy", y(d_max.price))
              .attr("r", 2)
              .attr("fill", "black");

focus_box
            .append("circle")
              .attr("cx", x(minDate))
              .attr("cy", y(d_min.price))
              .attr("r", 3)
              .attr("fill", "black")
              .attr("stroke", "black")
              .attr("stroke-width", 1);

focus_box
          .append("rect")
          .attr("width", 120)
          .attr("height", 65)
          .attr('x',  Math.min(width - 125, x(maxDate)+14))
          .attr('y', height - 80)
          .attr("fill", "black")
          .attr("stroke", "steelblue")
          .attr("stroke-width", "1px")
          .attr("opacity", 0.2);

focus_box.append("text")
          .attr('x', Math.min(width - 125, x(maxDate)+20))
          .attr('y', height - 70)
          .attr("dy", ".3em")
          .text("Return (period)");

focus_box.append("text")
          .attr('x', Math.min(width - 125, x(maxDate)+20))
          .attr('y', height - 55)
          .attr("dy", ".35em")
          .text(((period_return*100).toFixed(1)).toString().concat("%"));

focus_box.append("text")
          .attr('x', Math.min(width - 125, x(maxDate)+20))
          .attr('y', height - 40)
          .attr("dy", ".3em")
          .text("Return (annualized)");

focus_box.append("text")
          .attr('x', Math.min(width - 125, x(maxDate)+20))
          .attr('y', height - 25)
          .attr("dy", ".35em")
          .text(((annualized_return*100).toFixed(1)).toString().concat("%"));

} 
};

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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