D3 Examples - Trivariate Scatterplot

xxxxxxxxxx
 
<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <title>Trivariate Scatterplot</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
    
    <body>
        <script type = "text/javascript">
        
        //width and height
        var w = 600;
        var h = 400;
        var padding = 40;
        
        /*
        var dataset;
        //load data
        d3.csv('weather.csv', function(d) {
            //data.forEach(function(d) {
            //dataset.push(d.precipitation);
            return {
                //max: d.Maximum,
                //min: d.Minimum,
                //month: d.Month,
                precipitation: d.Precipitation
                //speed: d.Speed,
                //state: d.State,
                //year: d.Year
            };
        }, function(d) {
            dataset.push(d.precipitation); 
        });
        
        
        
        var temp;
        var string;
        for(var i = 0; i < numBars; i++) {
            string = dataset.get(i);
            state = states.get(i);
            temp = {state: string};
            dataset.push(temp);
        }*/
        
        //var dataset = data.slice(0, numBars + 1);
        //max vs min
        /*
        var dataset = [];
        dataset.push([46, 32]);
        dataset.push([47, 31]);
        dataset.push([51, 41]);
        dataset.push([52, 38]);
        dataset.push([38, 29]);
        */
        
        
        dataset = [{max: 46, min: 32, state: "Alabama"},
                    {max: 47, min: 31, state: "Alabama"},
                    {max: 51, min: 41, state: "Alabama"},
                    {max: 52, min: 38, state: "Alabama"},
                    {max: 38, min: 29, state: "Alaska"}];
        
        //scale function
        var xScale = d3.scaleLinear()
            //.domain(["Alabama","Alaska","Arizona","Arkansas","California"])
            .domain([0, d3.max(dataset, function(d) { return d.max; })])
            //.range([padding, w-padding * 2]);
            .range([padding, w - padding * 2]);
            
        var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d) { return d.min; })])
            //.range([padding, w-padding * 2]);
            .range([h - padding, padding]);
        
        var xAxis = d3.axisBottom().scale(xScale).ticks(5);
        
        var yAxis = d3.axisLeft().scale(yScale).ticks(5);
        
        //create svg element
        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.max);
            })
            .attr("cy", function(d) {
                return h - yScale(d.min);
            })
            .attr("r", 5)
            .attr("fill", "green");
            
        //x axis
        svg.append("g")
            .attr("class", "x axis")    
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);
        
        //y axis
        svg.append("g")
            .attr("class", "y axis")    
            .attr("transform", "translate(" + padding + ", 0)")
            .call(yAxis);
            
        svg.select("rect")
            .enter()
            .append("rect")
            .attr("x", w - 50)
            .attr("y", 50)
            .attr("width", 50)
            .attr("height", 50);
            
        svg.selectAll("text")
            .enter()
            .append("text")
            .text(function(d) {
                return d.state;
            })
            .attr("x", function(d, i) {
                return xScale(i) + padding;//, + xScale.bandwidth() / 2;
            })
            .attr("y", function(d) {
                return h - yScale(d.value) + padding;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", function(d) {
                if (d.state.equals("Alabama")) {
                    return "blue";
                }
                return "blue";
            });
            
        
        </script>
    </body>
</html>
    