https://github.com/michael/ken-browser
Visual Knowledge Browser
https://github.com/michael/ken-browser
Last synced: over 1 year ago
JSON representation
Visual Knowledge Browser
- Host: GitHub
- URL: https://github.com/michael/ken-browser
- Owner: michael
- License: bsd-3-clause
- Created: 2012-06-16T20:57:17.000Z (about 14 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-10-01T07:14:43.000Z (over 10 years ago)
- Last Synced: 2024-10-11T12:15:40.581Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://michael.github.com/ken
- Size: 6.11 MB
- Stars: 32
- Watchers: 8
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ken
Ken is a visual browsing interface for exploring resources of different kinds. Here's how it looks like when a collection of NYTimes articles is visualized.
## Integrate With Your Own Data
Ken has been built for arbitrary data-sets. So you should use it to display your own collection of things. It does not matter if it's a set of projects, a list of publications or a selection of products your company offers.
Before digging into the details, here's some folks that have alredy integrated their data:
- [Casey A. Gollan](http://caseyagollan.com/public/ken/)
- [Politpressing in Russia](http://politpressing.org/)
### Check Out The Source Code
First off, you are encouraged to create your own fork on Github, in order to maintain your customized application of Ken. Once you have done that, just clone the fresh repo.
```bash
$ git clone git@github.com:your_user/ken.git
```
### Run Locally
When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. So in order to run Ken on your computer, you must have a local web server. For example, you can run Python's built-in server:
```bash
$ cd ken
$ python -m SimpleHTTPServer 8888 &
```
### Adjust The Data
By default Ken loads a static data-set, that can be found in `data/projects.json`. You can edit this file directly and make yourself comfortable with the data format.
Ken gets powered by a so called `Data.Collection` a simple data format, that can be exchanged as JSON. A data collection involves a `type` declaration and a sequence of `objects` that are instances of the specified type. However after you've made yourself familiar with the data format, it's time to create your own data file `data/my_projects`.
You can change the dataset that gets loaded by default by changing one line in index.html.
```js
window.app = new Application({ dataset: "data/my_projects.json"});
```
### Data Type
In order to use your own domain data, you need to justify the data type. A data type consists of a number of property declarations. Supposing your dataset contains keywords associated with each object, a property definition could look like this:
```js
...
"subjects": {
"name": "Keywords",
"type": "string",
"unique": false,
"meta": {
"facet": true,
"details": true
}
},
...
```
Property definitions are pretty straight forward, the key determines the internal property identifier. `name` is a human readable description of the property. `type` defines the allowed values for that property. It can be `string`, `number` or `boolean`. `unique` then specifies whether there can be one value `true` or multiple values `false` for that property. `facet` and `details` are specific to Ken. They define where a property should be exposed as a facet in the Ken interface, and if it should be shown in the details dialog.
### Data Objects
According to your type definition you can now populate the collection with concrete objects you wanna display. Here's an example of an object in our projects collection.
```js
...
{
"_id": "project-a",
"name": "Project A",
"keywords": ["3D Modelling", "Visualization"],
"locations": ["Linz", "Vienna", "London"],
"image": "http://example.com/image.png",
"abstract": "Project A is there to demonstrate how a visual knowledge browser can be populated with custom data"
}
...
```
### Predefined Properties
There are a number of required properties that are used by the Ken interface. Those are:
- `name` (required) - A human readable title of the object
- `abstract` (optional) - A short description (shown in the details panel)
- `website` (optional) - A URL pointing to an external webpage
- `image` (option) - A image URL idaelly 1:1 aspect ratio. Shown in the plot and on the detail page.
## Adjust Stylesheets
You can adjust the style of your knowledge browser.
- `stylesheets/style.css` - Contains the page layout
- `stylesheets/ken.css` - Contains the styles for the visualization
## Adjust Javascript
Feel free to touch the Javascript code as well and adapt to your needs. If you think your contribution could be useful for the main project, please submit a pull request via GitHub.
## Keep In Sync With The Original Repo
Make sure you pull in changes from the original repo from time to time, so you can utilize the latest features and benefit from bugfixes.
## Credits
Ken is a project by [Quasipartikel](http://quasipartikel.at), made possible by our friends at [Ravensbourne](http://www.rave.co.uk), who are sponsoring initial development.