D3 and Axis A plot or visualization usually needs some axis to show the range linear logarithmic or some other Main x axis types d3 scaleLinear d3 scaleLog d3 scalePoint d3 scaleBand Attach the axis scales using d3 axisBottom d3 axisLeft Very basic linear axis script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 400 attr height 300 Create the scale var x d3 scaleLinear domain 0 10 This is what is written on the Axis from 0 to 10 range 100 200 This is where the axis is placed from 100px to 200px Draw the axis svg append g attr transform translate 0 50 This controls the vertical position of the Axis call d3 axisBottom x script Axis types linear non linear labelled script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 600 attr height 400 Create the scale var x d3 scaleLog domain 1 1000 This is what is written on the Axis from 0 to 100 range 100 500 This is where the axis is placed from 100 px to 500px base 10 Draw the axis svg append g attr transform translate 0 100 This controls the vertical position of the Axis call d3 axisBottom x tickFormat d3 format 2 Create the scale var x d3 scalePoint domain A B C D E This is what is written on the Axis from 0 to 100 range 100 500 This is where the axis is placed from 100 px to 500px Draw the axis svg append g attr transform translate 0 200 This controls the vertical position of the Axis call d3 axisBottom x Create the scale var x d3 scaleBand domain A B C D E This is what is written on the Axis from 0 to 100 range 100 500 This is where the axis is placed from 100 px to 500px padding 0 8 Goes between 0 and 1 Default is 0 Draw the axis svg append g attr transform translate 0 300 This controls the vertical position of the Axis call d3 axisBottom x console log ready script Vertical axis script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 600 attr height 300 Create the scale var y d3 scaleLinear domain 0 100 This is what is written on the Axis from 0 to 100 range 250 10 Note it is reversed pixels Draw the axis svg append g attr transform translate 50 0 This controls the vertical position of the Axis call d3 axisLeft y script Rotating the axis labels script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 600 attr height 300 let labels once upon a time lived though svg Create the scale var x d3 scaleBand domain labels This is what is written on the Axis from 0 to 100 range 0 500 Note it is reversed Draw the axis svg append g attr transform translate 100 100 This controls the rotate position of the Axis call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 45 style text anchor end style font size 20 style fill ffbb11 console log ready script Adding color customizations to the axis labels easy to also add icons images script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 600 attr height 300 let labels once upon a time lived though svg Create the scale var x d3 scaleBand domain labels This is what is written on the Axis from 0 to 100 range 0 500 Note it is reversed mix in some colors 5 colors var myColor4 d3 scaleOrdinal domain d3 range 5 range d3 schemeSet3 Draw the axis svg append g attr transform translate 100 100 This controls the rotate position of the Axis call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 45 style text anchor end style font size 20 style fill function d i console log d d i i return myColor4 i console log ready script Title labels for the axis script type text javascript src https d3js org d3 v7 min js script script document body style height 350px create svg element var svg d3 select body append svg attr width 600 attr height 400 Add X axis var x d3 scaleLinear domain 0 100 range 0 300 svg append g attr transform translate 80 330 call d3 axisBottom x Add Y axis var y d3 scaleLinear domain 0 100 range 300 0 svg append g attr transform translate 80 30 call d3 axisLeft y Add X axis label svg append text attr text anchor end attr x 250 attr y 370 text X axis title Y axis label svg append text attr text anchor end attr transform rotate 90 attr y 40 attr x 130 text Y axis title script Creating grid script type text javascript src https d3js org d3 v7 min js script script document body style height 350px let width 500 let height 500 create svg element var svg d3 select body append svg attr width 550 attr height 550 set the ranges var x d3 scaleTime range 0 width var y d3 scaleLinear range height 0 gridlines in x axis function function make_x_gridlines return d3 axisBottom x ticks 5 gridlines in y axis function function make_y_gridlines return d3 axisLeft y ticks 10 add the X gridlines svg append g attr class grid attr transform translate 0 height call make_x_gridlines tickSize height tickFormat add the Y gridlines svg append g attr class grid call make_y_gridlines tickSize width tickFormat script
though svg Create the scale var x d3 scaleBand domain labels This is what is written on the Axis from 0 to 100 range 0 500 Note it is reversed Draw the axis svg append g attr transform translate 100 100 This controls the rotate position of the Axis call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 45 style text anchor end style font size 20 style fill ffbb11 console log ready script Adding color customizations to the axis labels easy to also add icons images script type text javascript src https d3js org d3 v7 min js script script document body style height 200px create svg element var svg d3 select body append svg attr width 600 attr height 300 let labels once upon a time lived though svg Create the scale var x d3 scaleBand domain labels This is what is written on the Axis from 0 to 100 range 0 500 Note it is reversed mix in some colors 5 colors var myColor4 d3 scaleOrdinal domain d3 range 5 range d3 schemeSet3 Draw the axis svg append g attr transform translate 100 100 This controls the rotate position of the Axis call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 45 style text anchor end style font size 20 style fill function d i console log d d i i return myColor4 i console log ready script Title labels for the axis script type text javascript src https d3js org d3 v7 min js script script document body style height 350px create svg element var svg d3 select body append svg attr width 600 attr height 400 Add X axis var x d3 scaleLinear domain 0 100 range 0 300 svg append g attr transform translate 80 330 call d3 axisBottom x Add Y axis var y d3 scaleLinear domain 0 100 range 300 0 svg append g attr transform translate 80 30 call d3 axisLeft y Add X axis label svg append text attr text anchor end attr x 250 attr y 370 text X axis title Y axis label svg append text attr text anchor end attr transform rotate 90 attr y 40 attr x 130 text Y axis title script Creating grid script type text javascript src https d3js org d3 v7 min js script script document body style height 350px let width 500 let height 500 create svg element var svg d3 select body append svg attr width 550 attr height 550 set the ranges var x d3 scaleTime range 0 width var y d3 scaleLinear range height 0 gridlines in x axis function function make_x_gridlines return d3 axisBottom x ticks 5 gridlines in y axis function function make_y_gridlines return d3 axisLeft y ticks 10 add the X gridlines svg append g attr class grid attr transform translate 0 height call make_x_gridlines tickSize height tickFormat add the Y gridlines svg append g attr class grid call make_y_gridlines tickSize width tickFormat script