Responsive Axes with ReactiveModel

This example shows one way to make responsive density-based linear axes using D3 4.0 and ReactiveModel. Combines Margin Convention II with ReactiveModel with Density-based Ticks. To experience the resize behavior, run this example full-screen and resize the browser.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Margin Convention II with ReactiveModel</title>
    <script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
    <script src="//datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js"></script>
    <style>

/* Make the chart container fill the page using CSS. */
      #chart-container {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    
      .axis text {
        font: 16pt sans-serif;
      }

.axis .label {
        font: 24pt sans-serif;
      }

.axis path {
        display: none;
      }
      .tick line {
        fill: none;
        stroke: #000;
        stroke-width: 1px;
        shape-rendering: crispEdges;
      }
      
    </style>
  </head>
  <body>

<div id="chart-container"></div>

("innerHeight", function (height, marginTop, marginBottom){
            return height - marginTop - marginBottom;
          }, "height, marginTop, marginBottom")

("g", function (svg){
            return svg.append("g");
          }, "svg")

(function (g, marginLeft, marginTop){
            g.attr("transform", "translate(" + marginLeft + "," + marginTop + ")");
          }, "g, marginLeft, marginTop");
      }
      
      // Adds a gray rectangle inside the margin.
      function GrayRectangle(my){

my("rect", function (g){
            return g.append("rect")
              .attr("fill", "lightgray")
              .attr("stroke", "gray");
          }, "g")

("yScale", function(yScaleDomain, yScaleRange){
            return scale
              .domain(yScaleDomain)
              .range(yScaleRange);
          }, "yScaleDomain, yScaleRange");
      }
      
      // Creates the X axis.
      function XAxis(my){
        
        var axis = d3.axisBottom();
        
        // Approximate number of pixels between ticks.
        my("xAxisTickSpacing", 70)
        
          ("xAxisG", function (g){
            return g.append("g")
              .attr("class", "x axis");
          }, "g")
        
          (function(xAxisG, innerHeight){
            xAxisG.attr("transform", "translate(0," + innerHeight + ")");
          }, "xAxisG, innerHeight")

("xAxisTicks", function (xAxisTickSpacing, innerWidth){
            return innerWidth / xAxisTickSpacing;
          }, "xAxisTickSpacing, innerWidth")

("xAxis", function(xAxisTicks, xScale){
            return axis
              .scale(xScale)
              .ticks(xAxisTicks);
          }, "xAxisTicks, xScale")

("yAxisTicks", function (yAxisTickSpacing, innerHeight){
            return innerHeight / yAxisTickSpacing;
          }, "yAxisTickSpacing, innerHeight")

("yAxis", function(yAxisTicks, yScale){
            return axis
              .scale(yScale)
              .ticks(yAxisTicks);
          }, "yAxisTicks, yScale")

https://d3js.org/d3.v4.0.0-alpha.49.min.js

https://datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js