API tools faq
paste
Advertisement
dhshin

scatter_brush_3

dhshin
Mar 21st, 2018
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.19 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.   <div id="plot"></div>
  21.   <p>
  22.     MEAN(width) = <span id="mean-width"></span>, MEAN(length) = <span id="mean-length"></span>
  23.   </p>
  24.   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  25.  
  26.   <script>
  27.    
  28.     function ready(fn) {
  29.       if (document.readyState != 'loading'){
  30.         fn();
  31.       } else {
  32.         document.addEventListener('DOMContentLoaded', fn);
  33.       }
  34.     }
  35.  
  36.     ready(init);
  37.  
  38.     function init() {
  39.      
  40.       data.forEach(function(d) {
  41.         d.length = parseFloat(d.length);
  42.         d.width = parseFloat(d.width);
  43.       });
  44.      
  45.       let svgWidth = 550;
  46.       let svgHeight = 550;
  47.       let margin = {top: 20, right: 20, bottom: 30, left: 40};
  48.       let width = svgWidth - margin.left - margin.right;
  49.       let height = svgHeight - margin.top - margin.bottom;
  50.      
  51.       let svg =
  52.           d3
  53.             .select('#plot')
  54.             .append('svg')
  55.               .attr('width', svgWidth)
  56.               .attr('height', svgHeight)
  57.               .append('g')
  58.                 .attr('transform',
  59.                       'translate(' + margin.left + ', ' + margin.top +')');
  60.      
  61.       let x = d3.scaleLinear()
  62.                 .domain([
  63.                   d3.min(data, d => d.width),
  64.                   d3.max(data, d => d.width)
  65.                 ])
  66.                 .range([0, width]);
  67.       let y = d3.scaleLinear()
  68.                 .domain([
  69.                   d3.min(data, d => d.length),
  70.                   d3.max(data, d => d.length)
  71.                 ])
  72.                 .range([height, 0]);
  73.      
  74.       let color = d3.scaleOrdinal()
  75.                     .domain(['setosa', 'versicolor', 'virginica'])
  76.                     .range(['#3366cc', '#dc3912', '#ff9900']);
  77.      
  78.       svg
  79.         .selectAll('circle')
  80.         .data(data)
  81.         .enter()
  82.           .append('circle')
  83.           .attr('r', 3.5)
  84.           .attr('cx', d => x(d.width))
  85.           .attr('cy', d => y(d.length))
  86.           .style('fill', d => color(d.species));
  87.      
  88.       let xAxis = d3.axisBottom(x);
  89.       let yAxis = d3.axisLeft(y);
  90.      
  91.       svg
  92.         .append('g')
  93.         .attr('class', 'x axis')
  94.         .attr('transform', 'translate(0, ' + height + ')')
  95.         .call(xAxis);
  96.      
  97.       svg
  98.         .append('g')
  99.         .attr('class', 'y axis')
  100.         .call(yAxis);
  101.      
  102.       let brush = d3.brush();
  103.       brush
  104.         .extent([[0, 0], [width, height]])
  105.         .on('brush', update)
  106.         .on('end', update)
  107.      
  108.       function printMean(selection) {
  109.         let wSum = 0, lSum = 0, n = 0;
  110.         selection
  111.           .each(d => {
  112.             n++;
  113.             wSum += d.width;
  114.             lSum += d.length;
  115.           })
  116.        
  117.         if (n > 0) {
  118.           d3.select('#mean-width')
  119.             .text(d3.format('.2f')(wSum / n));
  120.           d3.select('#mean-length')
  121.             .text(d3.format('.2f')(lSum / n));
  122.         }
  123.       }
  124.  
  125.       function update() {
  126.         let extent = d3.event ? d3.event.selection : null;
  127.         if(extent == null) {
  128.           let all = svg
  129.             .selectAll('circle')
  130.             .style('opacity', 1);
  131.          
  132.           printMean(all);
  133.           return;
  134.         }
  135.         let wRange = [extent[0][0], extent[1][0]];
  136.         let lRange = [extent[0][1], extent[1][1]];
  137.         let wSum = 0, lSum = 0, n = 0;
  138.        
  139.         let selected = svg
  140.           .selectAll('circle')
  141.           .style('opacity', 0.3)
  142.           .filter(d => {
  143.             return wRange[0] <= x(d.width)
  144.              && x(d.width) <= wRange[1]
  145.              && lRange[0] <= y(d.length)
  146.              && y(d.length) <= lRange[1];
  147.          })
  148.          .style('opacity', 1);
  149.        
  150.        printMean(selected);
  151.      }
  152.            
  153.      svg
  154.        .append('g')
  155.        .call(brush)
  156.    
  157.      update();
  158.    }
  159.    
  160.  </script>
  161. </body>
  162. </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!