❤
npm
Sign UpSign In

keyword-in-context

0.0.5 • Public • Published

Keyword-In-Context

A visualization that displays a keyword in context view given a text and a query. An example is show below with the query highlighted in red.

Keyword In Context Screenshot

Usage

There are two primary ways to use this component. Via script tags, which is suitable for beginners, or as a react component for those more experienced in web development.

Via Script Tags

To use the component via script tags. Download this repository and look in the dist folder. There are two files there of particular note

  • keyword_in_context.js - The component.

  • keyword_in_context.deps.js - The dependencies for the file above split out into a separate file.

All of these files are minified which may make them hard to read. So they all have corresponding source maps that end in .map.

You should copy both these files into your project.

Sample HTML file — This is your index.html or similar

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title></title>
  <script type="text/javascript" src="./keyword_in_context.deps.js"></script> 
  <script type="text/javascript" src="./keyword_in_context.js"></script> 
</head>
 
<body>
  <div id='main'></div>
</body>
 
<script type="text/javascript">
  // This config can be loaded from an external location using ajax.
  var config = {
    "contextSize": 20,
    "caseSensitive": false,
    "query": "",
    "limit": 100
  };
 
  // The data can be loaded from an external location.
  var data = [
    {
      "name": "Alice in Wonderland" ,
      "text": "Alice was beginning to get very tired of sitting by her sister"
    }
  ];
 
  // The container we will render our component into.
  var container = document.querySelector("#main");
 
  // What is the query text (the keyword we are looking for).
  var query = 'of';
 
  // Package it all up and call the show function
  var opts = {
    config: config,
    data: data,
    container: container,
    query: query
  }
  KeywordInContext.show(opts)
</script> 
</html>

You can open this file in your browser to see it in action, but you will probably want to move to using a webserver, a simple one is the one built into python python -m SimpleHTTPServer.

As a react component

This module is implemented as a react component and can be used as such. Example code below

<KeywordInContext
  caseSensitive={config.caseSensitive}
  contextSize={config.contextSize}
  text={data[0].text}
  query={query}
  limit={config.limit}
/>

You would most likely get the component via NPM using npm install keyword-in-context. Since the project is written in ES6 and React/JSX you will need a build system that can transpile these to ES5. We use webpack, see this repo and our webpack.config.js for guidance.

See below for documentation of parameters

Parameters

  • caseSensitive [Boolean]: Whether search is case sensitive.
  • contextSize [Integer]: The number of characters to display on either side of the match.
  • text [String]: The text to search.
  • query [String]: The text to search for.
  • limit Integer: Max number of matches to render.

Customization

CSS can be used to customize the display of this component and it is expected that you would use css to customize the component to fit in your context (e.g. constrain the height of the component). See this stylesheet for a sense of what styles you can define.

Dev Workflow

The project is written in ES6/ES2015 with React and JSX and uses webpack for building and webpack-dev-server during development.

These can be accessed via npm scripts

npm start - to start the server in dev mode (with a watcher). Go to localhost:8080/demo.html when this is running to start execution from html.html. You can change the value in sample_data and refresh to see a change in the vis.

npm run build-fast - execute the build without minification.

npm run build-all - execute the build.

See webpack.config.js and webpack.dev.config.js for details.

Readme

Keywords

none

Package Sidebar

Install

npm i keyword-in-context

Repository

github.com/learntextvis/keyword-in-context

Homepage

github.com/learntextvis/keyword-in-context#readme

Weekly Downloads

2

Version

0.0.5

License

MIT

Last publish

Collaborators

  • tafsiri
Try on RunKit
Report malware