All examples By author By category About

GerHobbelt

Full window Github gist

d3.js [vanilla/mbostock]: axes examples

D3.js Axes …… ∆ ∞

This gist accompanies this gist which showcases the augmented axes component: here we see these axes rendered (if at all possible) using the mbostock d3 master head, i.e. 'vanilla d3'.

Related gists

gist 3605035: a series of linear axes with varying degress of sophistication, using the advanced d3.axis component
gist 3605069: same code, with crash protection wrappers, for vanilla D3.js (use to see how many of these vanilla D3.js supports today)
gist 3605124: reduced code suitable for use with vanilla D3.js v2.10 as is, with crash protection wrappers

<!DOCTYPE html>
<html>
  <head>
    <title>Classical Scales</title>
    <script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
}

.error {
  fill: red;
  font-size: 200%;
}

line, path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

/*
.minor :not(.minor) {
  display: none;
}
*/

</style>
  </head>
  <body>
    <svg>
      <g>
        <filter id="glow">
          <feColorMatrix type="matrix"
              values=
                  "0 0 0 0.98  0
                   0 0 0 0.98  0
                   0 0 0 0.98  0
                   0 0 0 1     0"
          />
          <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
          <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </g>
    </svg>
<script type="text/javascript" src="https://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js" ></script>

/*
Correct bl.ocks.org IFRAME, Iff we're shown in an iframe!
*/
d3.select(window.frameElement)
  .style("height", "1500px");

var margin = {top: 0, right: 20, bottom: 20, left: 20},
    width = 960 - margin.right - margin.left,
    height = 1500 - margin.top - margin.bottom;
    hstep = Math.floor(height / 32);

var x = d3.scale.linear()
    .domain([.05, .95])
    .range([0, width]);

var log_x = d3.scale.log()
    .domain([.05, 95])
    .range([0, width]);

var log_x_v2 = d3.scale.log()
    .domain([.05, 9500])
    .range([0, width]);

var log_x_v3 = d3.scale.log()
    .domain([.05, .95])
    .range([0, width]);

var pow_x_2 = d3.scale.pow()
    .exponent(2)
    .domain([.05, 9.5])
    .range([0, width]);

var pow_x_2_v2 = d3.scale.pow()
    .exponent(2)
    .domain([.05, 9500])
    .range([0, width]);

var pow_x_2_v3 = d3.scale.pow()
    .exponent(2)
    .domain([0, 2])
    .range([0, width]);

var pow_x_4 = d3.scale.pow()
    .exponent(2)
    .domain([0, 9.5])
    .range([0, width]);

var pow_x_f5 = d3.scale.pow()
    .exponent(1 / 5)
    .domain([0, 9.5])
    .range([0, width]);

var pow_x_m3 = d3.scale.pow()
    .exponent(-3)
    .domain([0, 9.5])
    .range([0, width]);

var sqrt_x = d3.scale.sqrt()
    .domain([0, 9.5])
    .range([0, width]);

var quantile_x = d3.scale.quantile()
    .domain([.05, .1, .11, .12, .13, .15, .2, .25, .4, .55, .7, 1, 2, 3, 4, 4.5, 4.6, 4.7, 4.8, 4.9, 5, 5.1, 6.3, 6.7, 6.8, 7, 8.4, 8.5, 8.6, 8.7, 9.5])
    .range([0, width / 8, width / 4, width / 2, width * 3 / 4, width]);

var quantize_x = d3.scale.quantize()
    .domain([.05, 9.5])
    .range([0, width / 8, width / 4, width / 2, width * 3 / 4, width]);

// d3.scale.threshold ASSUMPTION: domain.length == range.length - 1
var threshold_x = d3.scale.threshold()
    .domain([50, 140, 201, 605])
    .range([0, width / 4, width / 2, width * 3 / 4, width]);

var identity_x = d3.scale.identity()
    .domain([0, width]);

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

