Skip to content

Instantly share code, notes, and snippets.

@alandunning
Last active Oct 19, 2016
Embed
What would you like to do?
4 Quadrant Scatter Plot D3 v4
license: mit

This is a simple line graph demonstrating the addition of scatterplot points to a line graph. This was written using d3.js v4 and is a follow on to the simple graph example here.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from d3noob's block: Scatterplot with v4

[
{
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"question": "Activity Two",
"answer": "Some answer",
"value": 4,
"consequence": 1
},
{
"question": "Activity Three",
"answer": "Another answer",
"value": 4,
"consequence": 2
},
{
"question": "Activity Four",
"answer": "Another answer",
"value": 5,
"consequence": 4
},
{
"question": "Activity Five",
"answer": "Another answer",
"value": 4,
"consequence": 5
},
{
"question": "Activity Six",
"answer": "Another answer",
"value": 1,
"consequence": 1
},
{
"question": "Activity Seven",
"answer": "Another answer",
"value": 1,
"consequence": 5
}
]
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font-family: Arial;}
.axis, .axis path {
fill: none;
stroke: #ACB849;
}
text {
stroke: none;
fill: #666666;
}
</style>
<body>
<svg id="scatter" width="500" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("#scatter"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width"),
height = +svg.attr("height"),
domainwidth = width - margin.left - margin.right,
domainheight = height - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain(padExtent([1,5]))
.range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
.domain(padExtent([1,5]))
.range(padExtent([domainheight, 0]));
var g = svg.append("g")
.attr("transform", "translate(" + margin.top + "," + margin.top + ")");
g.append("rect")
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom)
.attr("fill", "#F6F6F6");
d3.json("data.json", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.consequence = +d.consequence;
d.value = +d.value;
});
g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7)
.attr("cx", function(d) { return x(d.consequence); })
.attr("cy", function(d) { return y(d.value); })
.style("fill", function(d) {
if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left
else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right
else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left
else { return "#A72D73" } //Bottom Right
});
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y.range()[0] / 2 + ")")
.call(d3.axisBottom(x).ticks(5));
g.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x.range()[1] / 2 + ", 0)")
.call(d3.axisLeft(y).ticks(5));
});
function padExtent(e, p) {
if (p === undefined) p = 1;
return ([e[0] - p, e[1] + p]);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment