wboykinm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An example of a continuous gradient key that can be adopted whenever there is a need for a gradient coloring scheme.

  
## index.html
<html>
	<head>
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script src="http://d3js.org/d3.v2.js"></script>
		<style type="text/css">
			.axis text {
				font: 10px sans-serif;
			}

			.axis line, .axis path {
				fill: none;
				stroke: #000;
				shape-rendering: crispEdges;
			}
svg{ padding-left: 50px;
}
		</style>

	</head>
	<body>
		<script type="text/javascript">
			var w = 140, h = 400;

			var key = d3.select("body").append("svg").attr("width", w).attr("height", h);

			var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");

			legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

			legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

			key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");

			var y = d3.scale.linear().range([300, 0]).domain([1, 100]);

			var yAxis = d3.svg.axis().scale(y).orient("right");

			key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("axis title");

		</script>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">
	.axis text {
	font: 10px sans-serif;
	}

	.axis line, .axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	svg{ padding-left: 50px;
	}
	</style>

	</head>
	<body>
	<script type="text/javascript">
	var w = 140, h = 400;

	var key = d3.select("body").append("svg").attr("width", w).attr("height", h);

	var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");

	legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

	legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

	key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");

	var y = d3.scale.linear().range([300, 0]).domain([1, 100]);

	var yAxis = d3.svg.axis().scale(y).orient("right");

	key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("axis title");

	</script>