Simple Axis Tutorial with D3

set up files

Create js and css sub-directories in main project folder
Create these files:
- html file - index.html
  - HTML file must contain <body> and <head> tags.
- blank JavaScript file - axis.js
- atyle sheet - axis.cs
Save d3.js into js folder. Use latest version, available here
link html file to javascript file and style sheet.
link html file to d3.js before linking to axis.js
Open in browser window. Test in console with d3.version

set up svg viewport

select body tag with d3.select
append svg
add attributes for width and height - use 800 x 400

assign to variable svg.

test in browser inspector

var svg = d3.select("body").append("svg")
    .attr("width", "800")
    .attr("height", "400");

add dataset

Add to top of code.

var dataset = [1200, 343, 256, 822, 745, 926, 2336];

create scale

use d3.scaleLinear to set the domain and range of the dataset to fit into the screen.

var xScale = d3.scaleLinear()
    .domain([0, 2336])
    .range([0, 800]);

create x axis

append group to svg
call d3.axisBottom
pass xScale to d3.axisBottom

svg.append("g")
    .call(d3.axisBottom(xScale));

set up y scale

var yScale = d3.scaleLinear()
    .domain([0,10])
    .range([0, 400]);

No dataset is needed.

 svg.append("g")
    .call(d3.axisLeft(yScale))
    .attr("transform", "translate(100, 0)");

Reverse Scale

Reverse the order of the range of yScale.

Add Margins

create object to hold margin information

var margin = {top: 100, bottom: 100, right: 100, left: 50};

set up variables for width and height of chart
```
var width = 800;
var height = 600;
```

create variables for svg width and height

var svgWidth = 800 + margin.right + margin.left;
var svgHeight = 600 + margin.top + margin.bottom;

replace numbers in svg viewport with variables

 var svg = d3.select("body").append("svg")
   .attr("width", svgWidth)
   .attr("height", svgHeight);

append group and translate viewport position

  var svg = d3.select("body").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
      .append("g")
          .attr("transform", "translate(" + margin.right +
              "," + margin.top + ")");

remove translation of y axis

use width and height variables for scale
translate x axis to bottom

use height variable

  svg.append("g")
      .call(d3.axisBottom(xScale))
          .attr("transform", "translate(0, " +
              height + ")");

Add Styles to x and y axis

select all text elements of x axis
Create class for x and y axis

svg.append("g") .call(d3.axisBottom(xScale)) .attr("transform", "translate(0, " + height + ")") .selectAll("text") .attr("class", "xAxis");
change font style in css

increase vertical spacing of label and tick mark

.selectAll("text")
    .attr("class", "xAxis")
    .attr("transform", "translate(0, 4)");

apply style to y axis

codetricity/simple-axis.md

Select an option

No results found