Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/index.html

Last active September 17, 2016 21:12
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 pstuffa/40b9529e386332ed90c20c432373c825 to your computer and use it in GitHub Desktop.
Save pstuffa/40b9529e386332ed90c20c432373c825 to your computer and use it in GitHub Desktop.
Download ZIP
Example bl.ock
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/*css to go here*/
.axis path {
fill: none;
stroke: #fff;
stroke-width: 2;
}
.axis line {
stroke: #bfbfbf;
stroke-width: 2;
stroke-dasharray: 3;
/*stroke-opacity: .25;*/
}
.anscombe-circles {
fill: red;
fill-opacity: .75;
}
.axis text {
font: 12px sans-serif;
}
</style>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
//JS to go here
var anscombeData = [
{'group':'III', 'x': 10, 'y': 7.46},
{'group':'III', 'x': 8 , 'y': 6.77},
{'group':'III', 'x': 13, 'y': 12.74},
{'group':'III', 'x': 9 , 'y': 7.11},
{'group':'III', 'x': 11, 'y': 7.81},
{'group':'III', 'x': 14, 'y': 8.84},
{'group':'III', 'x': 6 , 'y': 6.08},
{'group':'III', 'x': 4 , 'y': 5.39},
{'group':'III', 'x': 12, 'y': 8.15},
{'group':'III', 'x': 7 , 'y': 6.42},
{'group':'III', 'x': 5 , 'y': 5.73}
];
console.log(anscombeData);
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
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 + ")")
var xScale = d3.scale.linear()
.domain([0,15])
.range([0, width])
var yScale = d3.scale.linear()
.domain([0,15])
.range([height, 0])
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(15)
.tickSize(-height)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(15)
.tickSize(-width)
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform","translate(0," + height + ")" )
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
// var circles = svg.selectAll(".anscombe-circles")
// .data(anscombeData)
// .enter().append("circle")
// .attr("class","anscombe-circles")
// .attr("cx", function(d) { return xScale(d.x) })
// .attr("cy", function(d) { return yScale(d.y); })
// .attr("r", function(d,i) { return Math.random()*10; });
var circleGroups = svg.selectAll(".anscombe-circle-group")
.data(anscombeData)
.enter().append("g")
.attr("class","anscombe-circle-group")
.attr("transform",function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })
circleGroups.append("text")
.attr("class",function(d,i) { return "T" + i })
.attr("dx", 5)
.attr("dy", 5)
.text(function(d) { return d.x + ", " + d.y; })
.style("fill","none")
.style("font","8px sans-serif")
circleGroups.append("circle")
.attr("class",function(d,i) { return "anscombe-circles T" + i; })
.attr("r", 5)
.on("mouseenter", function() {
var myClass = d3.select(this).attr("class").split(" ")[1];
d3.selectAll("." + myClass)
.style("fill","#000")
})
.on("mouseleave", function() {
d3.selectAll(".anscombe-circle-group")
.selectAll("text")
.style("fill","none")
d3.selectAll(".anscombe-circles")
.style("fill","red")
});
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height)
.attr("y2", height)
.style("stroke","#000")
console.log("domain", xScale.domain())
console.log("range", xScale.range())
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment