scatterplot menus with d3-component | radius select

an example that separates concerns a bit with functions in different files

nice point sizing with a square root radius scale from the block ES2015 Voronoi Scatterplot with bootstrap-native popover tooltip from @micahstubbs

find a nice commit history at the companion repo

an iteration scatterplot menus with d3-component | es2015 from @micahstubbs

now with a new dimension to toggle: mark size (radius)

an es2015 iteration on the block Scatter Plot with Menus from @currankelleher

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.

Built with blockbuilder.org

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

forked from micahstubbs's block: scatterplot menus with d3-component | radius select

forked from yifancui's block: scatterplot menus with d3-component | radius select

<!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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
  <link rel='stylesheet' href='https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css'>
  <style>
    .point {
      fill: currentColor;
    }

/* 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 src='wheel.js'></script>
  <script src='spinner.js'></script>
  <script src='axis.js'></script>
  <script src='scatterplot.js'></script>
  <script src='tooltip.js'></script>
  <script src='page.js'></script>
  <script src='loadData.js'></script>
  <script src='reducer.js'></script>
  <script src='actionsFromDispatch.js'></script>
  <script src='vis.js'></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

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js