d3 with custom svg images

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Forest for the Trees</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>

.axis path,
  	.axis line {
  		fill: none;
  		stroke: rgba(102,140,77,1);
  		shape-rendering: crispEdges;
  	}
  	
  	.axis text {
  		font-family: sans-serif;
  		font-size: 11px;
  	}

.tick line {
  	  stroke: rgba(102,140,77,1);
  	}

.tick {
  	  font-size: 10px;
  	  color: rgba(102,140,77,1);
  	}

</style>
  </head>
    <body>
      <script type="text/javascript">

//Margin conventions
        var margin = {top: 20, right: 60, bottom: 20, left: 20};
        var padding = {top: 60, right: 60, bottom: 60, left: 60};
        var width = 900 - margin.left - margin.right - padding.left - padding.right; 
        var height = 260 - margin.top - margin.bottom - padding.top - padding.right;

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

//svgs are put into an array so that we can draw them with d3--images from Master Pixel and Grant Taylor from The Noun Project
        var paths = [{
          fill: "rgba(102,140,77,.8)",
          stroke: "rgba(0,0,0,.4)",
          d: "M92.422,47.256c0.042-0.18,0.066-0.366,0.066-0.555c0-1.759-1.923-3.183-4.296-3.183c-0.857,0-1.654,0.187-2.325,0.507  c-1.106-0.307-2.27-0.537-3.477-0.682c-1.048-1.185-2.872-1.969-4.947-1.969c-2.636,0-4.868,1.265-5.617,3.009  c-4.149,1.408-7.342,3.932-8.726,6.997h13.774c-0.003,0.002-0.005,0.003-0.007,0.006c-0.992,0.803-3.626,2.15-10.126,2.15  c-4,0-7.329,1.349-9.897,4.011c-1.134,1.176-2.026,2.524-2.73,3.934c-0.927-4.731-1.291-11.464,1.908-12.767  c9.229-3.76,15.616-11.02,16.367-18.406H100c-2.484-5.501-8.046-10.083-15.315-12.812c0.268-0.471,0.416-0.976,0.416-1.501  c0-2.548-3.419-4.613-7.637-4.613c-0.788,0-1.548,0.072-2.263,0.206C73.846,9.29,70.513,7.92,66.84,8.386  c-4.533,0.575-7.867,3.726-7.447,7.039c0.016,0.121,0.037,0.24,0.063,0.358c-5.299,1.131-10.01,3.169-13.743,5.845  c-0.014-0.003-0.027-0.006-0.041-0.01c-0.445-0.604-1.255-1.009-2.183-1.009c-0.569,0-1.092,0.154-1.516,0.41  c-1.205-0.127-2.439-0.194-3.696-0.194c-3.123,0-6.105,0.408-8.841,1.147c-0.601-0.261-1.287-0.409-2.015-0.409  c-2.122,0-3.883,1.254-4.231,2.901c-1.788,0.988-3.362,2.147-4.671,3.442c-1.222-0.589-2.697-0.934-4.287-0.934  c-4.218,0-7.637,2.421-7.637,5.409c0,0.708,0.194,1.384,0.544,2.004c-2.893,1.861-5.088,4.22-6.287,6.877h15.355  c0.148,0.893,0.677,2.524,2.538,4.032c2.672,2.162,7.133,3.26,13.261,3.26c2.625,0,4.687,0.81,6.302,2.478  c4.16,4.297,3.938,12.68,3.936,12.76l0.013,0.001l-1.895,28.043h0.004c0,0.002-0.001,0.003-0.001,0.005  c0,1.006,3.964,1.822,8.854,1.822c4.889,0,8.853-0.816,8.853-1.822c0-0.002-0.001-0.003-0.001-0.005h0.001l-1.346-21.651  c0.362-2.825,1.3-6.695,3.715-9.189c1.615-1.668,3.677-2.479,6.303-2.479c6.127,0,10.588-1.096,13.259-3.26  c1.76-1.424,2.33-2.959,2.511-3.877h13.243C95.062,49.846,93.914,48.448,92.422,47.256z M40.499,35.335  c-1.527-1.16-3.301-2.167-5.266-2.98h4.82C40.14,33.398,40.289,34.392,40.499,35.335z M46.671,48.437  c-0.568,1.612-0.906,3.462-1.012,5.522c-0.792-2.259-1.979-4.53-3.758-6.374c-2.568-2.662-5.897-4.012-9.896-4.012  c-5.521,0-8.261-0.964-9.588-1.773c-0.309-0.188-0.543-0.37-0.723-0.536H43.09c0.425,0.583,0.891,1.127,1.401,1.634  c1.161,1.152,2.422,1.981,3.65,2.579C47.549,46.36,47.055,47.348,46.671,48.437z M51.071,42.516  c-1.246-0.431-2.644-1.15-3.859-2.356c-1.852-1.84-2.951-4.458-3.282-7.804h17.267c-0.317-0.704-0.705-1.387-1.154-2.046h4.414  c-0.352,1.653-1.274,3.41-2.688,5.078c-2.127,2.512-5.138,4.608-8.707,6.062C52.352,41.738,51.688,42.097,51.071,42.516z",},
        {
          fill: "rgba(204,217,26,.9)",
          stroke: "rgba(0,0,0,.4)",
          d: "M32.41,28.414c-4.193,0.706-6.717,3.079-6.719,3.08c0.77-3.909,1.76-6.55,2.206-7.626   c3.055-0.57,10.352-2.229,10.271-12.682c-10.406,0.188-11.143,8.994-11.102,11.904c-1.237,1.697-2.196,3.707-2.94,5.83   c-1.283-3.52-1.49-7-1.508-8.667c1.955-1.983,6.456-6.933,1.053-14.563c-6.805,4.924-4.248,11.207-2.566,13.9   C20.464,28.407,23.324,32,23.324,32h0.002c-0.266,1-0.492,1.779-0.686,2.774c-0.004-0.005-2.012-3.212-5.094-5.116   c-1.158-2.195-4.041-6.902-11.471-4.588c2.193,6.79,7.732,6.328,10.385,5.678c0.002,0.002,4.678,2.908,5.686,6.851   c-0.699,5.218-0.551,9.435-0.551,9.435c0,1.934,3.195,2.151,3.195-0.449c-0.318-4.706-0.063-8.839,0.424-12.265   c2.44-3.273,7.975-4.317,7.975-4.317l0,0c6.025,4.43,11.188-1.902,11.188-1.902C42.986,27.165,38.205,23.144,32.41,28.414z",}
					];

//your datasets
      	var dataset = [1, 7, 26, 11, 8, 18.5, 19.8, 30, 16, 4.5];
      	var dataset2 =[2, 3, 22, 3.2, 18, 16, 6, 4.2, 9.3, 11, 22, 28, 13.5, 14.5, 17, 24, 27, 29];

//create a scale, which we'll use to draw our axes
      	var xScale = d3.scale.linear()
          .domain([0, d3.max(dataset, function(d) { return d; })])
          .range([0, width]);

// piece of code that joins our complex svg data to the first dataset--d3 is amazing!!
      	var svgPaths = svg.selectAll(".bigtrees")
      		.data(dataset)
      		.enter()
      		.append('path')
      		.attr("class", ".bigtrees")
      		.attr("d", paths[0].d)
      		.style("stroke", paths[0].stroke)
      		.style("fill", paths[0].fill)
      		//moving the svgs depending on the data--you might have to play around with this depending on the pixel width of your svg
      		.attr("transform", function(d){return 'translate('+ (xScale(d)-48) + ')'});

// and more joining for the second dataset--hooray!!
      	var svgPathsTwo = svg.selectAll(".littletrees")
      		.data(dataset2)
      		.enter()
      		.append('path')
      		.attr("class", ".littletrees")
      		.attr("d", paths[1].d)
      		.style("stroke", paths[1].stroke)
      		.style("fill", paths[1].fill)
      		//moving the svgs depending on the data--you might have to play around with this depending on the pixel width of your svg
      		.attr("transform", function(d){return 'translate('+ (xScale(d)-30) + ', 50)'});

//add the xAxis
      	var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
          .ticks(10);

svg.append("g")
        	.attr("class", "axis")
        	.attr("transform", "translate(0," + height + ")")
  		    .call(xAxis);

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

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js