Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created March 14, 2019 01:33
Show Gist options
  • Save GerardoFurtado/45fa2b852f8b0f229923c6dc1cdfa2b6 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/45fa2b852f8b0f229923c6dc1cdfa2b6 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Scatterplot
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Load D3 from site -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<!-- CSS (Styling) -->
<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>
<!-- End CSS (Styling) -->
<body>
<h2>Bar Chart</h2>
<p>This is a data visualization using bar charts </p>
<h3></h3>
<!-- Begin D3 Javascript -->
<script type="text/javascript">
// ===== Start Scatterplot =====
// Setup settings for graphic
var canvas_width = 500;
var canvas_height = 200;
var padding = 25; // Padding around canvas, i.e. replaces the 0 of scale
// Create SVG element
var svg = d3.select("h3") // This is where we put our vis
.append("svg")
.attr("width", canvas_width)
.attr("height", canvas_height)
// scatterplot data is an array of arrays
var data_scatter = [[5, 20], [480, 90], [250, 50], [100, 50], [330, 30], [475, 33],
[77, 10], [150, 150]]; // Can add additional values and will scale
// Define Scales - scales map an input domain with an output range
var xScale = d3.scale.linear()
.domain([0, d3.max(data_scatter, function(d) {
return d[0]; // get the input domain as first column of array
})])
.range([padding, canvas_width - padding * 2]) // set the output range
.nice(); // Make decimals round up nicely
var yScale = d3.scale.linear()
.domain([0, d3.max(data_scatter, function(d) {
return d[1]; // gets the input domain as the second column of array
})])
.range([canvas_height - padding, padding]) // set the output range
.nice(); // Make decimals round up nicely
// Add circles from data
svg.selectAll("circle")
.data(data_scatter)
.enter()
.append("circle")
.attr("x", function(d) {
return xScale(d[0]); // Location of x
})
.attr("y", function(d) {
return yScale(d[1]); // Location of y
})
.attr("r", 4) // Radius
.attr("cx", function(d) {
return xScale(d[0]); // Returns scaled circle x
})
.attr("cy", function(d) {
return yScale(d[1]); // Returns scaled circle y
});
// Add Text Labels
svg.selectAll("text")
.data(data_scatter)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]); // Returns scaled location of x
})
.attr("y", function(d) {
return yScale(d[1]); // Returns scaled circle y
})
.attr("font_family", "sans-serif") // Font type
.attr("font-size", "11px") // Font size
.attr("fill", "darkgreen")
.attr('transform',function(d){
return "rotate(5," + xScale(d[0]) + "," + yScale(d[1]) + ")"
}); // Font color
// Define X axis and attach to graph
var xAxis = d3.svg.axis() // Create an x axis
.scale(xScale) // Scale x axis
.orient("bottom") // Put text on bottom of axis line
.ticks(10); // Set rough # of ticks (optional)
svg.append("g") // Append a group element (itself invisible, but helps 'group' elements)
.attr("class", "axis") // Assign the 'axis' CSS
.attr("transform", "translate(0," + (canvas_height - padding) + ")") // Place axis at bottom
.call(xAxis); // Call function to create axis
// Define Y axis and attach to graph
var yAxis = d3.svg.axis() // Create a y axis
.scale(yScale) // Scale y axis
.orient("left")
.ticks(5); // Set rough # of ticks (optional)
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment