D3 Examples - [Unlisted] D3 Course Practice

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://d3js.org/d3-scale-chromatic.v1.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>
    .tick, .legendCells {
      font-size: 20pt;}
    .axis-label{
      fill: black;
      font-size: 24pt;
      font-family:sans-serif;
    }
    
    
    </style>
  </head>
<body>
  <svg width="960" height="500"></svg>  
  <script>
    const xValue = d=> d.sepalLength;
    const xLabel = 'Sepal Length';
    const yValue = d=> d.petalLength;
    const yLabel = 'Petal Length';
    const colorValue = d => d.species;
        const colorLabel = 'Species'   
    
    const   margin = {
      left: 120,
      right: 300,
      top: 20, 
      bottom: 140
    };
    
    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+40}, 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',-50)
      .attr('transform', `rotate(-90)`)
      .style('text-anchor','middle')
      .text(yLabel);
    
    colorLegendG.append('text')
        .attr('class', 'axis-label')
      .attr('x', -20)
        .attr('y',-30)
      .text(colorLabel);
    
    
    const xScale = d3.scaleLinear();
    const yScale = d3.scaleLinear();
    const colorScale = d3.scaleOrdinal()
        .range(d3.schemeDark2)
    ;
    
    const xAxis = d3.axisBottom()
        .scale(xScale)
            .tickPadding(20)
            .tickSize(-innerHeight);
    const yAxis = d3.axisLeft()
        .scale(yScale)
            .ticks(5)
            .tickPadding(20)
            .tickSize(-innerWidth);
    
    const colorLegend = d3.legendColor()
            .scale(colorScale)
            .shape('circle')
            ;
    
    const row = d =>{
      d.petalLength = +d.petalLength;
      d.petalWidth= +d.petalWidth;
      d.sepalLength= +d.sepalLength;
      d.sepalWidth= +d.sepalWidth;
      return d;
    };
    
    d3.csv('iriscsv.csv', row, data => {
      
      xScale
        .domain(d3.extent(data, xValue))        
        .range([0,innerWidth])
        .nice();
      
     yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
     
      //colorScale.domain(data.map(colorValue).reverse());
      
      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('r', 5);   
      
      xAxisG.call(xAxis);
      yAxisG.call(yAxis);
      colorLegendG.call(colorLegend)
        .selectAll('.cell text')
            .attr('dy', '.05em')
            .attr('dx', '0em');
    });
  </script>
</body>
</html>
    