Skip to content

Commit

Permalink
[all] Fixes paths in README.md, updates v3 changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
jacomyal committed Dec 13, 2023
1 parent 0ceb406 commit b92caed
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 16 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -6,6 +6,7 @@

- **Completely rewrites programs API**
- **Renames all existing programs**
- **Restructures sources as a multipackage repository (using [Lerna](https://lerna.js.org/))**
- **Moves `labelRenderer`, `hoverRenderer` and `edgeLabelRenderer` from settings to each renderer**

### Features
Expand Down
36 changes: 20 additions & 16 deletions README.md
Expand Up @@ -18,7 +18,7 @@ Graphology website offers [a list](https://graphology.github.io/standard-library

Sigma.js uses **WebGL** to render graphs. This makes it good at rendering medium to larger graphs in web pages (thousands of nodes and edges or more). It is also possible to customize rendering, but it is harder than it would be with SVG or Canvas based solutions.

Each way to draw a node or an edge is implemented as a `program`. You can develop your own, or use the owns provided by sigma. You can check [this example](https://github.com/jacomyal/sigma.js/tree/main/examples/custom-rendering/index.ts) to see how to use multiple programs. Also, you can check the list of available programs [here](https://github.com/jacomyal/sigma.js/tree/main/src/rendering/webgl/programs).
Each way to draw a node or an edge is implemented as a `program`. You can develop your own, or use the owns provided by sigma. You can check [this example](https://github.com/jacomyal/sigma.js/tree/main/packages/examples/custom-rendering/index.ts) to see how to use multiple programs. Also, you can check the list of available programs [here](https://github.com/jacomyal/sigma.js/tree/main/packages/sigma/src/rendering/webgl/programs).

## Installation

Expand All @@ -30,30 +30,30 @@ npm install graphology sigma

## Examples

The [`examples`](https://github.com/jacomyal/sigma.js/tree/main/examples) folder contains a series of self-contained TypeScript projects that you can either browse and edit on [CodeSandbox](https://codesandbox.io/) or install locally likewise:
The [`examples`](https://github.com/jacomyal/sigma.js/tree/main/packages/examples) folder contains a series of self-contained TypeScript projects that you can either browse and edit on [CodeSandbox](https://codesandbox.io/) or install locally likewise:

```bash
git clone git@github.com:jacomyal/sigma.js.git
cd sigma.js
npm install
cd examples
cd packages/examples
npm start --example=load-gexf-file # Change this to the desired example
```

_List of available examples_

- [Fetching and displaying a graph contained in a gexf file](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/load-gexf-file) ([fallback link](https://sigmajs.org/examples/load-gexf-file))
- [Using node & edge reducers to handle interactivity](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/use-reducers) ([fallback link](https://sigmajs.org/examples/use-reducers))
- [Fetching, parsing & wrangling a CSV file to create a network map](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/csv-to-network-map) ([fallback link](https://sigmajs.org/examples/csv-to-network-map))
- [Handling drag and drop of nodes as well as node & edge creation on click](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/mouse-manipulations) ([fallback link](https://sigmajs.org/examples/mouse-manipulations))
- [Displaying arbitrary elements, such as cluster labels, synchronized with the network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/clusters-labels) ([fallback link](https://sigmajs.org/examples/clusters-labels))
- [Applying different animated layout algorithms to a network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/layouts) ([fallback link](https://sigmajs.org/examples/layouts))
- [Displaying nodes in various custom ways](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/custom-rendering) ([fallback link](https://sigmajs.org/examples/custom-rendering))
- [Saving the graph as a PNG image](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/png-snapshot) ([fallback link](https://sigmajs.org/examples/png-snapshot))
- [Use events to implement interactions](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/events) ([fallback link](https://sigmajs.org/examples/events))
- [See how sigma behaves with larger graphs](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/large-graphs) ([fallback link](https://sigmajs.org/examples/large-graphs))
- [Fetching and displaying a graph contained in a gexf file](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/load-gexf-file) ([fallback link](https://sigmajs.org/examples/load-gexf-file))
- [Using node & edge reducers to handle interactivity](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/use-reducers) ([fallback link](https://sigmajs.org/examples/use-reducers))
- [Fetching, parsing & wrangling a CSV file to create a network map](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/csv-to-network-map) ([fallback link](https://sigmajs.org/examples/csv-to-network-map))
- [Handling drag and drop of nodes as well as node & edge creation on click](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/mouse-manipulations) ([fallback link](https://sigmajs.org/examples/mouse-manipulations))
- [Displaying arbitrary elements, such as cluster labels, synchronized with the network](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/clusters-labels) ([fallback link](https://sigmajs.org/examples/clusters-labels))
- [Applying different animated layout algorithms to a network](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/layouts) ([fallback link](https://sigmajs.org/examples/layouts))
- [Displaying nodes in various custom ways](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/custom-rendering) ([fallback link](https://sigmajs.org/examples/custom-rendering))
- [Saving the graph as a PNG image](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/png-snapshot) ([fallback link](https://sigmajs.org/examples/png-snapshot))
- [Use events to implement interactions](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/events) ([fallback link](https://sigmajs.org/examples/events))
- [See how sigma behaves with larger graphs](https://githubbox.com/jacomyal/sigma.js/tree/main/packages/examples/large-graphs) ([fallback link](https://sigmajs.org/examples/large-graphs))

Also, a more realistic sigma.js based web application is available in the [`demo`](https://github.com/jacomyal/sigma.js/tree/main/demo) folder. It aims to show a real-world usecase, and is the main showcase of [sigma.js website](https://www.sigmajs.org/).
Also, a more realistic sigma.js based web application is available in the [`demo`](https://github.com/jacomyal/sigma.js/tree/main/packages/demo) folder. It aims to show a real-world usecase, and is the main showcase of [sigma.js website](https://www.sigmajs.org/).

## Testing

Expand All @@ -72,6 +72,8 @@ If at some point, you actually have a good reason to break some screenshots, you
You can run the benchmark scenarii by running:

```bash
cd path/to/sigma.js
cd packages/sigma
npm run e2e:benchmark -- --filename my-report.json
```

Expand All @@ -80,16 +82,18 @@ This will generate a JSON report at `test/e2e/reports/my-report.json`.
Then, you can compare it to some reference report, by running:

```bash
cd path/to/sigma.js
cd packages/sigma
npm run e2e:compare-benchmarks -- --reference test/e2e/reports/reference-report.json --report test/e2e/reports/my-report.json
```

## Website

The current website is based on [Docusaurus](https://docusaurus.io/), with a static homepage. It is located in the `website` folder. It also showcases the React.js based demo available in the [`demo`](https://github.com/jacomyal/sigma.js/tree/main/demo) folder in an iframe. The website itself does not need any build step, though the demo does.
The current website is based on [Docusaurus](https://docusaurus.io/), with a static homepage. It is located in the `website` folder. It also showcases the React.js based demo available in the [`demo`](https://github.com/jacomyal/sigma.js/tree/main/packages/demo) folder in an iframe. The website itself does not need any build step, though the demo does.

The homepage and identity have been kindly designed by [Robin de Mourat](https://github.com/robindemourat/) from the [Sciences-Po médialab](https://medialab.sciencespo.fr/en/) team.

Read the dedicated [README](https://github.com/jacomyal/sigma.js/tree/main/website) to know more on how to build it.
Read the dedicated [README](https://github.com/jacomyal/sigma.js/tree/main/packages/website) to know more on how to build it.

## Contributing

Expand Down

0 comments on commit b92caed

Please sign in to comment.