examples/many-circles/src/Circles.js
function visProps(props) {
  const {
    data,
    height,
    width,
  } = props;

  const padding = {
    top: 20,
    right: 20,
    bottom: 40,
    left: 50,
  };

  const plotAreaWidth = width - padding.left - padding.right;
  const plotAreaHeight = height - padding.top - padding.bottom;

  const xDomain = d3.extent(data, d => d.x);
  const yDomain = d3.extent(data, d => d.y);
  const xDomainPadding = 0.05 * xDomain[1];
  const yDomainPadding = 0.02 * yDomain[1];

  const xScale = d3.scaleLinear()
    .domain([xDomain[0] - xDomainPadding, xDomain[1] + xDomainPadding])
    .range([0, plotAreaWidth]);

  const yScale = d3.scaleLinear()
    .domain([yDomain[0] - yDomainPadding, yDomain[1] + yDomainPadding])
    .range([plotAreaHeight, 0]);

  const color = ({ y }) => `rgb(150, 200, ${Math.floor(255 * (yScale(y) / plotAreaHeight))})`;


  const voronoiDiagram = d3.voronoi()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y))
    .size([plotAreaWidth, plotAreaHeight])(data);

  return {
    color,
    padding,
    plotAreaWidth,
    plotAreaHeight,
    xScale,
    yScale,
    voronoiDiagram,
  };
}
function visProps(props) {
  const {
    data,
    height,
    width,
  } = props;

  const padding = {
    top: 20,
    right: 20,
    bottom: 40,
    left: 50,
  };

  const plotAreaWidth = width - padding.left - padding.right;
  const plotAreaHeight = height - padding.top - padding.bottom;

  const xDomain = d3.extent(data, d => d.x);
  const yDomain = d3.extent(data, d => d.y);
  const xDomainPadding = 0.05 * xDomain[1];
  const yDomainPadding = 0.02 * yDomain[1];

  const xScale = d3.scaleLinear()
    .domain([xDomain[0] - xDomainPadding, xDomain[1] + xDomainPadding])
    .range([0, plotAreaWidth]);

  const yScale = d3.scaleLinear()
    .domain([yDomain[0] - yDomainPadding, yDomain[1] + yDomainPadding])
    .range([plotAreaHeight, 0]);

  const color = ({ y }) => `rgb(150, 200, ${Math.floor(255 * (yScale(y) / plotAreaHeight))})`;


  const voronoiDiagram = d3.voronoi()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y))
    .size([plotAreaWidth, plotAreaHeight])(data);

  return {
    color,
    padding,
    plotAreaWidth,
    plotAreaHeight,
    xScale,
    yScale,
    voronoiDiagram,
  };
}
function visProps ( props ) { const { data , height , width , } = props ; const padding = { top : 20 , right : 20 , bottom : 40 , left : 50 , } ; const plotAreaWidth = width - padding . left - padding . right ; const plotAreaHeight = height - padding . top - padding . bottom ; const xDomain = d3 . extent ( data , d => d . x ) ; const yDomain = d3 . extent ( data , d => d . y ) ; const xDomainPadding = 0.05 * xDomain [ 1 ] ; const yDomainPadding = 0.02 * yDomain [ 1 ] ; const xScale = d3 . scaleLinear ( ) . domain ( [ xDomain [ 0 ] - xDomainPadding , xDomain [ 1 ] + xDomainPadding ] ) . range ( [ 0 , plotAreaWidth ] ) ; const yScale = d3 . scaleLinear ( ) . domain ( [ yDomain [ 0 ] - yDomainPadding , yDomain [ 1 ] + yDomainPadding ] ) . range ( [ plotAreaHeight , 0 ] ) ; const color = ( { y } ) => ` ${ Math . floor ( 255 * ( yScale ( y ) / plotAreaHeight ) ) } ` ; const voronoiDiagram = d3 . voronoi ( ) . x ( d => xScale ( d . x ) ) . y ( d => yScale ( d . y ) ) . size ( [ plotAreaWidth , plotAreaHeight ] ) ( data ) ; return { color , padding , plotAreaWidth , plotAreaHeight , xScale , yScale , voronoiDiagram , } ; }
Figure out what is needed to render the chart based on the props of the component
Figure out what is needed to render the chart based on the props of the component