Customized Axes

Part of the video course: D3.js in Motion.

An example of creating a scatter plot with customized axes using D3.

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.

<!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>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .tick {
        font-size: 4em;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.sepalLength;
      const yValue = d => d.petalLength;
      const margin = { left: 45, right: 30, top: 20, bottom: 50 };

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(20)
        .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(20)
        .tickSize(-innerWidth);

const row = d => {
        d.petalLength = +d.petalLength;
        d.petalWidth = +d.petalWidth;
        d.sepalLength = +d.sepalLength;
        d.sepalWidth = +d.sepalWidth;
        return d;
      };

d3.csv('iris.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('r', 8);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js