daily pastebin goal
24%
SHARE
TWEET

Untitled

a guest Mar 20th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. function drawLine() {
  3.  
  4.   // set the dimensions and margins of the graph
  5. var margin = {top: 20, right: 20, bottom: 30, left: 50},
  6.     width = window.screen.availWidth * .95 - margin.left - margin.right,
  7.     height = window.screen.availHeight * .2 - margin.top - margin.bottom;
  8.  
  9. // parse the date / time
  10. var parseTime = d3.timeParse("%Y-%m-%d");
  11.  
  12. // set the ranges
  13. var x = d3.scaleTime().range([0, width]);
  14. var y = d3.scaleLinear().range([height, 0]);
  15.  
  16. // define the line
  17. var valueline = d3.line()
  18.     .x(function(d) { return x(d.date); })
  19.     .y(function(d) { return y(d.streams); });
  20.  
  21. // append the svg obgect to the body of the page
  22. // appends a 'group' element to 'svg'
  23. // moves the 'group' element to the top left margin
  24. var svg = d3.select("body").append("svg")
  25.     .attr("width", width + margin.left + margin.right)
  26.     .attr("height", height + margin.top + margin.bottom)
  27.   .append("g")
  28.     .attr("transform",
  29.           "translate(" + margin.left + "," + margin.top + ")");
  30.  
  31. // Get the data
  32. d3.csv("./data/time.csv", function(error, data) {
  33.   if (error) throw error;
  34. console.log(data)
  35.   // format the data
  36.   data.forEach(function(d) {
  37.       d.date = parseTime(d.date);
  38.       d.streams = +d.streams;
  39.   });
  40.  
  41.   // Scale the range of the data
  42.   x.domain(d3.extent(data, function(d) { return d.date; }));
  43.   y.domain([100000000, d3.max(data, function(d) { return d.streams; })]);
  44.  
  45.   // Add the valueline path.
  46.   svg.append("path")
  47.       .data([data])
  48.       .attr("class", "line")
  49.       .attr("d", valueline);
  50.  
  51.   // Add the X Axis
  52.   svg.append("g")
  53.       .attr("transform", "translate(0," + height + ")")
  54.       .call(d3.axisBottom(x));
  55.  
  56.       var line_group = svg.append('g');
  57.       var line = line_group.append("line")
  58.         .attr("class", "timeLine")
  59.         .attr("x1", 0)
  60.         .attr("y1", 0)
  61.         .attr("x2", 0)
  62.         .attr("y2", height)
  63.         .attr("opacity", 1)
  64.         .attr("style", "stroke:steelblue;stroke-width:1")
  65.  
  66.       var text = line_group.append("text")
  67.       var text2 = line_group.append("text").attr("transform", "translate(0,20)")
  68.  
  69.  
  70.       // line_group = d3.selectAll(".timeLine,.date")
  71.  
  72.  
  73.  
  74.   function getDate(mouse){
  75.     // var mouse = d3.mouse(this)
  76.     var xDate = x.invert(mouse[0]),
  77.     bisect = d3.bisector(function(d) { return d.date;}).right;
  78.     idx = bisect(data, xDate);
  79.     return [xDate, idx];
  80.   }
  81.  
  82.   svg.append('rect')
  83.     .attr('width', width)
  84.     .attr('height', height)
  85.     .attr('opacity', 0)
  86.     .on('mouseout', () => line_group.attr('opacity', 0))
  87.     .on('mouseover', () => line_group.attr('opacity', 1))
  88.     .on('mousemove', function(){
  89.       var val = getDate(d3.mouse(this))
  90.       var date = val[0], idx = val[1];
  91.  
  92.       if (date.getFullYear() == "2019") {
  93.         text.attr("transform", "translate(-2,0)").attr("text-anchor","end");
  94.         text2.attr("transform", "translate(-2,20)").attr("text-anchor","end");
  95.       }
  96.       else {
  97.         text.attr("transform", "translate(0,0)").attr("text-anchor","start");
  98.         text2.attr("transform", "translate(0,20)").attr("text-anchor","start");
  99.       }
  100.  
  101.       line_group.attr('transform', 'translate(' + x(date) + ',0)')
  102.       text.text("Date: " + date.toLocaleDateString("en-US"))
  103.       text2.text("Streams: " + data[idx].streams)
  104.     })
  105.     .on("click", function() {
  106.       var date = getDate(d3.mouse(this))
  107.       drawMap(date[0])
  108.  
  109.     })
  110.  
  111.  
  112. });
  113.  
  114. }
  115.  
  116. drawLine();
  117.  
  118.  
  119. /* THIS PART GOES INTO STYLE.CSS
  120.  
  121. .line {
  122.   fill: none;
  123.   stroke: steelblue;
  124.   stroke-width: 2px;
  125.   opacity: 1;
  126. }
  127.  
  128. */
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top