recharts#Scatter JavaScript Examples

ScatterCharts = observer(() => {
  return (
    <div>
      <ScatterChart
        width={730}
        height={250}
        margin={{ top: 20, right: 20, bottom: 10, left: 10 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="x" name="stature" unit="cm" />
        <YAxis dataKey="y" name="weight" unit="kg" />
        <ZAxis dataKey="z" range={[64, 144]} name="score" unit="km" />
        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
        <Legend />
        <Scatter name="A school" data={data01} fill="#8884d8" />
        <Scatter name="B school" data={data02} fill="#82ca9d" />
      </ScatterChart>
    </div>
  );
})

TimeChart = ({ chartData, classes }) => (
  <div>
    <Card>
      <CardContent className={classes.content}>
        <ResponsiveContainer width="100%" height={255}>
          <ScatterChart>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="datetime" className="datetime" />
            <YAxis domain={[0, chartData.dataMax]} dataKey="count" />
            <Tooltip cursor={{ strokeDasharray: '3 3' }} />
            <Scatter
              className="datetime"
              data={chartData.displayData}
              line={{}}
            />
          </ScatterChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  </div>
)

export default function PlotKNN() {
  const { model_state } = useModelState();
  const data = createPlotData(model_state);
  const columns = model_state.knn_columns;
  const columnMap = model_state.knn_columns_map;
  const xAxisColumn = columnMap[columns[model_state.knn_column1_index]];
  const yAxisColumn = columnMap[columns[model_state.knn_column2_index]];

  return (
    <>
      {!model_state.viz_loading ? (
        <ResponsiveContainer
          className="graph-wrapper"
          width="100%"
          height="100%"
        >
          <ScatterChart
            margin={{
              top: 20,
              right: 20,
              bottom: 20,
              left: 20,
            }}
          >
            <CartesianGrid />
            <XAxis
              type="number"
              dataKey="x"
              name={xAxisColumn}
              unit={
                model_state.knn_column_units
                  ? model_state.knn_column_units[model_state.knn_column1_index]
                  : ""
              }
            >
              <Label value={xAxisColumn} position="insideBottom" offset={-12} />
            </XAxis>
            <YAxis
              type="number"
              dataKey="y"
              name={yAxisColumn}
              unit={
                model_state.knn_column_units
                  ? model_state.knn_column_units[model_state.knn_column2_index]
                  : ""
              }
            >
              <Label value={yAxisColumn} angle={-90} position="insideLeft" />
            </YAxis>
            <Tooltip cursor={{ strokeDasharray: "3 3" }} />
            <Legend verticalAlign="top" height={36} />
            {model_state.knn_labels.map((label, index) => (
              <Scatter
                name={label}
                data={data[index]}
                fill={fillColors[index]}
                shape={shapeTypes[index]}
                key={index}
              />
            ))}
          </ScatterChart>
        </ResponsiveContainer>
      ) : (
        <LoadingComponent />
      )}
    </>
  );
}

export default function PlotLinReg() {
  const { model_state } = useModelState();
  const { linreg_test_result, linreg_test_set } = model_state;
  const { state } = useState();

  const data = [];
  linreg_test_set.map((point, index) => {
    if (linreg_test_result[index][1] >= 0) {
      data.push({
        x: point[0],
        scatter: point[1],
        line: linreg_test_result[index][1],
      });
    }
  });
  data.sort(compareX);

  return (
    <>
      {!model_state.viz_loading ? (
        <ResponsiveContainer
          className="graph-wrapper"
          width="100%"
          height="100%"
        >
          <ComposedChart
            data={data}
            margin={{
              top: 20,
              right: 20,
              bottom: 20,
              left: 20,
            }}
          >
            <CartesianGrid />
            <XAxis dataKey="x" name={model_state.linreg_x_name} type="number">
              <Label
                value={model_state.linreg_x_name}
                position="insideBottom"
                offset={-12}
              />
            </XAxis>
            <YAxis
              unit={state.sample_dataset === SampleDataset.BOSTON ? "k$" : ""}
              name={model_state.linreg_y_name}
              type="number"
            >
              <Label
                value={model_state.linreg_y_name}
                angle={-90}
                position="insideLeft"
              />
            </YAxis>
            <Tooltip cursor={{ strokeDasharray: "3 3" }} />
            <Legend verticalAlign="top" height={36} />
            <Scatter name="Test Data" dataKey="scatter" fill="#e06aa6" />
            <Line
              dataKey="line"
              name="Line of Best Fit (Train Data)"
              stroke="#5D5DE1"
              dot={false}
            />
          </ComposedChart>
        </ResponsiveContainer>
      ) : (
        <LoadingComponent />
      )}
    </>
  );
}

StateIndiaMostConfirmed = props => {
    const MIN_CASES_TO_SHOW = 200;
    const data = props.data;

    let filteredData = data.filter(elem => {
        return elem.active > MIN_CASES_TO_SHOW;
    });

    let refinedData = [];
    filteredData.forEach(element => {
        let obj = {};
        obj['State'] = element['state'];
        obj['State Code'] = INDIA_STATE_CODES[element['state']];
        obj['Confirmed'] = element['confirmed'];
        obj['Active'] = element['active'];
        obj['Deaths'] = element['deaths'];
        obj['Recovered'] = element['recovered'];
        obj['New Case(Today)'] = element['deltaconfirmed'];
        obj['New Deaths(Today)'] = element['deltadeaths'];
        obj['New Recovery(Today)'] = element['deltarecovered'];
        refinedData.push(obj);
    });

    const parseDomain = () => {
        return [
          0,
          Math.max.apply(null, [
            ...refinedData.map(entry => entry.Active)
          ])
        ];
    };
      
    let domain = parseDomain();
    const range = [1, domain[1]];
    domain[1] = domain[1] * 2;
    
    console.log(domain);
    console.log(range);
    

    const CustomTooltip = ({ active, payload, label }) => {
        if (active) {
          return (
            <div className="custom-tooltip">
                <p className="label">{`${payload[0].payload.State}`}: {`${payload[0].payload.Confirmed}`} Confirmed</p>
                <p className="intro">
                    {`Active Cases: ${payload[0].payload.Active}`}<br />
                    {`Total Deaths: ${payload[0].payload.Deaths}`}<br />
                    {`Total Recovered: ${payload[0].payload.Recovered}`}<br />
                    <b>Today</b><br />
                    {`New Cases: ${payload[0].payload['New Case(Today)']}`}<br />
                    {`New Deaths: ${payload[0].payload['New Deaths(Today)']}`}<br />
                    {`New Recoveries: ${payload[0].payload['New Recovery(Today)']}`}
                </p>
            </div>
          );
        }
      
        return null;
    };

    return (
        <Card>
            <Card.Body>
                <Card.Title>State: Most Affected(Minimum {MIN_CASES_TO_SHOW} Active Cases)</Card.Title>
                <Card.Subtitle className="mb-2 text-muted">
                    States with most number of Active cases.
                </Card.Subtitle>
                <ResponsiveContainer width='100%' height={350}>
                    <ScatterChart  margin={{
                            top: 30, right: 0, left: 0, bottom: 5,
                    }} >
                    <CartesianGrid />
                    <XAxis dataKey={'State Code'} name='State' />
                    <YAxis dataKey={'Active'} type="number"  domain={domain} range={range} name='Active' />
                    <ZAxis type="number" dataKey={'Active'} domain={domain} range={range} />
                    <Scatter name='COVID-19 India' data={refinedData} fill='#B96666' />
                    <Tooltip 
                        cursor={{strokeDasharray: '3 3'}} 
                        wrapperStyle={{ zIndex: 100 }} 
                        content={<CustomTooltip />} />
                    </ScatterChart>
                </ResponsiveContainer>
            </Card.Body>
        </Card>
    );
}