Skip to content

Instantly share code, notes, and snippets.

@jessihamel

jessihamel/index.html

Created March 19, 2014 18:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jessihamel/9648495 to your computer and use it in GitHub Desktop.
Save jessihamel/9648495 to your computer and use it in GitHub Desktop.
Download ZIP
d3 with custom svg images
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Forest for the Trees</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
<style type="text/css">
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment