recharts#ScatterChart JavaScript Examples

The following examples show how to use recharts#ScatterChart. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ScatterCharts.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up 
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>
  );
})
Example #2
Source File: TimeChart.js    From study-chain with MIT License 6 votes vote down vote up 
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>
)
Example #3
Source File: PlotKNN.js    From Otto with MIT License 5 votes vote down vote up 
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 />
      )}
    </>
  );
}
Example #4
Source File: StateIndiaMostConfirmed.js    From covid-19 with MIT License 4 votes vote down vote up 
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>
    );
}