updated description, various fixes

Author: mikima

README.md

@@ -1,12 +1,12 @@
-# Custom Raw Chart(s)
+# Versus: a custom RAWGraphs chart
 
-## Install
+### Install
 
 ```sh
 npm install
 ```
 
-## Run Sandbox
+### Run Sandbox
 
 Develop your custom chart on your machine with livereload thanks to Webpack.
 
@@ -16,11 +16,11 @@ npm run sandbox
 
 You can find your charts at [http://localhost:9000](http://localhost:9000)
 
-For an in depth guide to add a chart see [this](https://github.com/rawgraphs/rawgraphs-charts/blob/master/docs/add-a-new-chart.md)
+-
 
 ## Build
 
-Build your chart to use it in RAW.
+Build your chart to use it in RAWGraphs.
 
 ```sh
 npm run build

example/configurations/hellochart01.js example/configurations/versus.js

@@ -1,5 +1,5 @@
 import versus from 'customcharts/versus'
-import data from '../datasets/hello.csv'
+import data from '../datasets/keywords.csv'
 
 export default {
   chart: versus,
@@ -14,5 +14,5 @@ export default {
     item: { value: ['keyword'] },
     strength: { value: ['strength'] },
   },
-  visualOptions: {},
+  visualOptions: { anticollision: false },
 }

example/datasets/hello.csv example/datasets/keywords.csv

@@ -1,6 +1,6 @@
 {
   "name": "rawgraphs-versus",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Versus visual model",
   "jsdelivr": "lib/index.umd.js",
   "unpkg": "lib/index.umd.js",

package.json

@@ -1,13 +1,14 @@
 import thumbnail from './template_thumb.svg'
-import icon from './template_icon.svg'
+import icon from './versus.svg'
 
 export const metadata = {
   name: 'Versus',
   thumbnail,
   icon,
   id: 'customrawcharts.versus',
   categories: ['networks'],
-  description: 'Hello World custom RAW Chart ❤️',
-  code: 'https://rawgraphs.io',
-  tutorial: 'https://rawgraphs.io',
+  description:
+    'This chart represent groups as dots disposed on a circle. They act as attractors for the items, that will be disposed according to the streng of the link among them. Colour of items is also proprotional to the strength of the links.',
+  code: 'https://github.com/rawgraphs/rawgraphs-versus',
+  //tutorial: 'https://rawgraphs.io', @TODO: define how to add a tutorial
 }

src/versus-icon.ai

@@ -1,5 +1,6 @@
 import * as d3 from 'd3'
 import '../d3-styles.js'
+import { labelsOcclusion } from '@rawgraphs/rawgraphs-core'
 
 export function render(
   svgNode,
@@ -20,8 +21,13 @@ export function render(
     marginLeft,
     //chart
     nodePadding,
+    anticollision,
     groupsDiameter,
     maxItemsDiameter,
+    colorScale,
+    showLabels,
+    autoHideLabels,
+    groupsFillColor, // @TODO: check how to expose it as option
   } = visualOptions
 
   const margin = {
@@ -33,12 +39,25 @@ export function render(
 
   const chartWidth = width - margin.right - margin.left
   const chartHeight = height - margin.top - margin.bottom
+
   // compute radius
   const radius = (chartWidth < chartHeight ? chartWidth : chartHeight) / 2
 
   // select the svg node
-  const svg = d3
-    .select(svgNode)
+  const svg = d3.select(svgNode)
+
+  // add background
+  d3.select(svgNode)
+    .append('rect')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('x', 0)
+    .attr('y', 0)
+    .attr('fill', background)
+    .attr('id', 'backgorund')
+
+  // add viz group
+  const vizGroup = svg
     .append('g')
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
     .attr('id', 'viz')
@@ -50,15 +69,6 @@ export function render(
   let groupNodes = graph.nodes.filter((d) => d.type == 'group')
   const groupNames = groupNodes.map((d) => d.name)
 
-  console.log(graph)
-  console.log(d3.max(graph.nodes, (d) => d.strength))
-
-  // define colors
-  let colorScale = d3
-    .scaleOrdinal()
-    .domain(groupNames)
-    .range(d3.schemeCategory10)
-
   // scele for edges strenghts
   let strengthScale = d3.scaleLinear(
     d3.extent(graph.edges, (d) => d.value),
@@ -97,9 +107,6 @@ export function render(
     d.color = d3.rgb(colr, colg, colb)
   })
 
-  // TODO: expose or remove
-  const forceNode = d3.forceManyBody().strength(-5)
-
   // define links (edges) force
   const forceLink = d3
     .forceLink(graph.edges)
@@ -127,9 +134,14 @@ export function render(
   const simulation = d3
     .forceSimulation(graph.nodes)
     .force('link', forceLink)
-    .force('collisionForce', forceCollide)
     .on('tick', ticked)
 
+  // add collision force according to options
+
+  if (anticollision) {
+    simulation.force('collisionForce', forceCollide)
+  }
+
   // run the simulation in background
   // @TODO move this to a web worker
   //console.log("---------------new simulation---------------")
@@ -147,7 +159,7 @@ export function render(
   //console.log("---------------end of simulation---------------")
 
   // draw nodes
-  const nodesLayer = svg
+  const nodesLayer = vizGroup
     .append('g')
     .attr('id', 'labelsLayer')
     .attr('id', 'nodes')
@@ -160,7 +172,7 @@ export function render(
   nodesLayer
     .filter((d) => d.type == 'group')
     .attr('r', groupsDiameter / 2)
-    .attr('fill', 'white')
+    .attr('fill', 'white') //@TODO: check how to expose a single color. See https://github.com/rawgraphs/rawgraphs-core/issues/67
     .attr('stroke', (d) => colorScale(d.name))
 
   // style item nodes
@@ -170,7 +182,7 @@ export function render(
     .attr('fill', (d) => d.color)
 
   // add labels
-  const labelsLayer = svg
+  const labelsLayer = vizGroup
     .append('g')
     .attr('id', 'labelsLayer')
     .attr('text-anchor', 'middle')
@@ -179,7 +191,18 @@ export function render(
     .data(graph.nodes)
     .join('g')
 
-  labelsLayer.append('text').text((d) => d.name)
+  // add texts according to option
+  if (showLabels) {
+    labelsLayer.append('text').text((d) => d.name)
+
+    labelsLayer.filter((d) => d.type == 'group').styles(styles.seriesLabel)
+    labelsLayer.filter((d) => d.type == 'item').styles(styles.labelPrimary)
+  }
+
+  // auto hide labels
+  if (autoHideLabels) {
+    labelsOcclusion(labelsLayer.selectAll('text'), (d) => sizeScale(d.strength))
+  }
 
   function ticked() {
     nodesLayer.attr('transform', (d) => 'translate(' + d.x + ',' + d.y + ')')

src/versus/metadata.js

@@ -33,6 +33,17 @@ export const visualOptions = {
     default: 60,
     group: 'chart',
   },
+  // groupsFillColor: {
+  //   type: 'colorScale',
+  //   label: 'Groups fill color',
+  //   dimension: 'groupsFillColor', // as called in the mapping
+  //   default: 'white',
+  //   // default: {
+  //   //   scaleType: 'ordinal',
+  //   //   interpolator: 'interpolateSpectral',
+  //   // },
+  //   group: 'chart',
+  // },
 
   maxItemsDiameter: {
     type: 'number',
@@ -41,6 +52,13 @@ export const visualOptions = {
     group: 'chart',
   },
 
+  anticollision: {
+    type: 'boolean',
+    label: 'Avoid nodes overlappings',
+    default: true,
+    group: 'chart',
+  },
+
   nodePadding: {
     type: 'number',
     label: 'Padding',
@@ -58,4 +76,18 @@ export const visualOptions = {
     },
     group: 'colors',
   },
+
+  showLabels: {
+    type: 'boolean',
+    label: 'Show labels',
+    default: true,
+    group: 'labels',
+  },
+
+  autoHideLabels: {
+    type: 'boolean',
+    label: 'Auto hide labels',
+    default: false,
+    group: 'labels',
+  },
 }