D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.axis--x path {
  display: none;
}
​
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
​
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
​
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
<script>
​
 var tipLinks = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10,0]);
​
 var tipNodes = d3.tip()
      .attr('class', 'd3-tip d3-tip-nodes')
      .offset([-10, 0]);
​
​
​
​
​
​
// var zoom = d3.zoom()
//     .scaleExtent([1 / 4, 8])
//     .translateExtent([[-width, -Infinity], [2 * width, Infinity]])
//     .on("zoom", zoomed);
​
​
// function zoomed() {
//   var xz = d3.event.transform.rescaleX(x);
//   xGroup.call(xAxis.scale(xz));
//   areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
// }
 
​
​
    // var zoom = d3.zoom()
    // .scaleExtent([1 / 4, 8])
    // .translateExtent([[-width, -Infinity], [2 * width, Infinity]])
    // .on("zoom", zoomed);
​
​
var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
​
​
​
// var area = d3.area()
//     .curve(d3.curveStepAfter)
//     .y0(y(0))
//     .y1(function(d) { return y(d.value); });
​
​
 var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
// var context = svg.append("g")
//     .attr("class", "context")
//     .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
​
//   var yGroup = g.append("g");
​
// var xGroup = g.append("g")
//     .attr("transform", "translate(0," + height + ")");
​
    // var areaPath = g.append("path")
    // .attr("clip-path", "url(#clip)")
    // .attr("fill", "steelblue");
​
​
  var Line_chart = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("clip-path", "url(#clip)");
​
​
   var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
//       function zoomed() {
//   if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
//   var t = d3.event.transform;
//   x.domain(t.rescaleX(x).domain());
//   Line_chart.select(".line").attr("d", line);
//   focus.select(".axis--x").call(x);
//   // context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
// }
​
// var zoom = d3.zoom()
//     .scaleExtent([1, Infinity])
//     .translateExtent([[0, 0], [width, height]])
//     .extent([[0, 0], [width, height]])
//     .on("zoom", zoomed);
​
var parseTime = d3.timeParse("%Y%m%d");
​
var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);
​
var xAxis = d3.axisBottom(x);
​
var yAxis = d3.axisLeft(y);
​
// var brush = d3.brushX()
//     .extent([[0, 0], [width, height]])
//     .on("brush end", brushed);
​
​
var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
var xGroup = g.append("g")
    .attr("transform", "translate(0," + height + ")");
​
var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([[0, 0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);
​
  var zoomRect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .call(zoom);
​
​
g.append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);
​
// function zoomed() {
//   var xz = d3.event.transform.rescaleX(x);
//   xGroup.call(xAxis.scale(xz));
//   // areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
// }
​
function zoomed() {
  let xz = d3.event.transform.rescaleX(x);
  xGroup.call(xAxis.scale(xz));
  line.x(function(d) {
    return xz(d.date)
  })
  g.selectAll(".line")
    .attr("d", function(d){return line(d.values)});
  g.selectAll(".axis--x").remove();
}
​
d3.selection.prototype.moveToFront = function() { 
      console.log("hi"); 
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
d3.tsv("ass5data.tsv", type, function(error, data) {
  if (error) throw error;
​
  var cities = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, temperature: d[id]};
      })
    };
  });
​
  x.domain(d3.extent(data, function(d) { return d.date; }));
​
  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
  ]);
​
  z.domain(cities.map(function(c) { return c.id; }));
​
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
​
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature, ºF");
​
  var city = g.selectAll(".city")
    .data(cities)
    .enter().append("g")
      .attr("class", "city");
​
  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .attr("id", function(d) { console.log(d.id); return d.id.substring(0, 3).toUpperCase();})
      .style("stroke", function(d) { return z(d.id); });
​
      // "San Francisco".substring(0, 3).toUpperCase();
​
​
​
​
  city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("id",function(d) { console.log(d.id); return d.id.substring(0, 3).toUpperCase();})
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .on("click", function(data){
          // Determine if current line is visible
​
          console.log("data: " + data.id);
          var active   = data.active ? false : true,
               newOpacity = active ? 0 : 1; 
         
            d3.select("#"+data.id.substring(0, 3).toUpperCase())
            .transition().duration(100)
            .style("opacity", newOpacity);
​
            data.active = active;
        
      })
      .on('mouseover', function(d) {
        tipLinks.show;
        // var sel = d3.select("#"+d.id.substring(0, 3).toUpperCase())
        //   .style("stroke",function(d) {return z(d.id);})
        //   .style("stroke-width", 5);
        //   this.parentNode.parentNode.appendChild(this.parentNode);
        // console.log("bitch");
        console.log("this"+this.id);
        console.log(d.id.substring(0, 3).toUpperCase() + " " + this.id);
​
         d3.selectAll('path')
            // .filter("#"+d.id.substring(0, 3).toUpperCase())
            .transition()
            .duration(1000)
            .style("stroke", function(){
                if(d.id.substring(0, 3).toUpperCase() === this.id){
​
                  return z(d.id);
                }else{
                  console.log("come here?");
                  return "lightgrey";
                }
          });
​
​
        // d3.selectAll("path")
        //     .filter("#"+d.id.substring(0, 3).toUpperCase() === "#"+this.id)
        //     .transition()
        //     .duration(1000)
        //     .style("stroke","lightgrey");
​
        // var sel2 = d3.select("#"+d.id.substring(0, 3).toUpperCase())
        //   .style("stroke", "lightgrey");
​
​
          // var cityUnderMouse = this;
          // d3.selectAll('')
​
      //    d3.selectAll("path")
      //     .filter(function(d){return this === d.id;})
      //     .style("stroke-width", 2);
      //     var cityUnderMouse = this;
      //     d3.selectAll('d').transition().style('stroke',function () {
      //      if(this !== cityUnderMouse){ console.log("cunt");return "lightgrey"};
    
      // });
          // d3.select(this).moveToFront();
          //       var currentState = this;
          //       d3.select(this).style('fill-opacity', 1);
//                var thoseStates = d3
//                        .selectAll('path')[0]
//                        .filter(function(state) {
//                            return state !== currentState;
//                        });
​
//                d3.selectAll(thoseStates)
//                        .style({
//                            'fill-opacity':.5
//                        });
//                })
      })
      .on('mouseout', function(d, i) {
​
          d3.selectAll(".city")
          .selectAll("path")
          .transition()
          .style("stroke", function(d){
          return z(d.id);
        })
        // d3.selectAll('path')
        //   .transition()
        //   .duration(1000)
        //   .style("stroke", z(d.id));
​
        // d3.selectAll('path')
        //     // .filter("#"+d.id.substring(0, 3).toUpperCase())
        //     .transition()
        //     .duration(1000)
        //     .style("stroke", function(){
        //         if("#"+d.id.substring(0, 3).toUpperCase()){
​
        //           return z(d.id);
        //         }else{
        //           console.log("come here?");
        //           return "lightgrey";
        //         }
        //     });
            // d3.select(this)
            // .transition()
            // .duration(750)
            // .style("stroke", "lightgrey")
            // .style("stroke-width", 1);
          
            // d3.selectAll('path')
            // .filter(function(d){return d !== this})
            // .transition()
            // .duration(750)
            // .style("stroke", "lightgrey")
      })
      .text(function(d) { return d.id; });
​
​
      //  svg.append("rect")
      // .attr("class", "zoom")
      // .attr("width", width)
      // .attr("height", height)
      // .call(d3.zoom().on("zoom", function () {
      //     svg.attr("transform", d3.event.transform)
      // }));
});
​
// function brushed() {
//   if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
//   var s = d3.event.selection || x.range();
//   x.domain(s.map(x.invert, x));
//   Line_chart.select(".line").attr("d", line);
//   focus.select(".axis--x").call(xAxis);
//   svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
//       .scale(width / (s[1] - s[0]))
//       .translate(-s[0], 0));
// }
​
function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}
​
</script>
​
    