rawgraphs-versus
Advanced tools
rawgraphs-versus - npm Package Compare versions
Comparing version 0.4.2 to 0.4.3
| { | ||
| "name": "rawgraphs-versus", | ||
| "version": "v0.4.2", | ||
| "version": "v0.4.3", | ||
| "description": "Versus visual model", | ||
@@ -5,0 +5,0 @@ "jsdelivr": "lib/index.umd.js", |
@@ -1,8 +0,8 @@ | ||
| # <img src="https://github.com/rawgraphs/rawgraphs-versus/blob/master/src/versus/versus.svg" alt="versus icon" height="40px" style="vertical-align: middle"/> Versus: a custom RAWGraphs chart | ||
| # Versus: a custom RAWGraphs chart <img src="https://github.com/rawgraphs/rawgraphs-versus/blob/master/src/versus/versus.svg" alt="versus icon" height="40px" style="vertical-align: middle"/> | ||
| **WARNING: the chart works with the [development version of RAWGraphs](dev.rawgraphs.io), currently available only on invite.** | ||
| This custom chart is intedend to be used in https://app.rawgraphs.io/. | ||
| <img src="https://raw.githubusercontent.com/rawgraphs/rawgraphs-versus/master/src/versus/versus_thumb.svg" alt="versus icon" height="100%" style="text-align: center"/> | ||
| The chart is inspired by a research done at DensityDesign Lab (https://densitydesign.org/research/versus/) and then refined in a tool called PoliMatter (https://densitydesign.github.io/Polimatters/). | ||
| The chart is inspired by a [research done at DensityDesign Lab](https://densitydesign.org/research/versus/) and then refined in a tool called [PoliMatter](https://densitydesign.github.io/Polimatters/). | ||
@@ -17,8 +17,53 @@ The visual model displays bipartite graphs (composed by two kinds of nodes) in which one set acts as "attractors" and are dsitributed on a cicle, and the other set of nodes is disposed according to the strength of connections to the attractors. | ||
| * Open https://dev.rawgraphs.io/ | ||
| * Upload your dataset, or upload [this sample dataset for Versus](https://raw.githubusercontent.com/rawgraphs/rawgraphs-versus/master/example/datasets/five-categories.csv) | ||
| * Scroll down the visual models list, click on `"Add your Chart!"` | ||
| * In the popup window `Add a new custom chart`, upload the `versus.umd.js` | ||
| * Enjoy! | ||
| * Upload your dataset, or upload [this sample dataset for Versus](https://raw.githubusercontent.com/rawgraphs/rawgraphs-versus/master/example/datasets/five-categories.csv). | ||
| - Scroll down the visual models list, click on `Load yout chart` | ||
| - In the popup window `Add a new custom chart`, upload the `versus.umd.js` file | ||
| - Click on `Load your chart` button. | ||
| - A pop-up will inform you that you are loading an external piece of code, click on `continue` to load it. | ||
| - You are now ready to use the chart. | ||
| ## Tutorial | ||
| In this tutorial we'll show wich keywords are used in design theses at Politecnico di Milano, and their usage across different MSc courses. | ||
| #### Dataset | ||
| In [RAWgraphs interface](https://app.rawgraphs.io/), load the dataset you can find at [this link](https://raw.githubusercontent.com/rawgraphs/rawgraphs-versus/master/example/datasets/polimi-design-keywords.tsv). You can download it and upload in RAWGraphs interface, or load it derecly in RAWGraphs using the `from URL` section in the interface. | ||
| The dataset contains three columns: the age group, number of male people, and number of female people for that age group. | ||
| #### Chart Selection | ||
| select "Versus". If you don't see it, read the section [Installation](#Installation). | ||
| #### Mapping | ||
| Drag and drop the dimensions to the chart variables as it follows: | ||
| - `MSc Course` on `Groups` | ||
| - `Keyword` on `Item` | ||
| - `Number of theses` on `Strength` | ||
| #### Customize | ||
| The chart offers some options to customize the chart. | ||
| In the **Artboard** section you can mange the overall artboard. | ||
| * Increase **Width** and **Height** to `1000` px. | ||
| In the **Chart** section you can define the size of items and groups circles, apply an anti-overlapping algorithm, and set the padding. | ||
| * Set **Max items diameter** to `30` | ||
| * Set **Padding** to `10` | ||
| In the **Color** section you can define the color of the attractor groups | ||
| * Click on **Color Scheme** and set it to `Spectral discrete` | ||
| ## Contribute | ||
| If you'd like to contribute, follow the RAWGraphs [custom template guide](https://github.com/rawgraphs/custom-rawcharts-template). | ||
| ## Edit the code | ||
@@ -25,0 +70,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.79%
976667
- Number of package files
- increased by5.13%
41
- Number of lines in readme file
- increased by93.75%
93