var axis_y = hstep;
var descr = function(txt) {
  return function() {
    this.insert("text", "g")
      .text(txt)
      .attr("class", "description")
      .attr("x", width / 2)
      .attr("y", 0)
      .attr("dy", "-1em")
      .attr("text-anchor", "middle");
  };
};

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x))
    .call(descr("regular, linear axis (range = [0.05 - 0.95])"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(false))
    .call(descr("regular, with .tickSubdivide(false)"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(true))
    .call(descr("regular, with .tickSubdivide(true)"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(9))
    .call(descr("regular, with 10 subticks per tick"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide("9"))
    .call(descr('regular, with 10 subticks per tick, using non-numeric .tickSubdivide("9")'));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(9).tickSize(6, 3, 10))
    .call(descr("regular, with 10 (smaller) subticks and longer start/end ticks"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(9).tickSize(8, function(d, i) {
      return (d.subindex == 5 ? 5 : 3);
    }, -10))
    .call(descr("classical, with 10 (smaller) subticks, emphasis on the fifth, and longer start/end ticks, inverted"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(x).tickSubdivide(16 - 1).tickSize(10, function(d, i) {
      return (d.subindex == 8 ? 8 : d.subindex % 2 == 0 ? 5 : 2);
    }, -4))
    .call(descr("classical, with 16 subticks, emphasis on the even and half-way ticks a la classical inches scale, start/end ticks inverted"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical log_x")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(log_x).tickSubdivide(9).tickSize(8, function(d, i) {
      return (d.subindex == 5 ? 5 : 3);
    }, -10))
    .call(descr("classical logarithmic, with 10 (smaller) subticks, emphasis on the fifth, and longer start/end ticks, inverted"));

// returns function suitable for axis.tickSubdivision():
function example_subdiv_A(scale) {
  return function(subticks, ticks, i, n, extent) {
    var t0, t1, s, v;
    var min_subwidth = 4;

function nice_modulus(m) {
      if (m >= 20) return 20;
      if (m >= 10) return 10;
      if (m >= 5) return 5;
      if (m >= 2) return 2;
      return 0;
    }

function fill_subticks(base, idx, m) {
      var v0, v1, v05, j, modulus, delta;

v0 = scale(t0.value);
      v1 = scale(t1.value);
      // test if this tick range is thresholded/quantized in any way:
      v05 = scale((t1.value + t0.value) / 2);
      if (v05 == v1 || v05 == v0)
        return;
      modulus = nice_modulus((v1 - v0) / min_subwidth);
      if (modulus <= 0)
        return;

delta = (t1.value - t0.value) / modulus;
      for (j = modulus; j-- > 1; ) {
        v = base.value + m * j * delta;
        if (v > extent[0] && v < extent[1]) {
          subticks.push({
            value: v,
            index: idx,
            base: base,
            subindex: m * j,
            modulus: modulus,
            majors: ticks
          });
        }
      }
    }

if (i == 0) {
      t0 = ticks[0];
      t1 = ticks[1];
      fill_subticks(t0, -1, -1);
    } else if (i == n) {
      t0 = ticks[n - 2];
      t1 = ticks[n - 1];
      fill_subticks(t1, n - 1, 1);
    } else {
      t0 = ticks[i - 1];
      t1 = ticks[i];
      fill_subticks(t0, i - 1, 1);
    }
    return subticks;
  };
}

function b0rk_prevention(svg, f) {
  var s;
  try {
    s = f();
  } catch (e) {
    s = svg.append("g")
        .attr("class", "b0rk")
        .attr("transform", "translate(0," + axis_y + ")");

s.append("text")
      .text("B0rk B0rk B0rk!")
      .attr("class", "error")
      .attr("style", "stroke: white; stroke-width: 10;")
      .attr("x", 40)
      .attr("y", 10)
      .attr("text-anchor", "left");

s.append("text")
      .text("B0rk B0rk B0rk!")
      .attr("class", "error")
      .attr("style", "filter: url(#glow);")
      .attr("x", 40)
      .attr("y", 10)
      .attr("text-anchor", "left");
  }
  return s;
}

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical log_x")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(log_x).tickSubdivide(example_subdiv_A(log_x))
      .tickSize(12, function(d, i) {
        return (2 * d.subindex == d.modulus ? 8 :
                ((5 * d.subindex == d.modulus) && (d.modulus >= 10) ? 6 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 5 :
                  (d.modulus > 10 ? 2 : 4))));
      }, -10))
    .call(descr("classical logarithmic, with output-dependent # of subticks, emphasis on the 2nd and other even (but only when we have 10+ subticks!) and .5 subdiv, and longer start/end ticks"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical log_x_v2")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(log_x_v2).tickSubdivide(example_subdiv_A(log_x_v2))
      .tickSize(12, function(d, i) {
        return (2 * d.subindex == d.modulus ? 8 :
                ((5 * d.subindex == d.modulus) && (d.modulus >= 10) ? 6 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 5 :
                  (d.modulus > 10 ? 2 : 4))));
      }, -10))
    .call(descr("classical logarithmic as above, but for a much larger range"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical log_x_v2")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(log_x_v3).tickSubdivide(example_subdiv_A(log_x_v3))
      .tickSize(12, function(d, i) {
        return (2 * d.subindex == d.modulus ? 9 :
                ((5 * d.subindex == d.modulus) && (d.modulus >= 10) ? 6 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 5 :
                  (d.modulus > 10 ? 2 : 4))));
      }, -10))
    .call(descr("classical logarithmic as above, but for a much smaller range"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, with 10 (smaller) subticks, emphasis on the even (for modulo >= 10) and fifth, and longer start/end ticks, inverted"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2).tickSubdivide(example_subdiv_A(pow_x_2))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2_v2).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, with 10 (smaller) subticks, etc., for larger range"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2_v2).tickSubdivide(example_subdiv_A(pow_x_2_v2))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2_v3).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, with 10 (smaller) subticks, etc., for smaller range"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_2_v3).tickSubdivide(example_subdiv_A(pow_x_2_v3))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square power, adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_4).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(4), with 10 (smaller) subticks, emphasis on the even (for modulo >= 10) and fifth, and longer start/end ticks, inverted"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_4).tickSubdivide(example_subdiv_A(pow_x_4))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(4), adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_f5).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(1/5), with 10 (smaller) subticks, emphasis on the even (for modulo >= 10) and fifth, and longer start/end ticks, inverted"));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_f5).tickSubdivide(example_subdiv_A(pow_x_f5))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(1/5), adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_m3).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(-3), with 10 (smaller) subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(pow_x_m3).tickSubdivide(example_subdiv_A(pow_x_m3))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical power(-3), adaptive subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(sqrt_x).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square root, with 10 (smaller) subticks, etc."));

axis_y += hstep;
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(sqrt_x).tickSubdivide(example_subdiv_A(sqrt_x))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
    .call(descr("classical square root, adaptive subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(quantile_x).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical quantile, with 10 (smaller) subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(quantile_x).tickSubdivide(example_subdiv_A(quantile_x))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical quantile, adaptive subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(quantize_x).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical quantized, with 10 (smaller) subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(quantize_x).tickSubdivide(example_subdiv_A(quantize_x))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical quantized, adaptive subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(threshold_x).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical threshold, with 10 (smaller) subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(threshold_x).tickSubdivide(example_subdiv_A(threshold_x))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical threshold, adaptive subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(identity_x).tickSubdivide(9)
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical identity, with 10 (smaller) subticks, etc."));

axis_y += hstep;
b0rk_prevention(svg, function() {
svg.append("g")
    .attr("class", "x minor endticks classical")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(identity_x).tickSubdivide(example_subdiv_A(identity_x))
      .tickSize(10, function(d, i) {
        return (2 * d.subindex == d.modulus ? 7 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 4 :
                  (d.modulus > 10 ? 2 : 4)));
      }, -10))
}).call(descr("classical identity, adaptive subticks, etc."));

</script>
  </body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

Modified http://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js to a secure url

https://d3js.org/d3.v2.js

https://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js