Skip to content

Instantly share code, notes, and snippets.

@cramja

cramja/d3_example_0.html

Created April 6, 2017 13:48
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 cramja/c0ecaf69b8a8c00917391cb8c02c536b to your computer and use it in GitHub Desktop.
Save cramja/c0ecaf69b8a8c00917391cb8c02c536b to your computer and use it in GitHub Desktop.
Download ZIP
making some circles and lines in d3
Raw
d3_example_0.html
<!DOCTYPE html>
<style>
button {
position: absolute;
top: 10px;
left: 10px;
}
circle {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<div id="mychart"></div>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg");//,
// margin = {top: 30, right: 30, bottom: 30, left: 30},
// width = +svg.attr("width") - margin.left - margin.right,
// height = +svg.attr("height") - margin.top - margin.bottom,
// g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
width = svg.attr('width');
height = svg.attr('height');
var pts = [];
for (var i = 0; i < 10; i++) {
pts.push({x:Math.random() * width,
y:Math.random() * height,
r:5});
}
function update(pts) {
xx = pts.map(function(a) {return a.x;});
yy = pts.map(function(a) {return a.y;});
var svg = d3.select("svg");
// DATA JOIN
var vline = svg.selectAll("line-vert").data(xx);
var hline = svg.selectAll("line-vert")
.data(yy)
.enter()
.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", function(d){return d;})
.attr("y2", function(d){return d;})
.attr("stroke", "red")
.attr("stroke-width", 2);
vline.enter()
.append("line")
.attr("x1", function(d){return d})
.attr("x2", function(d){return d})
.attr("y1", 0)
.attr("y2", height)
.attr("stroke", "red")
.attr("stroke-width", 2)
.merge()
var circ = svg.selectAll("circle")
.data(pts)
.enter()
.append("circle")
.attr("cx", function(d){return d.x})
.attr("cy", function(d){return d.y})
.attr("r", function(d){return d.r});
};
update(pts);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment