D3 Scatterplot

forked from WilliamQLiu's block: D3 Scatterplot

<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
 
    
    <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>
    
 
  <body>
    <h2>Bar Chart</h2>
    <p>This is a data visualization using bar charts </p>
    <h3></h3>
  
  
  <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>

https://d3js.org/d3.v3.min.js