Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- <style>
- svg {
- font: 10px sans-serif;
- }
- .axis path,
- .axis line {
- fill: none;
- stroke: #000;
- shape-rendering: crispEdges;
- }
- </style>
- </head>
- <body>
- <svg width="550" height="550">
- </svg>
- <p>
- MEAN(width) = <span id="mean-width"></span>, MEAN(length) = <span id="mean-length"></span>
- </p>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
- <script>
- function ready(fn) {
- if (document.readyState != 'loading'){
- fn();
- } else {
- document.addEventListener('DOMContentLoaded', fn);
- }
- }
- ready(init);
- function init() {
- data.forEach(function(d) {
- d.length = parseFloat(d.length);
- d.width = parseFloat(d.width);
- });
- let svg = d3.select('svg');
- let width = 500;
- let height = 500;
- let x = d3.scaleLinear()
- .domain([
- d3.min(data, d => d.width),
- d3.max(data, d => d.width)
- ])
- .range([50, width + 50]);
- let y = d3.scaleLinear()
- .domain([
- d3.min(data, d => d.length),
- d3.max(data, d => d.length)
- ])
- .range([height, 0]);
- let color = d3.scaleOrdinal()
- .domain(['setosa', 'versicolor', 'virginica'])
- .range(['#3366cc', '#dc3912', '#ff9900']);
- svg
- .selectAll('circle')
- .data(data)
- .enter()
- .append('circle')
- .attr('r', 3.5)
- .attr('cx', d => x(d.width))
- .attr('cy', d => y(d.length))
- .style('fill', d => color(d.species));
- let xAxis = d3.axisBottom(x);
- let yAxis = d3.axisLeft(y);
- svg
- .append('g')
- .attr('class', 'x axis')
- .attr('transform', 'translate(0, ' + height + ')')
- .call(xAxis);
- svg
- .append('g')
- .attr('class', 'y axis')
- .attr('transform', 'translate(50, 0)')
- .call(yAxis);
- let brush = d3.brush();
- brush
- .extent([[50, 0], [width + 50, height]])
- .on('brush', update)
- .on('end', update)
- function printMean(selection) {
- let wSum = 0, lSum = 0, n = 0;
- selection
- .each(d => {
- n++;
- wSum += d.width;
- lSum += d.length;
- })
- if (n > 0) {
- d3.select('#mean-width')
- .text(d3.format('.2f')(wSum / n));
- d3.select('#mean-length')
- .text(d3.format('.2f')(lSum / n));
- }
- }
- function update() {
- let extent = d3.event ? d3.event.selection : null;
- if(extent == null) {
- let all = svg
- .selectAll('circle')
- .style('opacity', 1);
- printMean(all);
- return;
- }
- let wRange = [extent[0][0], extent[1][0]];
- let lRange = [extent[0][1], extent[1][1]];
- let wSum = 0, lSum = 0, n = 0;
- let selected = svg
- .selectAll('circle')
- .style('opacity', 0.3)
- .filter(d => {
- return wRange[0] <= x(d.width)
- && x(d.width) <= wRange[1]
- && lRange[0] <= y(d.length)
- && y(d.length) <= lRange[1];
- })
- .style('opacity', 1);
- printMean(selected);
- }
- svg
- .append('g')
- .call(brush)
- update();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement