Scatter Plot with Menus

The data is from World Happiness Report 2018. This is an overview of the data. With the changes of X and Y axes, one can have a view on the correlation between indices.

Built with blockbuilder.org

forked from Curran's blog

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4.10.0/build/d3.js"></script>
  <script src="https://unpkg.com/d3-component@3.0"></script>
  <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
  <script src="https://unpkg.com/d3-tip@0.7.1"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
  <style>
    .point {
      fill: currentColor;
      stroke: currentColor;
      fill-opacity: 0.3;
    }

/* Tooltip styles copied from
    		https://bl.ocks.org/Caged/6476579 */
    .d3-tip {
      line-height: 1;
      padding: 8px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 12px;
      border-radius: 2px;
    }
    h4 {
      font-size: 18px;
    }

</style>
</head>
<body>
  
  <script>

// This stateless component renders a static "wheel" made of circles,
    // and rotates it depending on the value of props.angle.
    var wheel = d3.component("g")
      .create(function (selection){
        var minRadius = 4,
            maxRadius = 10,
            numDots = 10,
            wheelRadius = 40,
            rotation = 0,
            rotationIncrement = 3, 
            radius = d3.scaleLinear()
              .domain([0, numDots - 1])
              .range([maxRadius, minRadius]),
            angle = d3.scaleLinear()
              .domain([0, numDots])
              .range([0, Math.PI * 2]);
        selection
          .selectAll("circle").data(d3.range(numDots))
          .enter().append("circle")
            .attr("cx", function (d){ return Math.sin(angle(d)) * wheelRadius; })
            .attr("cy", function (d){ return Math.cos(angle(d)) * wheelRadius; })
            .attr("r", radius);
      })
      .render(function (selection, d){
        selection.attr("transform", "rotate(" + d + ")");
      });
    
    // This component with a local timer makes the wheel spin.
    var spinner = (function (){
      var timer = d3.local();
      return d3.component("g")
        .create(function (selection, d){
          timer.set(selection.node(), d3.timer(function (elapsed){
            selection.call(wheel, elapsed * d.speed);
          }));
        })
        .render(function (selection, d){
          selection.attr("transform", "translate(" + d.x + "," + d.y + ")");
        })
        .destroy(function(selection, d){
          timer.get(selection.node()).stop();
        	return selection
          		.attr("fill-opacity", 1)
          	.transition().duration(3000)
          		.attr("transform", "translate(" + d.x + "," + d.y + ") scale(10)")
          		.attr("fill-opacity", 0);
        });
    }());
    
    var axis = (function (){
      var axisLocal = d3.local();
      return d3.component("g")
      	.create(function (selection, d){
        	axisLocal.set(selection.node(), d3["axis" + d.type]());
          selection
            	.attr("opacity", 0)
              .call(axisLocal.get(selection.node())
                .scale(d.scale)
                .ticks(d.ticks || 10))
            .transition("opacity").duration(2000)
          	  .attr("opacity", 0.8);
        })
      	.render(function (selection, d){
        	selection
              .attr("transform", "translate(" + [
            		d.translateX || 0,
            		d.translateY || 0
          		] + ")")
            .transition("ticks").duration(3000)
          		.call(axisLocal.get(selection.node()));
        });
    }());
    
// This component displays the visualization.
    var scatterPlot = (function (){
      
      
      var xScale = d3.scaleLinear(),
          yScale = d3.scaleLinear(),          
          colorScale = d3.scaleLinear();

setTimeout(function (){ // Show off the spinner for a few seconds ;)
        d3.csv("WHR18fig22.csv", type, function (data){
          actions.ingestData(data, numericColumns)
        });
      }, 2000);
      
      function type(d){
        return numericColumns.reduce(function (d, column){
          d[column] = + d[column];
          return d;
        }, d);
      }
    }
    
    function reducer (state, action){
      var state = state || {
        width: 960,
        height: 500 - 38,
        loading: true,
        margin: {top: 12, right: 12, bottom: 40, left: 50},
        happycolor: "happinessScore",        
        x: "rank",
        y: "happinessScore",
        color: "happinessScore"
      };
      switch (action.type) {
        case "INGEST_DATA":
          return Object.assign({}, state, {
            loading: false,
            data: action.data,
            numericColumns: action.numericColumns
          });
        case "SET_X":
          return Object.assign({}, state, { x: action.column });
        case "SET_Y":
          return Object.assign({}, state, { y: action.column });
        case "SET_COLOR":
          return Object.assign({}, state, { color: action.column });
        default:
          return state;
      }
    }
    
    function actionsFromDispatch(dispatch){
      return {
        ingestData: function (data, numericColumns){
          dispatch({
            type: "INGEST_DATA",
            data: data,
            numericColumns: numericColumns
          });
        },
        setX: function (column){
          dispatch({ type: "SET_X", column: column });
        },
        setY: function (column){
          dispatch({ type: "SET_Y", column: column });
        },
        setColor: function (column){
          dispatch({ type: "SET_COLOR", column: column });
        }
      };
    }
    
    function main(){
      var store = Redux.createStore(reducer),
          actions = actionsFromDispatch(store.dispatch);
          renderApp = function(){
            d3.select("body").call(app, store.getState(), actions);
          }
      renderApp();
      store.subscribe(renderApp);
      loadData(actions);
    }
    main();
  </script>
</body>

https://unpkg.com/d3@4.10.0/build/d3.js

https://unpkg.com/d3-component@3.0

https://unpkg.com/redux@3/dist/redux.min.js

https://unpkg.com/d3-tip@0.7.1