Total: 58

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

  • (No additional info available in detailed archive for this subpage)
    Original URL path: /mike/d3/workshop/area-chart.html (2016-04-30)

  • Let’s Make a Bar Chart, III
    third argument and the rangeRoundBands variant will compute positions that snap to exact pixel boundaries for crisp edges Compare var x d3 scale ordinal domain A B C D E F rangeRoundBands 0 width 1 Now x A is 17 and each bar is 141 pixels wide And rather than hard code the letters in our domain we can compute them from data using array map and array sort All together bl ocks org 7440840 DOCTYPE html meta charset utf 8 style chart rect fill steelblue chart text fill white font 10px sans serif text anchor middle style svg class chart svg script src d3js org d3 v3 min js charset utf 8 script script var width 960 height 500 var x d3 scale ordinal rangeRoundBands 0 width 1 var y d3 scale linear range height 0 var chart d3 select chart attr width width attr height height d3 tsv data tsv type function error data x domain data map function d return d name y domain 0 d3 max data function d return d value var bar chart selectAll g data data enter append g attr transform function d return translate x d name 0 bar append rect attr y function d return y d value attr height function d return height y d value attr width x rangeBand bar append text attr x x rangeBand 2 attr y function d return y d value 3 attr dy 75em text function d return d value function type d d value d value coerce to number return d script Preparing Margins Ordinal scales are often used in conjunction with D3 s axis component to quickly display labeled tick marks improving the chart s legibility But before we can add an axis we need to clear some space in the margins Unlike HTML the SVG container is implicitly overflow hidden IE9 allows overflow but other browsers do not so you shouldn t rely on it By convention margins in D3 are specified as an object with top right bottom and left properties Then the outer size of the chart area which includes the margins is used to compute the inner size available for graphical marks by subtracting the margins For example reasonable values for a 960 500 chart are var margin top 20 right 30 bottom 30 left 40 width 960 margin left margin right height 500 margin top margin bottom Thus 960 and 500 are the outer width and height respectively while the computed inner width and height are 890 and 450 These inner dimensions can be used to initialize scale ranges To apply the margins to the SVG container we set the width and height of the SVG element to the outer dimensions and add a g element to offset the origin of the chart area by the top left margin var chart d3 select chart attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top

    Original URL path: (2016-04-30)
    Open archived version from archive