public
Created

troubleshooting scatter plot

  • Download Gist
scattererror.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>yguyghggjkgh</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
 
</style>
</head>
<body>
<div>
<input type="text" id="count" name="howmany">
<input type="button" id="drawbtn" value="draw">
</div>
 
<script type="text/javascript">
 
//Width and height
var w = 500;
var h = 300;
var padding = 30;
//Dynamic, random dataset
var dataset = []; //Initialize empty array
var numDataPoints = 50;
console.log("so we are here.")
var maxRange = Math.random() * 1000; //Max range of new values
for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
 
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
 
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
 
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
 
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
 
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
 
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 2);
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
 
 
//On click, update with new data
d3.select("#drawbtn")
.on("click", function() {
//New values for dataset
var numValues = parseInt(document.getElementById('count').value, 10);
console.log(numValues);
var maxRange = Math.random() * 1000;
dataset = []; //Initialize empty array
for (var i = 0; i < numValues; i++) { //Loop numValues times
var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
//Update scale domains
xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);
 
//Update all circles
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
});
 
});
 
 
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.