Scatter Plot IMDB

This example creates a scatter plot with menus for X, Y, Z and color, and some animations. We can select features for X, Y, Z and color. We can also see the details of each point when mouse hovers over that point.

This data is of 1,000 most popular movies on IMDB in the last 10 years. .

This data set contains 1,000 most popular movies on IMDB in the last 10 years. Inspired by Stylized Scatter Plot with Color Legend.

Built with blockbuilder.org

forked from curran's block: Spinner with d3-component

forked from curran's block: Scatter Plot with Menus

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4"></script>
  <script src="https://unpkg.com/d3-component@3"></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: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      
    }

</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(),
          zScale = d3.scaleLinear(),
          colorScale = d3.scaleOrdinal()
      			.range(d3.schemeCategory10);

setTimeout(function (){ // Show off the spinner for a few seconds ;)
        d3.csv("auto-mpg.csv", type, function (data){
          actions.ingestData(data, numericColumns, ordinalColumns)
        });
      }, 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: 900,
        height: 400,
        loading: true,
        margin: {top: 10, right: 10, bottom: 36, left: 80},
        x: "Rating",
        y: "Votes",
        z: "Runtime",
        color: "Year"
      };
      switch (action.type) {
        case "INGEST_DATA":
          return Object.assign({}, state, {
            loading: false,
            data: action.data,
            numericColumns: action.numericColumns,
            ordinalColumns: action.ordinalColumns
          });
        case "SET_X":
          return Object.assign({}, state, { x: action.column });
        case "SET_Y":
          return Object.assign({}, state, { y: action.column });
        case "SET_Z":
          return Object.assign({}, state, { z: action.column });
        case "SET_COLOR":
          return Object.assign({}, state, { color: action.column });
        default:
          return state;
      }
    }
    
    function actionsFromDispatch(dispatch){
      return {
        ingestData: function (data, numericColumns, ordinalColumns){
          dispatch({
            type: "INGEST_DATA",
            data: data,
            numericColumns: numericColumns,
            ordinalColumns: ordinalColumns
          });
        },
        setX: function (column){
          dispatch({ type: "SET_X", column: column });
        },
        setY: function (column){
          dispatch({ type: "SET_Y", column: column });
        },
        setZ: function (column){
          dispatch({ type: "SET_Z", 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

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

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

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