Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Dot Plot</title>
- <script type="text/javascript" src="../../d3.v2.js"></script>
- <style type="text/css">
- body {
- font: 10px sans-serif;
- }
- path.dot {
- fill: white;
- stroke-width: 1.5px;
- }
- rect {
- fill: none;
- stroke: black;
- shape-rendering: crispEdges;
- }
- .x line, .y line {
- stroke: #ccc;
- shape-rendering: crispEdges;
- }
- </style>
- </head>
- <body>
- <script type="text/javascript">
- var data = d3.range(100).map(function(i) {
- return {x: i / 99, y: Math.random()};
- });
- var width = 450,
- height = 450,
- margin = 20;
- var x = d3.scale.linear()
- .range([0, width]);
- var y = d3.scale.linear()
- .range([height, 0]);
- var symbol = d3.scale.ordinal().range(d3.svg.symbolTypes),
- color = d3.scale.category10();
- var vis = d3.select("body")
- .append("svg")
- .attr("width", width + margin * 2)
- .attr("height", height + margin * 2)
- .append("g")
- .attr("transform", "translate(" + margin + "," + margin + ")");
- var xrule = vis.selectAll("g.x")
- .data(x.ticks(10))
- .enter().append("g")
- .attr("class", "x");
- xrule.append("line")
- .attr("x1", x)
- .attr("x2", x)
- .attr("y1", 0)
- .attr("y2", height);
- xrule.append("text")
- .attr("x", x)
- .attr("y", height + 3)
- .attr("dy", ".71em")
- .attr("text-anchor", "middle")
- .text(x.tickFormat(10));
- var yrule = vis.selectAll("g.y")
- .data(y.ticks(10))
- .enter().append("g")
- .attr("class", "y");
- yrule.append("line")
- .attr("x1", 0)
- .attr("x2", width)
- .attr("y1", y)
- .attr("y2", y);
- yrule.append("text")
- .attr("x", -3)
- .attr("y", y)
- .attr("dy", ".35em")
- .attr("text-anchor", "end")
- .text(y.tickFormat(10));
- vis.append("rect")
- .attr("width", width)
- .attr("height", height);
- vis.selectAll("path.dot")
- .data(data)
- .enter().append("path")
- .attr("class", "dot")
- .attr("stroke", function(d, i) { return color(i); })
- .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
- .attr("d", d3.svg.symbol()
- .type(function(d, i) { return symbol(i); }));
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment