D3 Examples - ITS Toggle Scatterplot v3

ITS Toggle Scatterplot v3
An example scatter plot with color legend using D3 and d3-legend.
This shows the "Iris" dataset. Originally published at UCI Machine Learning Repository: Iris Data Set, this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations. Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 12pt;
        font-family: calibri;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: calibri;
      }
      
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.problemsCompleted;
      const xLabel = 'Number of Problems Completed';
      const yValue = d => d.value;
      const yLabel = 'Value';
      const colorValue = d => d.category;
      const colorLabel = 'Learning Components';
      const margin = { left: 120, right: 300, top: 20, bottom: 220 };
​
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth + 60}, 150)`);
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 100)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
​
      colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel)
            .text(function(d) { return d; });
            
           
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
      .range(d3.schemeCategory10);
       // .domain(["correct", "MCAS Score", "time", "attempts", "hints"])
        //.range(["#ff4800", "#009933" , "#0000FF", "#ff00a9","#ffd000"]);
​
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight);
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);
​
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('rect')
//          .orient('horizontal')
//          .labelWrap(30)
//      .shapeWidth(40)
//      .labelAlign("start")
//      .shapePadding(15)
      ;
        
      colorLegendG.append('rect')
        .style ("cursor", "pointer")
        ;
      
      
      
//        .on("click", function (d) {
//          dot.filter(function () {
//               return this.dataset.category === d;
//             })
//             .transition().duration(750)
//             .style("opacity", function () {
//                console.log(this.style.opacity);
//                return (parseInt(this.style.opacity)) ? 0 : 1;
//             });
//        });
​
      const row = d => {
        d.problemsCompleted = +d.problemsCompleted;
        d.value = +d.value;
        
        return d;
      };
​
      d3.csv('itsLearning.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();
​
        yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
​
        g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.9)
                .attr('stroke', 'black')
            .attr('r', 4)
                ;
        
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>
​
    