Newline Pending Merge


    1.0.2 • Public • Published

    React K-Nearest-Neighbor Component

    React component building a k-Nearest Neighbor graph, allowing for input data, and size (height + width) to be specified. You can then interactively add additional data which has yet to be classified, and see the algorithm in action!

    Getting Started

    Importing a data visualization in React has never been so easy! Just install the module:

    npm install react-knn-component

    Then, proceed to import and use the component, remembering to pass in the necessary props:

    import KNearestNeighbors from 'react-knn-component';
    //example data: 
    const data = [{x: 32, y: 40, identity: 1},
                  {x: 5, y: 27, identity: 0},
                  {x: 17, y: 9, identity: 0}]
    render() {
      return (
          <KNearestNeighbors h='300' w='300' training={data}/>

    result will be a beautifully unopinionated graph!


    /*Customizable settings with defaults shown:*/
      colors={['mediumturquoise', 'crimson', 'cornflowerblue']} 
      x_input_text={'CA15-3 in U/mL'}
      y_input_text={'CA27-29 in U/mL'}
    • h/w: set height and width attributes, respectively, with the default of both set to 600 pixels.
      • the preclassified data given to the component will be scaled such that every x and y value from the set is rendered on the graph, regardless of its dimensions.
    • colors: add an array of colors which will correspond with the various identities within the dataset. There needs to be at least as many colors in the array passed in as there are different identities in the training data.
      • if the dataset has four distinct possible categories, then the array should have at least four colors.
      • the first color will be applied to all points of data falling into the first category of identities, likewise, the second colors is applied the the second category, and so on. [Keep in mind the first index in an array is zero(0)]
    • input_halo: a boolean indicating whether the input data, that is, that data that needs to be classified, should have a circle drawn around it with a radius equal to the farthest neighbor used to classify it. Set to true by default.
    • {x||y}_placeholder_text: placeholder text for the input bars.
    • background_color: customize background color, use any applicable CSS-valid color string
      • i.e. html string colors, rgb, or hex notation acceptable.
    • opacity: determines how invisible your graph is! By default is set to one, but accepts stringified number inputs between 0.0 and 1.0
    • border_width: indicates the stroke-width of the border around the graph. Without a passed prop, it defaults to 4px.

    Built With

    • D3 - Data driven documents: visualization tool
    • React - Frontend framework
    • Babel - Transpiles code to run in the browser



    This project is licensed under the MIT License - see the file for details


    npm i react-knn-component

    DownloadsWeekly Downloads






    Last publish


    • foryourthoughts