Selfies: confidence vs. smiling

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style type="text/css">
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                stroke-width: 2;
                shape-rendering: crispEdges;
            }

.axis text {
                font-family: helvetica;
                font-size: 11px; 
            }
    				
    				circle {
    						fill: #B2B2B2;
      					fill-opacity: .5;
    				}

circle:hover {
                -moz-transition: all 0.1s;
                -o-transition: all 0.1s
                -webkit-transition: all 0.1s;
                transition: all 0.1s;
                fill: #FFCC00;
            }

#tooltip {
                position: absolute;
                width: 200px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }

#tooltip.hidden {
                display: none;
            }

#tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 12px;
                line-height: 20px;
            }

p {
                font-family: sans-serif;
                font-size: 10px;
                /*padding: {top: 1000px, right: 0px, bottom: 0px, left: 1000px};*/
                /*font-style: italic;*/
            }

#title {
                font-family:helvetica;
                font-size: 12px;
                /*text-transform: uppercase;*/
            }

.x.label {
                font-family: helvetica;
                font-size: 10px;
            }

.y.label {
                font-family: helvetica;
                font-size: 10px;

}

</style>

</head>
    <body>
      	<p id="info">A visualization using <a href="https://selfiecity.net/">data published by selfiecity</a>.</p>
        
        <p id="click">—Click to update value range—</p><p id="click2">—Click to zoom in on new value range—</p>

<div id="tooltip" class="hidden">
            <p><strong>xy coordinates</strong></p>
            <p><span id="value">100</span>%</p>
        </div>

//static dataset
            var dataset = [ 
                [.6, .93], [.6, .92], [.58, .95], [.59, .90], [.60, .91]
                ];

//format tick labels

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]);

var rScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) {return d[1];} ) ])
                .range([2, 5]);

var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(5)

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]);})
                    //r: function(d) {return Math.sqrt(h - d[1]);}
                .attr("r", function(d) {return rScale(d[1]);})
                .append("title")
                .text(function(d) {
                    return "xy coordinates: " + d[0] + ", " + d[1];
                })

//Create SVG element tooltips
                .on("mouseover", function(d) {
                    //Get this bar's x/y values, then augment for the tooltip
                    var xPosition = parseFloat(d3.select(this).attr("cx")) + xScale.rangeBand() / 2;
                    var yPosition = parseFloat(d3.select(this).attr("cy")) + 14;

//Create the tooltip label
                    svg.append("text")
                        .attr("id", "tooltip")
                        .attr("x", xPosition)
                        .attr("y", yPosition)
                        .attr("text-anchor", "middle")
                        .attr("font-family", "sans-serif")
                        .attr("font-weight", "bold")
                        .attr("font-size", "11px")
                        .attr("fill", "black") 
                        .text(d);
                })
                .on("mouseout", function() {
                    //Remove the tooltip
                    d3.select("#tooltip").remove();
                });

//create X axis
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);

//label X axis
            svg.append("text")
                .attr("class", "x label")
                .attr("text-anchor", "end")
                .attr("x", w - 100)
                .attr("y", h - 60)
                .text("smile rating");

//create Y axis
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);
                
            svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("y", 60)
                .attr("dy", 10)
                .attr("x", -50)
                .attr("transform", "rotate(-90)")
                .text("confidence rating");

//1. On click, update with new data            
            d3.select("#click")
                .on("click", function() {
                    //New values for dataset
                    var numValues = dataset.length;                             
                    //Count original length of dataset
                    var maxRange = Math.random() * 1000;                        
                    //Max range of new values
                    dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54]
                    ];

//Update all circles
                    svg.selectAll("circle")
                       .data(dataset)
                       .transition()
                       .duration(1000)
                       .each("start", function () {
                            d3.select(this) // Selects 'this', the current element
                            //.transition() -- Will override first transition
                            //.duration(250)
                            .attr("fill", "#FFCC00")    //Sets fill of 'this' to magenta
                            .attr("r", 9);  //Sets radius of 'this' to 3
                       })
                       .attr("cx", function(d) {
                            return xScale(d[0]);
                       })
                       .attr("cy", function(d) {
                            return yScale(d[1]);
                       })
                       /*.each("end", function(){
                            d3.select(this)*/
                        .transition()
                        .duration(1000)
                        .attr("fill", "black")
                        .attr("r", 9);
                });
            
             //2. On click, update with new data            
            d3.select("#click2")
                .on("click", function() {
                    //New values for dataset
                    var numValues = dataset.length;                             
                    //Count original length of dataset
                    var maxRange = Math.random() * 1000;                        
                    //Max range of new values
                    dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54]
                    ];                                               
                    
                    //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 x-axis
                    svg.select(".x.axis")
                        .transition()
                        .ease("bounce")
                        .duration(1000)
                        .call(xAxis);

//Update y-axis
                    svg.select(".y.axis")
                        .transition()
                        .ease("bounce")
                        .duration(1000)
                        .call(yAxis);
                });

</script>
    </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js