Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/README.md

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbogden/26d15b9ae3a2ebf666b2 to your computer and use it in GitHub Desktop.
Save pbogden/26d15b9ae3a2ebf666b2 to your computer and use it in GitHub Desktop.
Download ZIP
symbols
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>symbols</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
<script>
var margin = { top: 10, right: 10, bottom: 10, left: 10 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data = [ [ 10, 480],
[ 100, 267],
[ 400, 222],
[ 600, 311],
[ 800, 10],
[ 940, 89] ];
var line = d3.svg.line(); // SVG line generator using default accessors
line(data);
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", function(d) { return "translate(" + margin.left + "," + margin.top + ")"; });
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("stroke", "#000")
.attr("fill", "steelblue")
.style("fill-opacity", 0.2);
svg.selectAll("path.symbol")
.data(data)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; })
.attr("d", d3.svg.symbol().type("cross"))
.style("fill", "crimson")
.style("fill-opacity", 0.5);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment