API tools faq
paste
Advertisement
dhshin

scatter_brush_2

dhshin
Mar 21st, 2018
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7.   <style>
  8.     svg {
  9.       font: 10px sans-serif;
  10.     }
  11.     .axis path,
  12.     .axis line {
  13.       fill: none;
  14.       stroke: #000;
  15.       shape-rendering: crispEdges;
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20.   <svg width="550" height="550">
  21.   </svg>
  22.   <p>
  23.     MEAN(width) = <span id="mean-width"></span>, MEAN(length) = <span id="mean-length"></span>
  24.   </p>
  25.   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  26.  
  27.   <script>
  28.    
  29.     function ready(fn) {
  30.       if (document.readyState != 'loading'){
  31.         fn();
  32.       } else {
  33.         document.addEventListener('DOMContentLoaded', fn);
  34.       }
  35.     }
  36.  
  37.     ready(init);
  38.  
  39.     function init() {
  40.      
  41.       data.forEach(function(d) {
  42.         d.length = parseFloat(d.length);
  43.         d.width = parseFloat(d.width);
  44.       });
  45.      
  46.       let svg = d3.select('svg');
  47.       let width = 500;
  48.       let height = 500;
  49.      
  50.       let x = d3.scaleLinear()
  51.                 .domain([
  52.                   d3.min(data, d => d.width),
  53.                   d3.max(data, d => d.width)
  54.                 ])
  55.                 .range([50, width + 50]);
  56.       let y = d3.scaleLinear()
  57.                 .domain([
  58.                   d3.min(data, d => d.length),
  59.                   d3.max(data, d => d.length)
  60.                 ])
  61.                 .range([height, 0]);
  62.      
  63.       let color = d3.scaleOrdinal()
  64.                     .domain(['setosa', 'versicolor', 'virginica'])
  65.                     .range(['#3366cc', '#dc3912', '#ff9900']);
  66.      
  67.       svg
  68.         .selectAll('circle')
  69.         .data(data)
  70.         .enter()
  71.           .append('circle')
  72.           .attr('r', 3.5)
  73.           .attr('cx', d => x(d.width))
  74.           .attr('cy', d => y(d.length))
  75.           .style('fill', d => color(d.species));
  76.      
  77.       let xAxis = d3.axisBottom(x);
  78.       let yAxis = d3.axisLeft(y);
  79.      
  80.       svg
  81.         .append('g')
  82.         .attr('class', 'x axis')
  83.         .attr('transform', 'translate(0, ' + height + ')')
  84.         .call(xAxis);
  85.      
  86.       svg
  87.         .append('g')
  88.         .attr('class', 'y axis')
  89.         .attr('transform', 'translate(50, 0)')
  90.         .call(yAxis);
  91.      
  92.       let brush = d3.brush();
  93.       brush
  94.         .extent([[50, 0], [width + 50, height]])
  95.         .on('brush', update)
  96.         .on('end', update)
  97.      
  98.       function printMean(selection) {
  99.         let wSum = 0, lSum = 0, n = 0;
  100.         selection
  101.           .each(d => {
  102.             n++;
  103.             wSum += d.width;
  104.             lSum += d.length;
  105.           })
  106.        
  107.         if (n > 0) {
  108.           d3.select('#mean-width')
  109.             .text(d3.format('.2f')(wSum / n));
  110.           d3.select('#mean-length')
  111.             .text(d3.format('.2f')(lSum / n));
  112.         }
  113.       }
  114.  
  115.       function update() {
  116.         let extent = d3.event ? d3.event.selection : null;
  117.         if(extent == null) {
  118.           let all = svg
  119.             .selectAll('circle')
  120.             .style('opacity', 1);
  121.          
  122.           printMean(all);
  123.           return;
  124.         }
  125.         let wRange = [extent[0][0], extent[1][0]];
  126.         let lRange = [extent[0][1], extent[1][1]];
  127.         let wSum = 0, lSum = 0, n = 0;
  128.        
  129.         let selected = svg
  130.           .selectAll('circle')
  131.           .style('opacity', 0.3)
  132.           .filter(d => {
  133.             return wRange[0] <= x(d.width)
  134.              && x(d.width) <= wRange[1]
  135.              && lRange[0] <= y(d.length)
  136.              && y(d.length) <= lRange[1];
  137.          })
  138.          .style('opacity', 1);
  139.        
  140.        printMean(selected);
  141.      }
  142.            
  143.      svg
  144.        .append('g')
  145.        .call(brush)
  146.    
  147.      update();
  148.    }
  149.    
  150.  </script>
  151. </body>
  152. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!