D3OG

All examples By author By category About

justlebeau

Full window Github gist

Scatter plot + Brush

Data is some ficticious student data.

Brush over points to reveal their values in an adjacent table.

forked from sebg's block: Scatter plot + Brush

<!DOCTYPE html>
<meta charset="utf-8">
    <style>

text {
            font-family: sans-serif;
            fill: #000000;
        }

table {
            visibility: hidden;
            position: absolute;
            top: 30px;
            left: 500px;
            font-family: sans-serif;
            font-size: 0.7em;
        }

tr:nth-child(even) {
            background-color: #d9d9d9;
        }

.brushed {
            fill: #ff3399;
            stroke: #8e1b54;
            opacity: 1.0;
        }

.non_brushed {
            fill: #404040;
            opacity: 0.5;
        }

</style>
<body>

<div id="chart"></div>

<div id="table">
        <table>
            <tr>
                <th>Name</th>
                <th>Grade</th> 
                <th>Variable1</th> 
            </tr>
        </table>
    </div>

// Commented version of
        // https://bl.ocks.org/feyderm/6bdbc74236c27a843db633981ad22c1b

// Variables
        var margin = {top: 20, right: 0, bottom: 50, left: 85},
            svg_dx = 500, 
            svg_dy = 400,
            plot_dx = svg_dx - margin.right - margin.left,
            plot_dy = svg_dy - margin.top - margin.bottom;

// x axis scale
        // y axis scale
        var x = d3.scaleLinear().range([margin.left, plot_dx]),
            y = d3.scaleLinear().range([plot_dy, margin.top]);

// Tick formatting code
        //var formatIncome = d3.format(","),
          //  formatHsGrad = d3.format(""),
           // formatHsGradAxis = d3.format(".0%");

// Create SVG Viewport
        var svg = d3.select("#chart")
                    .append("svg")
                    .attr("width", svg_dx)
                    .attr("height", svg_dy);

// CSV AJAX Call
        d3.csv("book1.csv", function(d) {

// Figure out number of data elements in the data
            var n = d.length;

// Define the extent for the x domain based on numerical income
            // Define the extend for the y domain based on hs_grad percentages
            var d_extent_x = d3.extent(d, d => +d.variable1),
                d_extent_y = d3.extent(d, d => +d.grade);

// Define x and y scale domains based on calculated data
            x.domain(d_extent_x);
            y.domain(d_extent_y);

// Define x and y axis as well as the respective tick formats
            var axis_x = d3.axisBottom(x)
              //             .tickFormat(formatIncome),
                axis_y = d3.axisLeft(y)
                //           .tickFormat(formatHsGradAxis);

// Draw the X Axis
            svg.append("g")
               .attr("id", "axis_x")
               .attr("transform", "translate(0," + (plot_dy + margin.bottom / 2) + ")")
               .call(axis_x);

// Draw the Y Axis
            svg.append("g")
               .attr("id", "axis_y")
               .attr("transform", "translate(" + (margin.left / 2) + ", 0)")
               .call(axis_y);

// Label the X Axis
            d3.select("#axis_x")
              .append("text")
              .attr("transform", "translate(360, -10)")
              .text("Quiz 1");

// Label the Y Axis
            d3.select("#axis_y")
              .append("text")
              .attr("transform", "rotate(-90) translate(-20, 15)")
              .text("Grades");

// Create the Scatterplot circles
            var circles = svg.append("g")
                             .selectAll("circle")
                             .data(d)
                             .enter()
                             .append("circle")
                             .attr("r", 5)
                             .attr("cx", function(d) { return x(+d.variable1); })
                             .attr("cy", function(d) { return y(+d.grade); })
                             .attr("class", "non_brushed");

// Function to run when things are being brushed
            //   - .on("brush", highlightBrushedCircles)
            function highlightBrushedCircles() {

// If something was actually brushed, then do the following
                if (d3.event.selection != null) {

// revert circles to initial style
                    circles.attr("class", "non_brushed");

// Figure out the brush coordinates
                    var brush_coords = d3.brushSelection(this);

// style brushed circles
                    // For each circle in the selection
                    //   - figure out where it is
                    //   - run it through the isBrushed function
                    //   - if the coordinates fall within the brush_coords then keep
                    //   - otherwise, don't do anything
                    // Finally, for those kept, set class to "brushed"
                    circles.filter(function () {

// 
                               var cx = d3.select(this).attr("cx"),
                                   cy = d3.select(this).attr("cy");

return isBrushed(brush_coords, cx, cy);
                           })
                           .attr("class", "brushed");
                }
            }

// Function to display the HTML table
            //   - Function run .on("end", displayTable); 
            function displayTable() {

// disregard brushes w/o selections  
                // ref: https://bl.ocks.org/mbostock/6232537
                if (!d3.event.selection) return;

// programmed clearing of brush after mouse-up
                // ref: https://github.com/d3/d3-brush/issues/10
                d3.select(this).call(brush.move, null);

var d_brushed =  d3.selectAll(".brushed").data();

// populate table if one or more elements is brushed
                  if (d_brushed.length > 0) {
                    clearTableRows();
                    d_brushed.forEach(d_row => populateTableRow(d_row))
                } else {
                    clearTableRows();
                }
            }

// Define Brush Behavior
            var brush = d3.brush()
                          .on("brush", highlightBrushedCircles)
                          .on("end", displayTable);

svg.append("g")
               .call(brush);
        });

// Clear the table rows functions
        function clearTableRows() {

// First hide the column names
            hideTableColNames();

// Remove all the table rows
            d3.selectAll(".row_data").remove();
        }

// Given coordinates of circles and brush_coords
        //   - get the boundaries from the brush_coords
        //   - do a massively long boolean comparison
        //     to make sure circle coordinates are with brush_coords
        function isBrushed(brush_coords, cx, cy) {

var x0 = brush_coords[0][0],
                 x1 = brush_coords[1][0],
                 y0 = brush_coords[0][1],
                 y1 = brush_coords[1][1];

return x0 <= cx && cx <= x1 && y0 <= cy && cy <= y1;
        }

// Change HTML Table names to invisible
        function hideTableColNames() {
            d3.select("table").style("visibility", "hidden");
        }

// Change HTML Table names to visitle
        function showTableColNames() {
            d3.select("table").style("visibility", "visible");
        }

// Given data for a row, fill it out
        function populateTableRow(d_row) {

// Change HTML Table names to visitle
            showTableColNames();

// Create data structure and format as needed
            var d_row_filter = [d_row.Name, 
                                formatVariable1(d_row.variable1), 
                                formatGrade(d_row.grade)];

// Do a data join
            //   - Add a new row and then do a data join for the <td>'s
            //   - This way, it'll be only enter selection
            //   - From data structure above, we'll have three <td>'s
            d3.select("table")
              .append("tr")
              .attr("class", "row_data")
              .selectAll("td")
              .data(d_row_filter)
              .enter()
              .append("td")
              .attr("align", (d, i) => i == 0 ? "left" : "right")
              .text(d => d);
        }

</script>

</body>

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