D3 (v4) Flexible and Responsive Box and Whisker Chart

box_and_whiskers.json

{
  "dataset_a": [
    {"data":"a", "min": 1, "Q1": 1.5, "Q2": 2, "Q3": 4, "max":6},
    {"data":"b", "min": 2, "Q1": 2.2, "Q2": 2.7, "Q3": 3, "max":4},
    {"data":"c", "min": 5, "Q1": 5.5, "Q2": 7, "Q3": 7.3, "max":8},
    {"data":"d", "min": 6, "Q1": 6.5, "Q2": 7, "Q3": 8, "max":10}
  ],
  "dataset_b": [
    {"data":"a", "min": 5, "Q1": 5.5, "Q2": 7, "Q3": 7.3, "max":8},
    {"data":"b", "min": 6, "Q1": 6.5, "Q2": 7, "Q3": 8, "max":10}
  ],
  "dataset_c": [
    {"data":"a", "min": 6, "Q1": 6.5, "Q2": 7, "Q3": 8, "max":10},
    {"data":"b", "min": 2, "Q1": 2.2, "Q2": 2.7, "Q3": 3, "max":4},
    {"data":"c", "min": 5, "Q1": 5.5, "Q2": 7, "Q3": 7.3, "max":8},
    {"data":"d", "min": 3, "Q1": 3.2, "Q2": 4, "Q3": 6, "max":7},
    {"data":"e", "min": 1, "Q1": 1.5, "Q2": 2, "Q3": 4, "max":6},
    {"data":"f", "min": 0.2, "Q1": 1, "Q2": 3, "Q3": 4, "max":4.5}
  ]
}

charts_configuration.js

var charts_config = ajax_json("charts_configuration.json")
var box_and_whiskers_data = ajax_json("box_and_whiskers.json")
make_box_and_whiskers_chart(box_and_whiskers_data)

charts_configuration.json

{
  "files": {
    "box_and_whiskers": "box_and_whiskers.json"
  },
  "document_state": {
    "box_and_whiskers": "none"
  },
  "chart_ids": {
    "box_and_whiskers": "box_and_whiskers_chart"
  },
  "svg": {
    "width": "80%",
    "height": "80%"
  },
  "plot_attributes": {
    "title": {
      "family": "Helvetica",
      "size": 20
    },
    "tooltip": {
      "curve": 5,
      "point": 10,
      "fill": "rgb(51, 51, 51)",
      "stoke": "rgb(51, 51, 51)",
      "opacity": 0.8,
      "text": "cyan",
      "emphasis": "white",
      "family": "Times",
      "size": 12,
      "default_seperation_from_object": 2
    },
    "axes": {
      "family": "Courier New",
      "size": 10,
      "ticks": {
        "size": 5
      },
      "maxCharacters": {
        "x": 10
      },
      "labels": {
        "family": "Courier New",
        "size": 14
      }
    },
    "buttons": {
      "family": "Courier New",
      "size": 12,
      "stroke": "black",
      "fill": {
        "not_selected": "white",
        "selected": "black"
      }
    }
  },
  "plots": {
    "scatter": {
      "point": {
        "radius": 5
      },
      "opacity": {
        "hover": 0.5,
        "nonhover": 0.8
      }
    },
    "line": {
      "width": 5,
      "stroke": "#2196F3",
      "fill": "none",
      "hidden_radius": 10,
      "opacity": {
        "hover": 0.5,
        "nonhover": 0.8
      }
    },
    "box_and_whiskers": {
      "spacing": 2,
      "width": 1,
      "stroke": "black",
      "whiskers": {
        "width": 2
      },
      "opacity": {
        "hover": 0.5,
        "nonhover":1
      }
    }
  },
  "colors": {
    "palette": [
        "#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3",
        "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39",
        "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E",
        "#607D8B"
    ]
  }
}

helpers.js

/**************************************************************************
*                                                                         *
*                          HELPER FUNCTIONS                               *
*                                                                         *
**************************************************************************/
// load a json file
function ajax_json(file, sync=true) {
  var data = $.ajax({
    url: file,
    async: !sync,
    dataType: 'json',
    success: function (data) {
      return data
    },
    error: function() {
      console.log("File " + file + " failed to load.")
    }
  });
  return data.responseJSON
}

function keys(data) {
  return Object.keys(data)
}


function parseNumber(number) {
  var number_string = number.toString()
  if (number_string.includes("%")) {
    number_string = number_string.slice(0, number_string.length - 1)
    if (number_string.length == 3) {
      return 1.0
    } else {
      return parseFloat("." + number_string)
    }
  } else if (number_string.includes(".")) {
      return parseFloat(number_string)
  } else {
    return parseInt(number_string)
  }
}

function typeofNumber(number) {
  number = number.toString()
  if (number.includes("%")) {
    return "percent"
  } else if (number.includes(".")) {
    return "float"
  } else if (number.includes("e") || number.includes("+")) {
    return "scientific"
  } else {
    return "integer"
  }
}

index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
  <script src="helpers.js" defer></script>
  <script src="make_axes.js" defer></script>
  <script src="make_box_and_whiskers_chart.js" defer></script>
  <script src="make_buttons.js" defer></script>
  <script src="make_margins.js" defer></script>
  <script src="make_svg.js" defer></script>
  <script src="make_title.js" defer></script>
  <script src="make_tooltip.js" defer></script>
  <script src="charts_configuration.js" defer></script>
</head>

<style>
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

section {
  margin:auto;
  width:100%;
  height:100%;
}

</style>
<body onresize="make_box_and_whiskers_chart(box_and_whiskers_data)">
  <section id="box_and_whiskers_chart" class="d3_chart">

  </section>
</body>

make_axes.js

//-------------------------------------------------------------------//
//                                                                   //
//                            MAKE AXES                              //
//                                                                   //
//-------------------------------------------------------------------//
function calculate_space_needed_by_axes(chart_group, data_extent, margins) {
  // Temporary SVG group element to calculate size of dummy axes then be removed
  var temp = chart_group.append("g").attr("class", "temp")

  // Dummy scales. Use max and min to get accurate measurement for length of ticks
  var x_scale = d3.scaleLinear().domain([data_extent.min.x, data_extent.max.x]).range([0, 1])
  var y_scale = d3.scaleLinear().domain([data_extent.min.y, data_extent.max.y]).range([0, 1])

  // Make the axes
  var x_axis_scaled = d3.axisBottom().scale(x_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var y_axis_scaled = d3.axisLeft().scale(y_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)

  // Place and maintain the axis as an SVG object
  var x_axis= temp.append("g").attr("class", "temp").call(x_axis_scaled).attr("font-size", charts_config.plot_attributes.axes.size).attr("font-family", charts_config.plot_attributes.axes.family)
  var y_axis= temp.append("g").attr("class", "temp").call(y_axis_scaled).attr("font-size", charts_config.plot_attributes.axes.size).attr("font-family", charts_config.plot_attributes.axes.family)

  // Add the axes labels. y-axis is rotated
  var x_axis_label = temp.append("text").text("temp").attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size)
  var y_axis_label = temp.append("text").text("temp").attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "rotate(-90)")

  // Retrieve the rectangle encapsulating the text labels and the axes
  var x_axis_label_box = x_axis_label.node().getBBox()
  var y_axis_label_box = y_axis_label.node().getBBox()
  var x_axis_box = x_axis.node().getBBox()
  var y_axis_box = y_axis.node().getBBox()


  // Calculate the total space consumed by these items
  var x_axis_space_consumed = x_axis_label_box.height + x_axis_box.height + margins.axes.label_space
  var y_axis_space_consumed = y_axis_label_box.height + y_axis_box.width + margins.axes.label_space

  // Remove these SVG elements
  temp.remove()
  return {"x": x_axis_space_consumed, "y": y_axis_space_consumed}
}

function make_axes(chart_group, x_scale, y_scale, canvas, margins, maximum_drawing_space, x_label, y_label, custom_ticks=false) {
  var axes, x_axis_label, y_axis_label, x_axis, y_axis
  // If first call make all groups needed
  if (chart_group.select("g.axes").empty()) {
    axes = chart_group.append("g").attr("class", "axes")
    x_axis_label = axes.append("text").attr("class", "x_axis_label")
    y_axis_label = axes.append("text").attr("class", "y_axis_label")
    x_axis= axes.append("g").attr("class", "x_axis")
    y_axis= axes.append("g").attr("class", "y_axis")
  }

  axes = chart_group.select("g.axes")
  var x_axis_scaled = d3.axisBottom().scale(x_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var y_axis_scaled = d3.axisLeft().scale(y_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var center = {"x": margins.x.left + margins.axes.y + maximum_drawing_space.x / 2,"y": margins.y.top +  margins.buttons + margins.title + maximum_drawing_space.y / 2}

  if (custom_ticks!=false) {
    x_axis_scaled.tickFormat(function (d, i) {return custom_ticks[i]}).ticks(custom_ticks.length)
  }



  x_axis_label = axes.select("text.x_axis_label").text(x_label).attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "translate(" + center.x + "," + (canvas.y - margins.y.bottom)+")").attr("text-anchor", "middle")
  y_axis_label = axes.select("text.y_axis_label").text(y_label).attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "translate(" + margins.x.left + "," + center.y + ") rotate(-90)").attr("text-anchor", "middle")

  var x_axis_label_box = x_axis_label.node().getBBox()
  var y_axis_label_box = y_axis_label.node().getBBox()

  var x_axis_y = margins.axes.x + margins.y.bottom
  var y_axis_x = margins.axes.y + margins.x.left
  x_axis= axes.select("g.x_axis").transition().duration(500).call(x_axis_scaled)
                 .attr("transform", "translate(" + (margins.x.left + margins.axes.y) + "," + (canvas.y - x_axis_y)+")")
                 .attr("font-size", charts_config.plot_attributes.axes.size)
                 .attr("font-family", charts_config.plot_attributes.axes.family)



  y_axis= axes.select("g.y_axis").transition().duration(500).call(y_axis_scaled)
                 .attr("font-size", charts_config.plot_attributes.axes.size)
                 .attr("font-family", charts_config.plot_attributes.axes.family)
                 .attr("transform", "translate(" + y_axis_x + "," + (center.y - maximum_drawing_space.y / 2)+")")

}

make_box_and_whiskers_chart.js

function make_box_and_whiskers_chart(data) {
  var svg, chart_group, data_extent, canvas, margins, max_draw_space, doc_state
  var plot = "box_and_whiskers_chart"
  var button_keys = keys(data)
  var quantile_keys = ["min", "Q1", "Q2", "Q3", "max"]

  svg = make_chart_svg(plot)
  if (svg.select("g." + plot + "_group").empty()) {
    chart_group = svg.append("g").attr("class", plot + "_group")
    charts_config.document_state.box_and_whiskers = button_keys[0]
  } else {
    chart_group = svg.select("g." + plot + "_group")
  }
  chart_group.data(data)


  doc_state = charts_config.document_state.box_and_whiskers
  data = data[doc_state]
  data_extent = {
    "max": {
      "x": data.length + 1,
      "y": d3.max(data, function(d) {return d.max})
    },
    "min": {
      "x": 0,
      "y": d3.min(data, function(d) {return d.min})
    }
  }

  canvas = extract_canvas_from_svg(svg)
  margins = make_margins(chart_group, canvas, data_extent, true)
  max_draw_space = calculate_maximum_drawing_space(canvas, margins)
  make_buttons(chart_group, margins, canvas, max_draw_space, button_keys)
  color_buttons(chart_group, doc_state)
  make_title(chart_group, ["Box and Whiskers Chart"], margins, canvas, max_draw_space)
  var x_scale = d3.scaleLinear().domain([data_extent.min.x, data_extent.max.x]).range([0, max_draw_space.x])
  var y_scale = d3.scaleLinear().domain([data_extent.max.y, data_extent.min.y]).range([0, max_draw_space.y])

  var x_axis_label = "Boxes"
  var y_axis_label = "Values"
  // use a scale band for the axes
  var custom_ticks = [""]
  data.map(function(d) { custom_ticks.push(d.data)})
  custom_ticks.push("")
  make_axes(chart_group, x_scale, y_scale, canvas, margins, max_draw_space, x_axis_label, y_axis_label, custom_ticks)

  // box parameters
  box = {}
  box.spacing = 2
  box.width = max_draw_space.x / (data.length + 1) - box.spacing

  var previous_boxes = chart_group.selectAll("g." + plot + "_box_group").size()
  var current_boxes = data.length

  var box_group = chart_group.selectAll("g." + plot + "_box_group").data(data)
  var whiskers = box_group.selectAll("g.whiskers")

  if (previous_boxes < current_boxes) {
    var box_group = box_group.enter().append("g").attr("class", plot + "_box_group")
    box_group.selectAll("rect").data(function(d) {return [d,d,d,d]}).enter().append("rect")
             .attr("class", function(d,i) {
               if (i == 0 || i == 3) {
                 return plot + "_hidden_whisker_box_rect"
               } else {
                 return plot + "_quantile_box_rect"
               }})

    var whiskers = box_group.append("g").attr("class", "whiskers")
    whiskers.append("g").attr("class", "lower_whisker").append("path").attr("class", "whisker")
    whiskers.append("g").attr("class", "upper_whisker").append("path").attr("class", "whisker")
  } else if (previous_boxes > current_boxes) {
    box_group.exit().transition().delay(function(d, i) {return 100 + i * 10})
    .attr("transform","translate(0,0)").remove()
  } else {
    var box_group = chart_group.selectAll("g." + plot + "_box_group")
  }

  box_group = chart_group.selectAll("g." + plot + "_box_group")
  whiskers = box_group.selectAll("g.whiskers")
  box_group.each(function(dat, ind) {
    var current_quantile_group = d3.select(this)
    var quantile_data = {"min": dat.min, "Q1": dat.Q1,  "Q2": dat.Q2,  "Q3": dat.Q3,"max": dat.max}
    var low_box, high_box
     current_quantile_group.selectAll('rect').each(

       function(d, i){
         var current_rect = d3.select(this)
         var class_name = current_rect.node().className.baseVal

         var x_shift = box_x_shift(x_scale, ind, margins, box)
         var y_shift = box_y_shift(y_scale, quantile_data, i, margins, box)

         if (class_name.includes("_quantile_box")) {
           current_rect.attr("fill", charts_config.colors.palette[ind])
           .attr("stroke", charts_config.plots.box_and_whiskers.stroke)
           .style("opacity", 1).transition().delay(function(d, i) {return 100 + ind * 10})
           .attr("height", box_height(y_scale, quantile_data, i))
           .attr("width", box.width)
           .attr("transform", "translate("+x_shift+","+y_shift+")")
         } else {
           current_rect.attr("fill", "white").style("opacity",0)
           .transition().delay(function(d, i) {return 100 + ind * 10})
           .attr("height", box_height(y_scale, quantile_data, i))
           .attr("width", box.width)
           .attr("transform", "translate("+x_shift+","+y_shift+")")
           if (i == 0) {
             low_box = {"x":x_shift,"y":y_shift,"h":box_height(y_scale, quantile_data, i),"w":box.width}
             lower_whisker = make_whisker_path(low_box, false)
             current_quantile_group.select("g.lower_whisker").select("path.whisker").transition().delay(function(d, i) {return 100 + ind * 10}).attr("d", lower_whisker).attr("fill", "none")
             .attr("stroke", charts_config.colors.palette[ind])
             .attr("stroke-width", charts_config.plots.box_and_whiskers.whiskers.width)
           } else if (i == 3) {
             high_box = {"x":x_shift,"y":y_shift,"h":box_height(y_scale, quantile_data, i),"w":box.width}
             upper_whisker = make_whisker_path(high_box, true)
             current_quantile_group.select("g.upper_whisker").select("path.whisker").transition().delay(function(d, i) {return 100 + ind * 10}).attr("d", upper_whisker).attr("fill", "none")
             .attr("stroke", charts_config.colors.palette[ind])
             .attr("stroke-width", charts_config.plots.box_and_whiskers.whiskers.width)
           }
         }
       }
     )
  })

  box_group.selectAll("rect").on("mouseover", mouseoverFunction)
  box_group.selectAll("rect").on("mouseout", mouseoutFunction)
  function mouseoverFunction(d, i) {
    var i = d3.select(this).node().className.baseVal[d3.select(this).node().className.baseVal.length - 1]
    d3.select(this).style("opacity", function () {if (i != 0 && i != 3) {return charts_config.plots.box_and_whiskers.opacity.hover} else {return 0}})
    var quantile_data = {"min": d.min, "Q1": d.Q1,  "Q2": d.Q2,  "Q3": d.Q3,"max": d.max}
    var box = d3.select(this).node().getBBox()
    y = box.y + box.height / 2
    x = x_scale(data.indexOf(d)) + margins.x.left + margins.axes.y + box.width / 2

    var tooltip_text = [
      "Data: " + d.data,
      "Max: " + quantile_data.max,
      "Q3: " + quantile_data.Q3,
      "Q2: " + quantile_data.Q2,
      "Q1: " + quantile_data.Q1,
      "Min: " + quantile_data.min
    ]

    // makeTooltip(d3.select(this.parentNode), tooltipText, chartGroup, canvas, margins)
    make_tooltip(d3.select(this), tooltip_text, chart_group, canvas, margins)
    // makeTooltip(x, y, tooltipText, chartGroup, canvas, margins)
  }
  function mouseoutFunction(d, i) {
      chart_group.select("g.tooltip_group").remove()
      var i = d3.select(this).node().className.baseVal[d3.select(this).node().className.baseVal.length - 1]
      // d3.select(this).style("opacity", charts_config.plots.box.opacity.nonhover)
      d3.select(this).style("opacity", function () {if (i != 0 && i != 3) {return charts_config.plots.box_and_whiskers.opacity.nonhover} else {return 0}})
  }

  chart_group.select("g.axes").raise()


}

function box_height(y_scale, extracted_data, i) {
  var data_keys = keys(extracted_data)
  return y_scale(extracted_data[data_keys[i]]) - y_scale(extracted_data[data_keys[i+1]])
}

function box_x_shift(x_scale, i, margins, box) {
  var x_shift = x_scale(i) + margins.x.left + margins.axes.y + box.width / 2 + box.spacing
  return x_shift
}

function box_y_shift(y_scale, extracted_data, i, margins, box) {
  var data_keys = keys(extracted_data)
  var sum = 0
  for (var j = 3; j > i; j--) {
    sum += y_scale(extracted_data[data_keys[j]]) - y_scale(extracted_data[data_keys[j+1]])
  }
  var y_shift = margins.y.top + margins.title + margins.buttons + sum + y_scale(extracted_data[data_keys[4]])
  return y_shift
}

function make_whisker_path(box, which) {
  var x, y, w, h
  x = box.x
  y = box.y
  h = box.h
  w = box.w
 var p
 if (which) { // make upper whisker
   p = "M " + (x + w /2) + " " + (y + h) + " "
   p += "L " + (x + w /2) + " " + (y) + " "
   p += "L " + (x) + " " + (y) + " "
   p += "L " + (x + w) + " " + (y) + " "
 } else { // make lower whisker
   p = "M " + (x + w /2) + " " + (y) + " "
   p += "L " + (x + w /2) + " " + (y + h) + " "
   p += "L " + (x) + " " + (y + h) + " "
   p += "L " + (x + w) + " " + (y + h) + " "
 }
 return p
}

make_buttons.js

//-------------------------------------------------------------------//
//                                                                   //
//                         MAKE SVG BUTTONS                          //
//                                                                   //
//-------------------------------------------------------------------//
// Makes radio buttons for changing chart
function make_buttons(chart_group, margins, canvas, maximum_drawing_space, button_array) {
    var radius = charts_config.plot_attributes.buttons.size / 2 // radius is half button font size
    var x = margins.axes.y + margins.x.left + radius // starting x locations
    var y = radius + margins.y.top

    var button_group
    if (chart_group.selectAll("g.buttons_group").empty()) {
      chart_group.append("g") // group for all buttons
                .attr("class", "buttons_group")
                .selectAll("g.buttons_group")
                .data(button_array)
                .enter()
                .append("g") // group for each button (circle and text)
                .attr("class", "button_group")

      var button_group = chart_group.selectAll("g.button_group")
      // add the circles
      button_group.append("circle")
                 .attr("r", radius)
                 .attr("class", "button_circle")
                 .attr("class", function(d, i) {return "button_circle_number" + i})
                 .on("click", button_click)
      // add the text
      button_group.append("text")
                 .attr("class", "button_text")
                 .text(function(d) {return d})
                 .attr("class", function(d, i) {return "button_text_number" + i})
                 .on("click", button_click)
    }
    button_group = chart_group.selectAll("g.button_group")
    // position the circles and text
    button_group.each(function(d, i) {
      var current_group = d3.select(this)
      var current_circle = current_group.select("circle")
      var current_text = current_group.select("text")
      if (i == 0) {
        current_circle.attr("cx", x)
                     .attr("cy", y)
                     .attr("fill", charts_config.plot_attributes.buttons.fill.not_selected)
                     .attr("stroke", charts_config.plot_attributes.buttons.stroke)

        current_text.attr("x", x + radius * 2)
                   .attr("y", y + radius / 2)
                   .text(function(d, i) {return d})
                   .attr("font-family", charts_config.plot_attributes.buttons.family)
                   .attr("font-size", charts_config.plot_attributes.buttons.size)
        margins.buttons = current_text.node().getBBox().y + current_text.node().getBBox().height + radius
      } else {
        var previous_text = button_group.select(".button_text_number" + (i-1))
        var previous_circle = button_group.select(".button_circle_number" + (i-1))
        var previous_text_box = previous_text.node().getBBox()
        var previous_circle_box = previous_circle.node().getBBox()

        var cx = previous_text_box.x + previous_text_box.width + radius * 2
        var cy = previous_circle_box.y + radius
        current_circle.attr("cx", cx)
                     .attr("cy", cy)
                     .attr("fill", charts_config.plot_attributes.buttons.fill["not_selected"])
                     .attr("stroke", charts_config.plot_attributes.buttons.stroke)
        current_text.attr("x", cx + radius * 2)
                   .attr("y", cy + radius / 2)
                   .text(function(d, i) {return d})
                   .attr("font-family", charts_config.plot_attributes.buttons.family)
                   .attr("font-size", charts_config.plot_attributes.buttons.size)

        var far_right_point = current_text.node().getBBox().x + current_text.node().getBBox().width
        var farthest_point_to_draw = canvas.x - margins.x.right

        if (far_right_point > farthest_point_to_draw) { //
           cx = x
           cy = previous_circle_box.y + radius * 4
           current_circle.attr("cx", cx)
                        .attr("cy", cy)
           current_text.attr("x", cx + radius * 2)
                      .attr("y", cy + radius / 2)
        }
        margins.buttons = current_text.node().getBBox().y + current_text.node().getBBox().height + radius
      }
    })
}

function button_click() {
  var current = d3.select(this).datum()
  charts_config.document_state.box_and_whiskers = current
  make_box_and_whiskers_chart(box_and_whiskers_data)
}


function color_buttons(chart_group, state) {
  chart_group.select("g.buttons_group").selectAll("circle").attr("fill", function (d, i) {
    if (d == state) {
      return charts_config.plot_attributes.buttons.fill.selected
    }
    return charts_config.plot_attributes.buttons.fill.not_selected
  })
}

make_margins.js

function make_margins(chart_group, canvas, data_extent, buttons=true) {
  var margins = {
    "x": {
      "left": canvas.x * 0.04,
      "right": canvas.x * 0.04
    },
    "y": {
      "top": canvas.x * 0.04,
      "bottom": canvas.x * 0.04
    },
    "title": charts_config.plot_attributes.title.size * 2, // space consumed by title
    "buttons": charts_config.plot_attributes.buttons.size * 2, // space consumed by buttons
    "axes": {
      "x": charts_config.plot_attributes.axes.size * 4, // space consumed by x axes
      "y": charts_config.plot_attributes.axes.size * 4, // space consumed by y axes
      "label_space": 10 // space between axis label and axis, included in axes.x / axes.y respectively
    }
  }

  // Update axes margins based off space used by their rendered SVG elements
  axes_margins = calculate_space_needed_by_axes(chart_group, data_extent, margins)
  margins.axes.x = axes_margins.x
  margins.axes.y = axes_margins.y

  if (!buttons) {margins.buttons = 0}
  return margins
}

function calculate_maximum_drawing_space(canvas, margins) {
  var maximum_drawing_space = {
    "x": canvas.x - margins.x.left - margins.x.right - margins.axes.y,
    "y": canvas.y - margins.y.top - margins.y.bottom - margins.axes.x - margins.title - margins.buttons
  };
  return maximum_drawing_space
}

function extract_canvas_from_svg(svg) {
  var width = svg.attr("width")
  var height = svg.attr("height")
  var canvas = {
    "x": parseNumber(width),
    "y": parseNumber(height)
  }
  return canvas
}

make_svg.js

function make_chart_svg(plot) {
  var section = d3.select("#"+plot)

  var chart_width = parseNumber(charts_config.svg.width)
  var chart_height = parseNumber(charts_config.svg.height)

  var chart_width_string, chart_height_string
  if (typeofNumber(chart_width) == "float") {
    chart_width_string = (chart_width * section.node().clientWidth ) + "px"
  } else {
    chart_width_string = chart_width + "px"
  }

  if (typeofNumber(chart_height) == "float") {
    chart_height_string = (chart_height * section.node().clientHeight ) + "px"
  } else {
    chart_height_string = chart_height + "px"
  }

  var svg
  if (section.select("#" +  plot + "_svg").empty()) {
    svg = section.append("svg")
  } else {
    svg = section.select("#" +  plot + "_svg")
  }
  svg.attr("perserveAspectRatio", "xMinYMid meet")
         .classed("svg-content-responsive", true)
         .attr("id", plot + "_svg")
         .attr("width", chart_width_string)
         .attr("height", chart_height_string)
  return svg
}


function update_chart_svg(plot) {
  var section = document.getElementById(plot + "_chart")
  var svg = d3.select("svg#" + plot + "_svg")

  var chart_width = parseNumber(charts_config.svg.width)
  var chart_height = parseNumber(charts_config.svg.height)

  var chart_width_string, chart_height_string
  if (typeofNumber(chart_width) == "float") {
    chart_width_string = (chart_width * section.clientWidth ) + "px"
  } else {
    chart_width_string = chart_width + "px"
  }

  if (typeofNumber(chart_height) == "float") {
    chart_height_string = (chart_height * section.clientHeight ) + "px"
  } else {
    chart_height_string = chart_height + "px"
  }


  return svg
}

make_title.js

//-------------------------------------------------------------------//
//                                                                   //
//                            MAKE TITLE                             //
//                                                                   //
//-------------------------------------------------------------------//
function make_title(chart_group, text_array, margins, canvas, maximum_drawing_space) {
  // Does chart title already exist?
  if (!chart_group.select("g.chart_title").empty()) {
    // Yes. Clear Title
    chart_group.select("g.chart_title").remove()
    // Reset Margins
    margins.title = charts_config.plot_attributes.title.size * 2
  }

  // Construct full title
  var full_title = text_array.join(" ")

  // Store title lines
  var title_lines = []

  // Max line length
  var characters_per_line = (canvas.x - margins.x.right) / (charts_config.plot_attributes.title.size / 2)

  while (full_title.length > 0) {
    var slice_position = characters_per_line - 1

    var line_slice = full_title.slice(0, slice_position)

    var last_space = line_slice.lastIndexOf(" ")

    // space is first character, drop it
    if (line_slice[0] == " ") {
      full_title = full_title.slice(1, full_title.length)
      line_slice = full_title.slice(0, slice_position)
      last_space = line_slice.lastIndexOf(" ")
    }

    if (full_title[slice_position + 1] != " " & slice_position < full_title.length) {
      // the leading character of next splice is not a space (e.g. breaks a word)
      // and there is more in the title to come
      if (last_space == -1) { // no spaces in this line, we have broken a word
        line_slice = full_title.slice(0, slice_position - 1) + "-"
        slice_position -= 1
      } else { // there is a space, truncate to that space
        slice_position = last_space
        line_slice = full_title.slice(0, slice_position)
      }
      last_space = line_slice.lastIndexOf(" ")
    } else if (slice_position < full_title.length & last_space < line_slice.length) {
      // last word is split, so add a hypen
      line_slice = full_title.slice(0, slice_position - 1)
      slice_position -= 1
      last_space = line_slice.lastIndexOf(" ")

      // if the word is a two letter word, e.g. the last letter in the string is
      // the first letter of the two letter word, then that letter is droped for
      // a hypen before a space. That makes no sense, so drop the entire 2 letter word
      if (last_space == slice_position -  1) {
        // if space is last character drop it
        line_slice = full_title.slice(0, slice_position - 1)
        slice_position -= 1
      } else {
        line_slice += "-"
        slice_position -= 1
      }
      last_space = line_slice.lastIndexOf(" ")
    }

    if (last_space == slice_position) {
      // if space is last character drop it
      line_slice = full_title.slice(0, slice_position - 1)
      slice_position -= 1
    }

    title_lines.push(line_slice)
    full_title = full_title.slice(slice_position, full_title.length)
  }

  var chart_title = chart_group.append("g").attr("class", "chart_title")
  for (var i = 0; i < title_lines.length; i++) {
    chart_title.append("text")
    .attr("class", "chartTitle")
    .text(title_lines[i])
    .attr("text-anchor", "middle")
    .attr("font-size", charts_config.plot_attributes.title.size)
    .attr("font-family", charts_config.plot_attributes.title.family)
    .attr("x", margins.axes.y + margins.x.left + maximum_drawing_space.x / 2)
    .attr("y", margins.y.top + margins.buttons + (charts_config.plot_attributes.title.size * (i) + charts_config.plot_attributes.title.size / 2))
    margins.title = chart_title.node().getBBox().height + charts_config.plot_attributes.title.size
    maximum_drawing_space.y = canvas.y - margins.y.top - margins.y.bottom - margins.axes.x - margins.title - margins.buttons
  }
}

make_tooltip.js

//-------------------------------------------------------------------//
//                                                                   //
//                          MAKE TOOLTIP                             //
//                                                                   //
//-------------------------------------------------------------------//
function make_tooltip(obj, text_array, chart_group, canvas, margins) {
  // get the x and y coordinates of the object to apply tooltip too
  var x = obj.node().transform.baseVal.consolidate().matrix.e
  var y = obj.node().transform.baseVal.consolidate().matrix.f

  // for convenience
  var tooltip_config = charts_config.plot_attributes.tooltip
  var sep = tooltip_config.default_seperation_from_object

  // Add the tooltip to the chart and as a child - the text group
  var tooltip = chart_group.append("g").attr("class", "tooltip_group")
  var text_group = tooltip.append("g").attr("class", "tooltip_text_group")

  // Add text in reverse order placing low to high
  text_array.reverse()
  for (var i = 0; i < text_array.length; i++) {
    var text = text_group.append("text")
                        .text(text_array[i])
                        .attr("font-size", tooltip_config.size)
                        .attr("text-anchor", "middle")
                        .attr("x", x)
                        .attr("y", y - sep - tooltip_config.curve - (i * tooltip_config.size))
                        .attr("class", "tooltipText")
                        .attr("fill", tooltip_config.emphasis)
                        .attr("font-family", tooltip_config.family)
                        .attr("font-weight", "normal")

    // The first line in the tooltip gets different coloration
    if (i < text_array.length - 1) {
        text.attr("fill", tooltip_config.text)
            .attr("font-family", tooltip_config.family)
            .attr("font-weight", "normal")
    }
  }

  // Make the bubble around the text
  var bubble = tooltip.append("path")
                      .attr("d", make_tooltip_bubble(text_group))
                      .attr("fill", tooltip_config.fill)
                      .attr("stroke", tooltip_config.stroke)
                      .attr("opacity", tooltip_config.opacity)

  // Text goes in front of the box
  text_group.raise()

  // Get the bounding box of the bubble
  var bubble_box = bubble.node().getBBox()

  // Calculate the limits to contain the tooltip
  var limits = {
    "top": margins.y.top + margins.buttons + margins.title,
    "bottom": canvas.y - margins.axes.x - margins.y.bottom,
    "left": margins.x.left + margins.axes.y,
    "right": canvas.x - margins.x.right
  }

  // Get the boundaries of the object
  var object_boundaries = {
    "left": x,
    "right": x + obj.node().getBBox().width,
    "top": y,
    "bottom": y + obj.node().getBBox().height
  }

  // Calculate putative tooltip placements
  var tooltip_placements = {
    "upper_left": {"x": object_boundaries.left - bubble_box.width - sep, "y":object_boundaries.top - bubble_box.height - sep},
    "upper_right": {"x":object_boundaries.right + sep, "y": object_boundaries.top - bubble_box.height - sep},
    "lower_left": {"x":object_boundaries.left - bubble_box.width - sep, "y": object_boundaries.bottom + sep},
    "lower_right": {"x":object_boundaries.right + sep, "y":object_boundaries.bottom + sep}
  }

  // Figure out which placements fall within the limits
  var valid_placments = {
    "upper_left": {"x": tooltip_placements.upper_left.x > limits.left, "y":  tooltip_placements.upper_left.y > limits.top},
    "upper_right": {"x": tooltip_placements.upper_right.x + bubble_box.width < limits.right, "y": tooltip_placements.upper_right.y > limits.top},
    "lower_left": {"x": tooltip_placements.lower_left.x > limits.left, "y": tooltip_placements.lower_left.y + bubble_box.height < limits.bottom},
    "lower_right": {"x": tooltip_placements.lower_right.x + bubble_box.width < limits.right, "y": tooltip_placements.lower_right.y + bubble_box.height < limits.bottom}
  }

  var placements = keys(valid_placments)
  var tooltip_placement
  for (var i = 0; i < placements.length; i++) {
    var current_placement = valid_placments[placements[i]]
    if (current_placement.x && current_placement.y) {
      tooltip_placement = tooltip_placements[placements[i]]
      break
    }
  }

  // Reposition the tooltip to its correct location
  tooltip.attr("transform", "translate("+(tooltip_placement.x - bubble_box.x)+","+(tooltip_placement.y - bubble_box.y)+")")
}

function transform_values(selection) {
  return {
    "x": selection.node().transform.baseVal.consolidate().matrix.e,
    "y": selection.node().transform.baseVal.consolidate().matrix.f
  }
}

function make_tooltip_bubble(text_group) {
  var textBox = text_group.node().getBBox()
  var x = textBox.x
  var y = textBox.y
  var width = textBox.width
  var height = textBox.height

  var point = charts_config.plot_attributes.tooltip.point
  var curve = charts_config.plot_attributes.tooltip.curve

  // Start at bottom center and work around left - up - right - down - close
  d = "M " + (x + width / 2) + " " + (y + height + curve)
  // go left
  d += "l -" + (width / 2) + " 0 "
  // curve left and up
  d += "q -" + curve + " 0 -" + curve + " -" + curve + " "
  // go up
  d += "l 0 -" + (height) + " "
  // curve up and right
  d += "q 0 -" + curve + " " + curve + " -" + curve + " "
  // go right
  d += "l " + (width) + " 0 "
  // curve right and down
  d += "q " + curve + " 0 " + curve + " " + curve + " "
  // go down
  d += "l 0 " + (height) + " "
  //  curve down and left
  d += "q 0 " + curve + " -" + curve + " " + curve + " "
  // go left
  d += "l -" + (width / 2) + " 0 "
  // close
  d += " z"
  return d
}