Scatter Plot with Menus

This example demonstrates usage of a new library called d3-component and Redux to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set.

Built with blockbuilder.org

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

<!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;
      border-radius: 2px;
    }

</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.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: 960,
        height: 500 - 38,
        loading: true,
        margin: {top: 12, right: 12, bottom: 40, left: 50},
        x: "acceleration",
        y: "horsepower",
        color: "cylinders"
      };
      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_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 });
        },
        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