diff --git a/README.md b/README.md
index bac8633..543170e 100755
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ If you download the zip of the repo, you'll find a folder for every template. Th
 |Area - stacked - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-stacked-area) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-stacked-area) | &cross; |
 |Bar | [View](https://onsvisual.github.io/Simple-charts/all-templates/simple-bar-horizontal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/simple-bar-horizontal) | &cross; |
 |Bar - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-bar-horizontal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-bar-horizontal) | &cross; |
+|Bar - small multiple with reference line | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-bar-with-reference-line) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-bar-with-reference-line) | &cross; |
 |Bar - grouped | [View](https://onsvisual.github.io/Simple-charts/all-templates/clustered-bar-horizontal/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/clustered-bar-horizontal) | &cross; |
 |Bar - grouped with confidence intervals - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals) | &cross; |
 |Bar - grouped with confidence intervals - small multiple - linear x-axis | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis) | &cross; |
@@ -36,6 +37,7 @@ If you download the zip of the repo, you'll find a folder for every template. Th
 |Column - stacked with negatives | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-bar-vertical-with-negatives/) | [</>](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-bar-vertical-with-negatives) | &cross; |
 |Column and line | [View](https://onsvisual.github.io/Simple-charts/all-templates/bar-and-line/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/bar-and-line) | &cross; |
 |Connected dot plot | [View](https://onsvisual.github.io/Simple-charts/all-templates/tie-fighter) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/tie-fighter) | &cross; |
+|Connected dot plot/range plot, small multiple| [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-range-plot) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/tie-fighter) | &cross; |
 |Connected dot plot - buttons | [View](https://onsvisual.github.io/Simple-charts/all-templates/tiefighter-with-buttons) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/tiefighter-with-buttons) | &cross; |
 |Dot plot with jiggle | [View](https://onsvisual.github.io/Simple-charts/all-templates/dot-plot-jiggle) |[`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/dot-plot-jiggle) | &cross; |
 |Heatmap | [View](https://onsvisual.github.io/Simple-charts/all-templates/heatmap) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/heatmap) | &cross; |
diff --git a/all-templates/small-multiple-bar-with-reference-lines/config.json b/all-templates/small-multiple-bar-with-reference-lines/config.json
new file mode 100644
index 0000000..0bcd7da
--- /dev/null
+++ b/all-templates/small-multiple-bar-with-reference-lines/config.json
@@ -0,0 +1,75 @@
+{
+  "essential": {
+    "screenreadertext": "Set of small bar charts",
+    "graphic_data_url": "data.csv",
+    "dateFormat": "%d/%m/%Y",
+
+    "colour_palette": {
+      "Exports": "#27A0CC",
+      "Imports": "#003C57"
+    },
+    "categorySort": [
+      "Total Services",
+      "Technical, trade-related and other business services",
+      "Professional and management consulting services",
+      "Explicitly charged and other financial services",
+      "Intellectual Property",
+      "Personal Travel"
+    ],
+    "sourceText": ["Office for National Statistics"],
+    "xAxisLabel": "£",
+    "yAxisLabel": "Regions and Countries",
+    "yAxisScale": "auto_min_max_total"
+  },
+  "optional": {
+    "margin": {
+      "groupMargin": {
+        "top": 0,
+        "right": 0,
+        "bottom": 0,
+        "left": 40
+      },
+      "sm": {
+        "top": 30,
+        "right": 23,
+        "bottom": 50,
+        "left": 20
+      },
+      "md": {
+        "top": 30,
+        "right": 23,
+        "bottom": 50,
+        "left": 20
+      },
+      "lg": {
+        "top": 30,
+        "right": 20,
+        "bottom": 50,
+        "left": 20
+      }
+    },
+    "chart_every":{
+      "sm": 1,
+      "md": 2,
+      "lg": 3
+    },
+    "aspectRatio": {
+      "sm": [16, 12],
+      "md": [16, 12],
+      "lg": [16, 12]
+    },
+    "legendHeight":{
+      "sm": 45,
+      "md": 30,
+      "lg": 30
+    },
+
+    "mobileBreakpoint": 400,
+    "middleBreakpoint": 600,
+    "x_ticks_num": {
+      "sm": 3,
+      "md": 3,
+      "lg": 3
+    }
+  }
+}
diff --git a/all-templates/small-multiple-bar-with-reference-lines/data.csv b/all-templates/small-multiple-bar-with-reference-lines/data.csv
new file mode 100644
index 0000000..8920b57
--- /dev/null
+++ b/all-templates/small-multiple-bar-with-reference-lines/data.csv
@@ -0,0 +1,31 @@
+ycategory,plot,value,valuehigh,series
+Q1,Total expenditure,48.2,54,Exports
+Q2,Total expenditure,57.8,62,Exports
+Q3,Total expenditure,64,68.6,Exports
+Q4,Total expenditure,71.5,74.8,Exports
+Q5,Total expenditure,77,86.6,Exports
+Q1,Food and drinks,48.2,54,Exports
+Q2,Food and drinks,57.8,62,Exports
+Q3,Food and drinks,64,68.6,Exports
+Q4,Food and drinks,71.5,74.8,Exports
+Q5,Food and drinks,77,86.6,Exports
+Q1,"Housing, fuel and power",70.2,71.5,Exports
+Q2,"Housing, fuel and power",76.4,78.9,Exports
+Q3,"Housing, fuel and power",82.4,85.1,Exports
+Q4,"Housing, fuel and power",87.5,82.5,Exports
+Q5,"Housing, fuel and power",98.4,105,Exports
+Q1,Transport,34.8,26.6,Exports
+Q2,Transport,55.4,40.4,Exports
+Q3,Transport,73.9,55.8,Exports
+Q4,Transport,102.2,81.1,Exports
+Q5,Transport,141.9,100.5,Exports
+Q1,Recreation and culture,36.1,24.1,Exports
+Q2,Recreation and culture,49.5,32.4,Exports
+Q3,Recreation and culture,66.6,45.9,Exports
+Q4,Recreation and culture,89.1,55.5,Exports
+Q5,Recreation and culture,132.7,69.8,Exports
+Q1,Restaurants and hotels,23.2,8.4,Exports
+Q2,Restaurants and hotels,31.6,10.5,Exports
+Q3,Restaurants and hotels,46.6,15.7,Exports
+Q4,Restaurants and hotels,69,23.8,Exports
+Q5,Restaurants and hotels,93.9,33.1,Exports
diff --git a/all-templates/small-multiple-bar-with-reference-lines/datadownload.xlsx b/all-templates/small-multiple-bar-with-reference-lines/datadownload.xlsx
new file mode 100644
index 0000000..0dc7c0e
Binary files /dev/null and b/all-templates/small-multiple-bar-with-reference-lines/datadownload.xlsx differ
diff --git a/all-templates/small-multiple-bar-with-reference-lines/fallback.png b/all-templates/small-multiple-bar-with-reference-lines/fallback.png
new file mode 100644
index 0000000..979b03e
Binary files /dev/null and b/all-templates/small-multiple-bar-with-reference-lines/fallback.png differ
diff --git a/all-templates/small-multiple-bar-with-reference-lines/index.html b/all-templates/small-multiple-bar-with-reference-lines/index.html
new file mode 100644
index 0000000..f879498
--- /dev/null
+++ b/all-templates/small-multiple-bar-with-reference-lines/index.html
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+  <title>dvc1070 - The USA contributed the largest proportion of imports and exports across the top 5 service types except for intellectual property imports</title>
+
+  <meta name="description" content="">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+     
+
+  <link rel="stylesheet" href="../lib/globalStyle.css" type="text/css"/>
+  <style type="text/css">
+    body {
+      color: #323132;
+      /* max-width:944px; */
+    }
+
+    body {
+      font-family: 'Open Sans', sans-serif;
+      font-weight: 400;
+      max-width: 700px;
+    }
+
+    .x.axis path {
+      display: none;
+    }
+
+    path {
+      fill: none;
+    }
+
+    text {
+      font-family: 'Open Sans'
+    }
+
+    text.x,
+    text.y {
+      font-size: 12px;
+      fill: #666;
+    }
+
+    line.y,
+    line.x {
+      stroke: #ccc;
+      stroke-width: 1px;
+      shape-rendering: crispEdges;
+    }
+
+
+    h4 {
+      font-size: 16px;
+      line-height: 24px;
+      margin: 16px 0 16px 0;
+      padding: 24px 0 0 0;
+      font-weight: 600;
+    }
+
+    h5 {
+      font-size: 14px;
+      margin: 0 0 16px 0;
+      font-weight: normal;
+      padding-top: 0;
+    }
+
+    h5,h6 {
+      font-size: 16px;
+      margin: 16px 0 8px 0;
+      font-weight: 700;
+      color: #323132;
+    }
+
+    ul, ol {
+      margin: 16px 0;
+      padding-left: 32px;
+    }
+
+    li {
+        margin: 0 0 8px 0;
+        line-height: 32px;
+        font-weight: 400;
+        font-size: 18px;
+        padding: 0;
+    }
+
+    @media (max-width:767px){
+        li{
+          font-size:16px;
+        }
+    }
+
+    .btn {
+        font-family: "Open Sans",Helvetica,Arial,sans-serif;
+        display: inline-block;
+        width: auto;
+        cursor: pointer;
+        padding: 6px 16px 10px 16px;
+        border: 0 none;
+        text-align: center;
+        -webkit-appearance: none;
+        transition: background-color 0.25s ease-out;
+    }
+
+    .btn--primary:focus {
+    background-color: #0b5d30;
+    }
+
+    .btn--primary {
+    background-color: #0F8243;
+    color: #fff;
+    }
+
+    .visuallyhidden {
+      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+      clip: rect(0,0,0,0);  border: 0;
+    }
+
+  </style>
+
+</head>
+
+<body>
+  <h5 id="screenreaderinfo" class="visuallyhidden">Screenreader info</h5>
+
+  <div id="graphic" aria-hidden="true" style="position:relative;">
+    <img src="fallback.png" alt="[Chart]" />
+  </div>
+
+  <h6 id="source"></h6>
+
+  <script src="https://cdn.ons.gov.uk/vendor/d3/4.13.0/d3.min.js" type="text/javascript"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.js" type="text/javascript"></script> -->
+  <script src="../lib/modernizr.svg.min.js" type="text/javascript"></script>
+  <script src="https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.min.js" type="text/javascript"></script>
+  <script>
+    var graphic = d3.select('#graphic');
+    var pymChild = null;
+
+    function drawGraphic() {
+
+      d3.select("#screenreaderinfo")
+        .text(dvc.essential.screenreadertext)
+
+      maxweek=d3.max(graphic_data,function(d){return d.ycategory})
+
+      var threshold_md = dvc.optional.middleBreakpoint;
+      var threshold_sm = dvc.optional.mobileBreakpoint;
+
+      if (parseInt(graphic.style("width")) < threshold_sm) {
+        size = "sm";
+      } else if (parseInt(graphic.style("width")) < threshold_md) {
+        size = "md";
+      } else {
+        size = "lg";
+      }
+
+      categorySort = {}
+      if(Array.isArray(dvc.essential.categorySort)){
+        for (i = 0; i < dvc.essential.categorySort.length; i++) {
+          categorySort[dvc.essential.categorySort[i]] = i;
+        }
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+      } else if(dvc.essential.categorySort=="descending"){
+        // TODO: NOT SURE THIS WILL WORK
+
+        //auto sort the array by biggest value
+        graphic_data.filter(function(d){
+          return d.ycategory==maxweek
+        }).sort(function(a,b){return +b.value - (+a.value)}).forEach(function(item, i){
+          categorySort[item.plot]=i
+        });
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+      } else if (dvc.essential.categorySort=="ascending"){
+        graphic_data.filter(function(d){
+          return d.ycategory==maxweek
+        }).sort(function(a,b){return +a.value - (+b.value)}).forEach(function(item, i){
+          categorySort[item.plot]=i
+        });
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+
+      }
+
+      var margin = dvc.optional.margin[size]
+      var chart_width = (parseInt(graphic.style("width")) - dvc.optional.margin.groupMargin.left) / dvc.optional.chart_every[size] - margin.left - margin.right - 10;
+      var height = Math.ceil((chart_width * dvc.optional.aspectRatio[size][1]) / dvc.optional.aspectRatio[size][0]);
+
+      // clear out existing graphics
+      graphic.selectAll("*").remove();
+      d3.select("#graphic2").selectAll("*").remove();
+
+
+      var x = d3.scaleLinear()
+        .range([0, chart_width]);
+
+      var y = d3.scaleBand()
+        .rangeRound([0, height])
+        .paddingInner(0.3);
+
+      ycategories=d3.map(graphic_data,function(d){return d.ycategory}).keys()
+      y.domain(ycategories)
+
+      x.domain([0,140])
+
+
+      var xAxis = d3.axisBottom(x)
+        .tickSize(-height-10)
+        .ticks(dvc.optional.x_ticks_num[size])
+        .tickPadding(6)
+
+        
+
+      nested = d3.nest()
+        .key(function(d) {
+          return d.series
+        })
+        .key(function(d) {
+          return d.plot
+        })
+        .sortValues(function(a,b) { return a.ycategory - b.ycategory; } )
+        .entries(graphic_data);
+
+
+      chartSeries = d3.select('#graphic')
+        .selectAll('div')
+        .data(nested)
+        .enter()
+        .append("div")
+        .classed("chart-series", true)
+
+
+        //group headers
+
+      // chartHeaders = chartSeries.append("h1")
+      //   .style("font-size", "18px")
+      //   .style("font-weight", 700)
+      //   .style("margin-left", margin.left)
+      //   .style("margin-bottom", "15px")
+      //   .style("color", function(d, i) { console.log(d); return dvc.essential.colour_palette[d.key] })
+      //   .text(function(d) {return d.key})
+
+      chartContainers = chartSeries.selectAll("div")
+        .data(function(d) {console.log(d.values); return d.values})
+        .enter()
+        .append('div')
+        .classed("chart-container", true)
+
+        .style("float", "left");
+
+      chartContainers.append("p")
+        .text(function(d) {
+          return d.key
+        })
+        .style('font-weight', 600)
+        .style('font-size', "14px")
+        .style("margin-left", function(d,i) { return margin.left + calculateExtraMargin(i) + "px" })
+        .style("position", "absolute")
+        .style("max-width", chart_width + margin.right + "px");
+        // .style("float", "left");
+
+      charts = chartContainers.append("svg")
+        .attr("width", function(d,i) {
+          return chart_width + margin.left + margin.right + calculateExtraMargin(i);
+        })
+        .attr("height", height + margin.top + margin.bottom)
+        // .style("position", "relative");
+
+      function calculateExtraMargin(i) {
+        var extra_margin = 0;
+        if (i % dvc.optional.chart_every[size] == 0) {
+          extra_margin = dvc.optional.margin.groupMargin.left
+        };
+        return extra_margin
+      };
+
+      svg = charts
+        .append("g")
+        .attr("transform", function(d,i) {
+          // return "translate(" + (margin.left + dvc.optional.margin.groupMargin.left) + "," + margin.top + ")"
+          return "translate(" + (margin.left + calculateExtraMargin(i)) + "," + margin.top + ")"
+        });
+
+      svg
+        .append('g')
+        .attr('class', 'x axis')
+        .attr("transform", "translate(0," + (height+5) + ")")
+        .call(xAxis)
+        .each(function(d, i) {
+          if (i % dvc.optional.chart_every[size] == dvc.optional.chart_every[size] - 1||i==nested[0].values.length-1) {
+            d3.select(this).append("text")
+              .text(dvc.essential.xAxisLabel)
+              .attr("transform", "translate(" + chart_width + "," + 32 + ")")
+              .attr('text-anchor', 'end')
+              .attr('fill', "#414042");
+          }
+        })
+        
+    
+    
+    
+  
+
+
+      //create svg for chart
+
+      drawyaxis = svg
+        .append('g')
+        .attr('class', 'y axis');
+
+      drawyaxis.each(function(d, i) {
+        if (i % dvc.optional.chart_every[size] == 0) {
+          d3.select(this).call(d3.axisLeft(y).ticks(3).tickSize(0).tickPadding(6));
+        // } else {
+        //   d3.select(this).call(d3.axisLeft(y).tickFormat("").ticks(3))
+        }
+
+      })
+
+
+
+      svg
+        .selectAll('g.line')
+        .data(function(d) {
+          console.log(d.values)
+          return d.values;
+        })
+        .enter()
+        .append('rect')
+        .attr("fill", function(d) {return dvc.essential.colour_palette[d.series]} )
+        .attr("x", x(0))
+        .attr("y", function(d) {return y(d.ycategory)})
+        .attr("width", function(d) {
+          return x(d.value)
+        })
+        .attr("height", y.bandwidth())
+
+        // svg
+        // .selectAll('g.line')
+        // .data(function(d) {
+        //   console.log(d.values)
+        //   return d.values;
+        // })
+        // .enter()
+        // .append('circle')
+        // .attr("fill", "#BBBDBF" )
+        // .attr("r","5")
+        // .attr("cy",  function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        // .attr("cx", function(d) {
+        //   return x(d.value) 
+        // })
+        // // .attr("height", y.bandwidth())
+     
+        // svg
+        // .selectAll('g.line')
+        // .data(function(d) {
+        //   console.log(d.values)
+        //   return d.values;
+        // })
+        // .enter()
+        // .append('circle')
+        // .attr("fill", "#206095" )
+        // .attr("r","5")
+        // .attr("cy", function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        // .attr("cx", function(d) {
+        //   return x(d.valuehigh)
+        // })
+
+
+
+        svg
+        .selectAll('g.line')
+        .data(function(d) {
+          console.log(d.values)
+          return d.values;
+        })
+        .enter()
+        .append('line')
+        .attr("stroke", "#222222" )
+        .attr("stroke-width","3")
+        .attr("y1", function(d) {return y(d.ycategory)})
+        .attr("y2", function(d) {return y(d.ycategory)+y.bandwidth()})
+        .attr("x1", function(d) {
+          return x(d.valuehigh)
+        })  
+        .attr("x2", function(d) {
+          return x(d.valuehigh) 
+        })
+
+
+d3.selectAll(".y.axis").selectAll("text")
+.style("fill","#414042")
+
+d3.selectAll(".x.axis").selectAll('line').each(function(d)
+      {
+        if (d == 0) {
+          d3.select(this)
+          .attr('class','zero-line');
+        }
+      });
+
+
+d3.selectAll(".x.axis").selectAll("text")
+.style("fill","#707071")
+
+      d3.select('#source')
+        .text('Source: ' + dvc.essential.sourceText);
+
+      //use pym to calculate chart dimensions
+      if (pymChild) {
+        pymChild.sendHeight();
+      }
+    }
+
+
+    //check whether browser can cope with svg
+    if (Modernizr.svg) {
+      //load config
+      d3.json("config.json", function(error, config) {
+        dvc = config;
+
+        //load chart data
+        d3.csv(dvc.essential.graphic_data_url, function(error, data) {
+          graphic_data = data;
+
+          //use pym to create iframed chart dependent on specified variables
+          pymChild = new pym.Child({
+            renderCallback: drawGraphic
+          });
+        });
+
+      })
+
+    } else {
+      //use pym to create iframe containing fallback image (which is set as default)
+      pymChild = new pym.Child();
+      if (pymChild) {
+        pymChild.sendHeight();
+      }
+    }
+  </script>
+</body>
+
+</html>
diff --git a/all-templates/small-multiple-range-plot/config.json b/all-templates/small-multiple-range-plot/config.json
new file mode 100644
index 0000000..2b0a732
--- /dev/null
+++ b/all-templates/small-multiple-range-plot/config.json
@@ -0,0 +1,75 @@
+{
+  "essential": {
+    "screenreadertext": "Set of small bar charts",
+    "graphic_data_url": "data.csv",
+    "dateFormat": "%d/%m/%Y",
+
+    "colour_palette": {
+      "Exports": "#206095",
+      "Imports": "#003C57"
+    },
+    "categorySort": [
+      "Total Services",
+      "Technical, trade-related and other business services",
+      "Professional and management consulting services",
+      "Explicitly charged and other financial services",
+      "Intellectual Property",
+      "Personal Travel"
+    ],
+    "sourceText": ["Office for National Statistics"],
+    "xAxisLabel": "£",
+    "yAxisLabel": "Regions and Countries",
+    "yAxisScale": "auto_min_max_total"
+  },
+  "optional": {
+    "margin": {
+      "groupMargin": {
+        "top": 0,
+        "right": 0,
+        "bottom": 0,
+        "left": 40
+      },
+      "sm": {
+        "top": 30,
+        "right": 23,
+        "bottom": 35,
+        "left": 20
+      },
+      "md": {
+        "top": 30,
+        "right": 23,
+        "bottom": 35,
+        "left": 20
+      },
+      "lg": {
+        "top": 30,
+        "right": 20,
+        "bottom": 35,
+        "left": 20
+      }
+    },
+    "chart_every":{
+      "sm": 1,
+      "md": 2,
+      "lg": 3
+    },
+    "aspectRatio": {
+      "sm": [16, 12],
+      "md": [16, 12],
+      "lg": [16, 12]
+    },
+    "legendHeight":{
+      "sm": 45,
+      "md": 30,
+      "lg": 30
+    },
+
+    "mobileBreakpoint": 400,
+    "middleBreakpoint": 600,
+    "x_ticks_num": {
+      "sm": 8,
+      "md": 8,
+      "lg": 8
+    }
+  }
+}
diff --git a/all-templates/small-multiple-range-plot/data.csv b/all-templates/small-multiple-range-plot/data.csv
new file mode 100644
index 0000000..8920b57
--- /dev/null
+++ b/all-templates/small-multiple-range-plot/data.csv
@@ -0,0 +1,31 @@
+ycategory,plot,value,valuehigh,series
+Q1,Total expenditure,48.2,54,Exports
+Q2,Total expenditure,57.8,62,Exports
+Q3,Total expenditure,64,68.6,Exports
+Q4,Total expenditure,71.5,74.8,Exports
+Q5,Total expenditure,77,86.6,Exports
+Q1,Food and drinks,48.2,54,Exports
+Q2,Food and drinks,57.8,62,Exports
+Q3,Food and drinks,64,68.6,Exports
+Q4,Food and drinks,71.5,74.8,Exports
+Q5,Food and drinks,77,86.6,Exports
+Q1,"Housing, fuel and power",70.2,71.5,Exports
+Q2,"Housing, fuel and power",76.4,78.9,Exports
+Q3,"Housing, fuel and power",82.4,85.1,Exports
+Q4,"Housing, fuel and power",87.5,82.5,Exports
+Q5,"Housing, fuel and power",98.4,105,Exports
+Q1,Transport,34.8,26.6,Exports
+Q2,Transport,55.4,40.4,Exports
+Q3,Transport,73.9,55.8,Exports
+Q4,Transport,102.2,81.1,Exports
+Q5,Transport,141.9,100.5,Exports
+Q1,Recreation and culture,36.1,24.1,Exports
+Q2,Recreation and culture,49.5,32.4,Exports
+Q3,Recreation and culture,66.6,45.9,Exports
+Q4,Recreation and culture,89.1,55.5,Exports
+Q5,Recreation and culture,132.7,69.8,Exports
+Q1,Restaurants and hotels,23.2,8.4,Exports
+Q2,Restaurants and hotels,31.6,10.5,Exports
+Q3,Restaurants and hotels,46.6,15.7,Exports
+Q4,Restaurants and hotels,69,23.8,Exports
+Q5,Restaurants and hotels,93.9,33.1,Exports
diff --git a/all-templates/small-multiple-range-plot/datadownload.xlsx b/all-templates/small-multiple-range-plot/datadownload.xlsx
new file mode 100644
index 0000000..0dc7c0e
Binary files /dev/null and b/all-templates/small-multiple-range-plot/datadownload.xlsx differ
diff --git a/all-templates/small-multiple-range-plot/fallback.png b/all-templates/small-multiple-range-plot/fallback.png
new file mode 100644
index 0000000..979b03e
Binary files /dev/null and b/all-templates/small-multiple-range-plot/fallback.png differ
diff --git a/all-templates/small-multiple-range-plot/index.html b/all-templates/small-multiple-range-plot/index.html
new file mode 100644
index 0000000..a1cba74
--- /dev/null
+++ b/all-templates/small-multiple-range-plot/index.html
@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+  <title>dvc1070 - The USA contributed the largest proportion of imports and exports across the top 5 service types except for intellectual property imports</title>
+
+  <meta name="description" content="">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+  <link rel="stylesheet" href="../lib/globalStyle.css" type="text/css"/>
+  <style type="text/css">
+    body {
+      color: #323132;
+      /* max-width:944px; */
+    }
+
+    body {
+      font-family: 'Open Sans', sans-serif;
+      font-weight: 400;
+      max-width: 700px;
+    }
+
+    .x.axis path {
+      display: none;
+    }
+
+    path {
+      fill: none;
+    }
+
+    text {
+      font-family: 'Open Sans'
+    }
+
+    text.x,
+    text.y {
+      font-size: 12px;
+      fill: #666;
+    }
+
+    line.y,
+    line.x {
+      stroke: #ccc;
+      stroke-width: 1px;
+      shape-rendering: crispEdges;
+    }
+
+
+    h4 {
+      font-size: 16px;
+      line-height: 24px;
+      margin: 16px 0 16px 0;
+      padding: 24px 0 0 0;
+      font-weight: 600;
+    }
+
+    h5 {
+      font-size: 14px;
+      margin: 0 0 16px 0;
+      font-weight: normal;
+      padding-top: 0;
+    }
+
+    h5,h6 {
+      font-size: 16px;
+      margin: 16px 0 8px 0;
+      font-weight: 700;
+      color: #323132;
+    }
+
+    ul, ol {
+      margin: 16px 0;
+      padding-left: 32px;
+    }
+
+    li {
+        margin: 0 0 8px 0;
+        line-height: 32px;
+        font-weight: 400;
+        font-size: 18px;
+        padding: 0;
+    }
+
+    @media (max-width:767px){
+        li{
+          font-size:16px;
+        }
+    }
+
+    .btn {
+        font-family: "Open Sans",Helvetica,Arial,sans-serif;
+        display: inline-block;
+        width: auto;
+        cursor: pointer;
+        padding: 6px 16px 10px 16px;
+        border: 0 none;
+        text-align: center;
+        -webkit-appearance: none;
+        transition: background-color 0.25s ease-out;
+    }
+
+    .btn--primary:focus {
+    background-color: #0b5d30;
+    }
+
+    .btn--primary {
+    background-color: #0F8243;
+    color: #fff;
+    }
+
+    .visuallyhidden {
+      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+      clip: rect(0,0,0,0);  border: 0;
+    }
+
+  </style>
+
+</head>
+
+<body>
+  <h5 id="screenreaderinfo" class="visuallyhidden">Screenreader info</h5>
+
+  <div id="graphic" aria-hidden="true" style="position:relative;">
+    <img src="fallback.png" alt="[Chart]" />
+  </div>
+
+  <h6 id="source"></h6>
+
+  <script src="https://cdn.ons.gov.uk/vendor/d3/4.13.0/d3.min.js" type="text/javascript"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.js" type="text/javascript"></script> -->
+  <script src="../lib/modernizr.svg.min.js" type="text/javascript"></script>
+  <script src="https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.min.js" type="text/javascript"></script>
+  <script>
+    var graphic = d3.select('#graphic');
+    var pymChild = null;
+
+    function drawGraphic() {
+
+      d3.select("#screenreaderinfo")
+        .text(dvc.essential.screenreadertext)
+
+      maxweek=d3.max(graphic_data,function(d){return d.ycategory})
+
+      var threshold_md = dvc.optional.middleBreakpoint;
+      var threshold_sm = dvc.optional.mobileBreakpoint;
+
+      if (parseInt(graphic.style("width")) < threshold_sm) {
+        size = "sm";
+      } else if (parseInt(graphic.style("width")) < threshold_md) {
+        size = "md";
+      } else {
+        size = "lg";
+      }
+
+      categorySort = {}
+      if(Array.isArray(dvc.essential.categorySort)){
+        for (i = 0; i < dvc.essential.categorySort.length; i++) {
+          categorySort[dvc.essential.categorySort[i]] = i;
+        }
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+      } else if(dvc.essential.categorySort=="descending"){
+        // TODO: NOT SURE THIS WILL WORK
+
+        //auto sort the array by biggest value
+        graphic_data.filter(function(d){
+          return d.ycategory==maxweek
+        }).sort(function(a,b){return +b.value - (+a.value)}).forEach(function(item, i){
+          categorySort[item.plot]=i
+        });
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+      } else if (dvc.essential.categorySort=="ascending"){
+        graphic_data.filter(function(d){
+          return d.ycategory==maxweek
+        }).sort(function(a,b){return +a.value - (+b.value)}).forEach(function(item, i){
+          categorySort[item.plot]=i
+        });
+
+        graphic_data.sort(function(a, b) {
+          return categorySort[a.plot] - categorySort[b.plot]
+        })
+
+        categories=Object.keys(categorySort)
+
+      }
+
+      var margin = dvc.optional.margin[size]
+      var chart_width = (parseInt(graphic.style("width")) - dvc.optional.margin.groupMargin.left) / dvc.optional.chart_every[size] - margin.left - margin.right - 10;
+      var height = Math.ceil((chart_width * dvc.optional.aspectRatio[size][1]) / dvc.optional.aspectRatio[size][0]);
+
+      // clear out existing graphics
+      graphic.selectAll("*").remove();
+      d3.select("#graphic2").selectAll("*").remove();
+
+
+      var x = d3.scaleLinear()
+        .range([0, chart_width]);
+
+      var y = d3.scaleBand()
+        .rangeRound([0, height])
+        .paddingInner(0.1);
+
+      ycategories=d3.map(graphic_data,function(d){return d.ycategory}).keys()
+      y.domain(ycategories)
+
+      x.domain([0,140])
+
+
+      var xAxis = d3.axisBottom(x)
+        .tickSize(-height)
+        .ticks(dvc.optional.x_ticks_num[size])
+
+      nested = d3.nest()
+        .key(function(d) {
+          return d.series
+        })
+        .key(function(d) {
+          return d.plot
+        })
+        .sortValues(function(a,b) { return a.ycategory - b.ycategory; } )
+        .entries(graphic_data);
+
+
+      chartSeries = d3.select('#graphic')
+        .selectAll('div')
+        .data(nested)
+        .enter()
+        .append("div")
+        .classed("chart-series", true)
+
+
+        //group headers
+
+      // chartHeaders = chartSeries.append("h1")
+      //   .style("font-size", "18px")
+      //   .style("font-weight", 700)
+      //   .style("margin-left", margin.left)
+      //   .style("margin-bottom", "15px")
+      //   .style("color", function(d, i) { console.log(d); return dvc.essential.colour_palette[d.key] })
+      //   .text(function(d) {return d.key})
+
+      chartContainers = chartSeries.selectAll("div")
+        .data(function(d) {console.log(d.values); return d.values})
+        .enter()
+        .append('div')
+        .classed("chart-container", true)
+
+        .style("float", "left");
+
+      chartContainers.append("p")
+        .text(function(d) {
+          return d.key
+        })
+        .style('font-weight', 600)
+        .style('font-size', "14px")
+        .style("margin-left", function(d,i) { return margin.left + calculateExtraMargin(i) + "px" })
+        .style("position", "absolute")
+        .style("max-width", chart_width + margin.right + "px");
+        // .style("float", "left");
+
+      charts = chartContainers.append("svg")
+        .attr("width", function(d,i) {
+          return chart_width + margin.left + margin.right + calculateExtraMargin(i);
+        })
+        .attr("height", height + margin.top + margin.bottom)
+        // .style("position", "relative");
+
+      function calculateExtraMargin(i) {
+        var extra_margin = 0;
+        if (i % dvc.optional.chart_every[size] == 0) {
+          extra_margin = dvc.optional.margin.groupMargin.left
+        };
+        return extra_margin
+      };
+
+      svg = charts
+        .append("g")
+        .attr("transform", function(d,i) {
+          // return "translate(" + (margin.left + dvc.optional.margin.groupMargin.left) + "," + margin.top + ")"
+          return "translate(" + (margin.left + calculateExtraMargin(i)) + "," + margin.top + ")"
+        });
+
+      svg
+        .append('g')
+        .attr('class', 'x axis')
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis)
+        .each(function(d, i) {
+          if (i % dvc.optional.chart_every[size] == dvc.optional.chart_every[size] - 1||i==nested[0].values.length-1) {
+            d3.select(this).append("text")
+              .text(dvc.essential.xAxisLabel)
+              .attr("transform", "translate(" + chart_width + "," + 32 + ")")
+              .attr('text-anchor', 'end')
+              .attr('fill', "#666");
+          }
+        });
+
+      //create svg for chart
+
+      drawyaxis = svg
+        .append('g')
+        .attr('class', 'y axis');
+
+      drawyaxis.each(function(d, i) {
+        if (i % dvc.optional.chart_every[size] == 0) {
+          d3.select(this).call(d3.axisLeft(y).ticks(3).tickSize(0).tickPadding(10));
+        // } else {
+        //   d3.select(this).call(d3.axisLeft(y).tickFormat("").ticks(3))
+        }
+
+      })
+
+      svg
+        .selectAll('g.line')
+        .data(function(d) {
+          console.log(d.values)
+          return d.values;
+        })
+        .enter()
+        .append('line')
+        .attr("stroke", "#BBBDBF" )
+        .attr("stroke-width","2")
+        .attr("y1", function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        .attr("y2", function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        .attr("x1", function(d) {
+          return x(d.value)
+        })  
+        .attr("x2", function(d) {
+          return x(d.valuehigh) 
+        })
+
+
+      // svg
+      //   .selectAll('g.line')
+      //   .data(function(d) {
+      //     console.log(d.values)
+      //     return d.values;
+      //   })
+      //   .enter()
+      //   .append('rect')
+      //   .attr("fill", function(d) {return dvc.essential.colour_palette[d.series]} )
+      //   .attr("x", x(0))
+      //   .attr("y", function(d) {return y(d.ycategory)})
+      //   .attr("width", function(d) {
+      //     return x(d.valuehigh)
+      //   })
+      //   .attr("height", y.bandwidth())
+
+        svg
+        .selectAll('g.line')
+        .data(function(d) {
+          console.log(d.values)
+          return d.values;
+        })
+        .enter()
+        .append('circle')
+        .attr("fill", "#BBBDBF" )
+        .attr("r","5")
+        .attr("cy",  function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        .attr("cx", function(d) {
+          return x(d.value) 
+        })
+        // .attr("height", y.bandwidth())
+     
+        svg
+        .selectAll('g.line')
+        .data(function(d) {
+          console.log(d.values)
+          return d.values;
+        })
+        .enter()
+        .append('circle')
+        .attr("fill", "#206095" )
+        .attr("r","5")
+        .attr("cy", function(d) {return y(d.ycategory)+y.bandwidth()/2})
+        .attr("cx", function(d) {
+          return x(d.valuehigh)
+        })
+
+        d3.selectAll(".y.axis").selectAll("text")
+.style("fill","#414042")
+
+d3.selectAll(".x.axis").selectAll('line').each(function(d)
+      {
+        if (d == 0) {
+          d3.select(this)
+          .attr('class','zero-line');
+        }
+      });
+
+
+d3.selectAll(".x.axis").selectAll("text")
+.style("fill","#707071")
+
+      d3.select('#source')
+        .text('Source: ' + dvc.essential.sourceText);
+
+      //use pym to calculate chart dimensions
+      if (pymChild) {
+        pymChild.sendHeight();
+      }
+    }
+
+
+    //check whether browser can cope with svg
+    if (Modernizr.svg) {
+      //load config
+      d3.json("config.json", function(error, config) {
+        dvc = config;
+
+        //load chart data
+        d3.csv(dvc.essential.graphic_data_url, function(error, data) {
+          graphic_data = data;
+
+          //use pym to create iframed chart dependent on specified variables
+          pymChild = new pym.Child({
+            renderCallback: drawGraphic
+          });
+        });
+
+      })
+
+    } else {
+      //use pym to create iframe containing fallback image (which is set as default)
+      pymChild = new pym.Child();
+      if (pymChild) {
+        pymChild.sendHeight();
+      }
+    }
+  </script>
+</body>
+
+</html>