I used d3 to solve a problem on one of those solve programming problems and get a job sites. Adding a link here so the judges can check out how I can even use d3.js like a novice to create a scaleable graphic. Maybe I’ll work on making quadrants but it wasn’t really necessary for this problem because all the quadrants would be the same (repetition isn’t always good).
I figured out my silliness and need to redo my loopiness and get this giving me the right more interesting solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Challenge Vis</title>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
w=800;
h=800;
barpadding=2;
var padding = 31;
var dataset = [];
var limiter = 19 //sets the max number the coordinates added together can be
for(i=0;i<1000;i++){
for(o=0;o<1000;o++){
if(i+o<=limiter){
dataset.push([i,o])}
}
}
console.log(dataset.length *4)
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w-padding]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h-padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("body")
.append("svg").attr("width",w).attr("height",h);
svg.selectAll("circle")
.data(dataset).enter().append("circle")
.attr("cx", function(d) {
return xScale(d[0]); //Returns scaled value
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 5)
.attr("fill", function(d) {
return "rgb(0, 0, " + (d[0] * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + ","+d[1];
})
.attr("text-anchor", "middle")
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "orange");
svg.append("g").attr("class","axis").attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
// Your beautiful D3 code will go here
</script>
</body>
</html>