react-seda-scatterplot React component

Usage no npm install needed!

<script type="module">
  import reactSedaScatterplot from '';


React SEDA Scatterplot Component

Travis npm package

React component for displaying a scatterplot loaded from CSV data.


Pass x, y, and optional z variable for sizing dots. Provide a prefix to specify the region (counties, districts, or schools)



The following props can be passed to the scatterplot component:

  • endpoint string required URL to the endpoint with CSV data
  • xVar: string variable name to use for x axis
  • yVar: string variable name to use for y axis
  • zVar: string variable name to use for z axis (circle size)
  • prefix: string prefix for fetching files (corresponds to region)
  • baseVars: object a map of { [prefix]: ['var1', 'var2', 'var3', ... ]} to indicate which variables are available in the {prefix}-base.csv file.
  • options: object option overrides
  • hovered: string identifier for item to highlight
  • highlighted: array list of highlighted dot identifiers
  • selected: array list of selected dot identifiers
  • selectedColors: array list of colors to use for selected dots
  • data: object data to pass to the scatterplot, if no data is passed it will load from the endpoint
  • theme: object|string theme object or string for echart
  • classes: object allows passing of classes to child elements (e.g. { 'error': 'scatterplot-errror' })
  • onHover: func event handler for when dot is hovered
  • onClick: func event handler for when dot is clicked
  • onReady: func event handler for when chart is ready
  • onMouseMove: func event handler for when mouse moves on dot
  • onDataLoaded: func event handler for when new scatterplot data loads
  • onError: func event handler for errors
  • onLoading: func event handler for loading status

Component Ref

The following attributes and methods are available if you get a ref or the component.



  • getData(): gets the scatterplot data in the component state
  • getDataSeries(id): gets a data series in the echarts options with the corresponding id
  • getOption(): alias for echarts getOption
  • setOption(options): alias for echart setOption

SEDA Scatterplot Variables

The SEDA scatterplot data is available at this endpoint:

The following variables can be passed as xVar, yVar, or zVar and will be fetched from the endpoint. Most variable names are strings formatted as {demographic}_{metric}. For example, to get average test scores for black students the variable name would be b_avg


  • avg: average test scores
  • grd: growth over years
  • coh: trend over years
  • ses: socioeconomic status (counties and districts only)
  • seg: segregation measure (counties and districts only)
  • pct: percent of paired demographic (e.g. w_pct = percent of white students)


  • all: all students
  • w: white students
  • b: black students
  • h: hispanic students
  • a: asian students
  • p: poor students
  • m: male students
  • f: female students
  • p: poor students
  • np: non-poor students
  • frl: students qualifying for free or reduced lunch program (schools only)
  • wb: white/black gap
  • wh: white/hispanic gap
  • wa: white/asian gap
  • pn: poor/non-poor gap
  • mf: male/female gap

General Variables

In addition to the metric/demographic variables, the following variables exist and apply to all demographics:

  • all_sz: number of students for the region (county, districts, schools)

Custom Endpoints

This component can be used with any data by creating your own endpoint. The endpoint is a URL that contains CSV files for individual variables. CSV files should follow the naming format:


Note: You can leave out the prefix if you are only showing one category of data. ({varName}.csv)

CSV files should have the following data format: