{"id":13720110,"url":"https://github.com/nicgirault/circosJS","last_synced_at":"2025-05-07T12:30:47.174Z","repository":{"id":23889553,"uuid":"27268922","full_name":"nicgirault/circosJS","owner":"nicgirault","description":"d3 library to build circular graphs","archived":false,"fork":false,"pushed_at":"2024-04-15T19:13:07.000Z","size":7605,"stargazers_count":509,"open_issues_count":59,"forks_count":116,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-29T21:04:02.889Z","etag":null,"topics":["big-data","bigdata","bioinformatics","bioinformatics-data","circos","circos-graphs","circular","d3js","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicgirault.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-28T13:50:31.000Z","updated_at":"2024-10-22T09:58:29.000Z","dependencies_parsed_at":"2024-11-14T09:31:34.501Z","dependency_job_id":"a667412e-0d8e-4e6d-a20b-53f8ac4a3b57","html_url":"https://github.com/nicgirault/circosJS","commit_stats":{"total_commits":263,"total_committers":5,"mean_commits":52.6,"dds":"0.019011406844106515","last_synced_commit":"a9162cf0a22b9223fb955c021f97d37253c54985"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicgirault%2FcircosJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicgirault%2FcircosJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicgirault%2FcircosJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicgirault%2FcircosJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicgirault","download_url":"https://codeload.github.com/nicgirault/circosJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252876303,"owners_count":21818159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["big-data","bigdata","bioinformatics","bioinformatics-data","circos","circos-graphs","circular","d3js","javascript"],"created_at":"2024-08-03T01:00:59.862Z","updated_at":"2025-05-07T12:30:46.034Z","avatar_url":"https://github.com/nicgirault.png","language":"JavaScript","readme":"# Circos [![Circle CI](https://circleci.com/gh/nicgirault/circosJS.svg?style=shield)](https://circleci.com/gh/nicgirault/circosJS) [![Coverage Status](https://coveralls.io/repos/github/nicgirault/circosJS/badge.svg?branch=master)](https://coveralls.io/github/nicgirault/circosJS?branch=master)\n\nDemo: [nicgirault.github.io/circosJS/demo](https://nicgirault.github.io/circosJS/demo)\n\n## table of contents\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n- [Layout](#layout)\n- [Tracks](#tracks)\n  - [Chords](#chords)\n  - [Heatmap](#heatmap)\n  - [Highlight](#highlight)\n  - [Histogram](#histogram)\n  - [Line](#line)\n  - [Scatter](#scatter)\n  - [Stack](#stack)\n  - [Text](#text)\n- [Configuration Attributes](#configurationAttributes)\n  - [innerRadius](#innerRadiusOuterRadius)\n  - [outerRadius](#innerRadiusOuterRadius)\n  - [min](#minmax)\n  - [max](#minmax)\n  - [color](#color)\n  - [axes](#axes)\n  - [showAxesTooltip](#showAxesTooltip)\n\n## Introduction\n\nCircos is a javascript library to easily build interactive graphs in a circular layout. It's based on [d3.js](https://d3js.org/). It aims to be a javascript version of the [Circos](http://circos.ca) software.\n\nYou should consider using Circos to show:\n\n- relationships between entities\n- periodical data\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/temperatures.png\" width=\"60%\" alt=\"temperatures\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eAverage temperatures in Paris from 2007 (inner) to 2014 (outer). The circular layout highlights seasonal effect.\u003c/i\u003e\n\u003c/p\u003e\n\n## Installation\n\nIf you don't know what is npm you can skip this step and get started with [this canvas](doc/canvas.html). Otherwise:\n\n```\nnpm install --save circos\n```\n\n## Layout\n\nTo instantiate a new circos:\n\n```javascript\nvar myCircos = new Circos({\n    container: '#chart',\n    width: 500,\n    height: 500,\n});\n```\n\nA circos graph is based on a circular axis **layout**. Data tracks appear inside and/or outside the circular layout.\n\nIn order to place data on the circos graph, you must first specify the layout.\n\n```javascript\nmyCircos.layout(data, configuration);\n```\n\nThe first argument of the `layout` function is a configuration object that control the format of the layout.\n\nHere are the default parameters for a layout:\n\n```javascript\nvar configuration = {\n  innerRadius: 250,\n  outerRadius: 300,\n  cornerRadius: 10,\n  gap: 0.04, // in radian\n  labels: {\n    display: true,\n    position: 'center',\n    size: '14px',\n    color: '#000000',\n    radialOffset: 20,\n  },\n  ticks: {\n    display: true,\n    color: 'grey',\n    spacing: 10000000,\n    labels: true,\n    labelSpacing: 10,\n    labelSuffix: 'Mb',\n    labelDenominator: 1000000,\n    labelDisplay0: true,\n    labelSize: '10px',\n    labelColor: '#000000',\n    labelFont: 'default',\n    majorSpacing: 5,\n    size: {\n      minor: 2,\n      major: 5,\n    }\n  },\n  events: {}\n}\n```\n\nThe second argument of the `layout` function is an array of data that describe the layout regions. Each layout region must have an id and a length. You can also specify a color and a label.\n\n```javascript\nvar data = [\n  { len: 31, color: \"#8dd3c7\", label: \"January\", id: \"january\" },\n  { len: 28, color: \"#ffffb3\", label: \"February\", id: \"february\" },\n  { len: 31, color: \"#bebada\", label: \"March\", id: \"march\" },\n  { len: 30, color: \"#fb8072\", label: \"April\", id: \"april\" },\n  { len: 31, color: \"#80b1d3\", label: \"May\", id: \"may\" },\n  { len: 30, color: \"#fdb462\", label: \"June\", id: \"june\" },\n  { len: 31, color: \"#b3de69\", label: \"July\", id: \"july\" },\n  { len: 31, color: \"#fccde5\", label: \"August\", id: \"august\" },\n  { len: 30, color: \"#d9d9d9\", label: \"September\", id: \"september\" },\n  { len: 31, color: \"#bc80bd\", label: \"October\", id: \"october\" },\n  { len: 30, color: \"#ccebc5\", label: \"November\", id: \"november\" },\n  { len: 31, color: \"#ffed6f\", label: \"December\", id: \"december\" }\n]\n```\n\nThe `id` parameter will be used to place data points on the layout.\n\nTo visualize the result:\n\n```javascript\nmyCircos.render();\n```\n\n\n## Tracks\n\nA track is a series of data points.\n\nTo add a track to your graph you should write something like this:\n\n```javascript\nmyCircos.heatmap(\n    'my-heatmap',\n    data,\n    {\n        // your heatmap configuration (optional)\n    },\n);\n```\n\nThis pattern is similar to all track types:\n\n```javascript\nmyCircos.trackType('track-id', data, configuration);\n```\n\n**Note**: The track name is used as a HTML class name so here are the format limitations.\n\n* Must be unique.\n* Should be slug style for simplicity, consistency and compatibility. Example: `my-heatmap`\n* Lowercase, a-z, can contain digits, 0-9, can contain dash or dot but not start/end with them.\n* Consecutive dashes or dots not allowed.\n* 50 characters or less.\n\n\n### Chords\n\nChords tracks connect layout regions.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/chords.png\" width=\"60%\" alt=\"chords\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eSome gene fusions in human karyotype (\u003ca href=\"demo/chords.js\"\u003esource\u003c/a\u003e)\u003c/i\u003e\n\u003c/p\u003e\n\nData should looks like this:\n\n```javascript\nvar data = [\n  {\n    source: {\n      id: 'january',\n      start: 1,\n      end: 12\n    },\n    target: {\n      id: 'april',\n      start: 18,\n      end: 20\n    }\n  },\n  {\n    source: {\n      id: 'february',\n      start: 20,\n      end: 28\n    },\n    target: {\n      id: 'december',\n      start: 1,\n      end: 13\n    }\n  },\n  ...\n];\n```\n\nOptionally each datum can define a `value` attribute to draw colored ribbons with palettes or a color function.\n\nThe available configuration fields are:\n- [color](#color)\n- [events](#events)\n- [opacity](#opacity)\n- [zIndex](#zIndex)\n- [tooltipContent](#tooltipContent)\n- [min](#minmax)\n- [max](#minmax)\n- [radius](#radius)\n- [logScale](#logScale)\n- [logScaleBase](#logScaleBase)\n\n### Heatmap\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/heatmap.png\" width=\"60%\" alt=\"heatmap\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eElectrical comsumption in France in 2014\u003c/i\u003e\n\u003c/p\u003e\n\nTo add a heatmap to your circos instance:\n\n```javascript\nmyCircos.heatmap('electrical-consumption', data, configuration);\n```\n\nConfiguration:\n\n```javascript\n{\n  innerRadius: null,\n  outerRadius: null,\n  min: null,\n  max: null,\n  color: 'YlGnBu',\n  logScale: false,\n  tooltipContent: null,\n  events: {}\n}\n```\n\nData format:\n\n```javascript\nvar data = [\n  {\n    block_id: 'january',\n    start: 0,\n    end: 1,\n    value: 1368001\n  },\n  {\n    block_id: 'january',\n    start: 1,\n    end: 2,\n    value: 1458583\n  },\n  ...\n]\n```\n\n### Highlight\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/highlight.png\" width=\"60%\" alt=\"highlight\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eHuman karyotype with cytobands highlighted (\u003ca href=\"demo/highlight.js\"\u003esource\u003c/a\u003e)\u003c/i\u003e\n\u003c/p\u003e\n\nTo add a highlight to your circos instance:\n\n```javascript\nmyCircos.highlight('cytobands', data, configuration);\n```\n\nThe minimal datum should have `block_id`, `start` and `end` attributes.\n\nConfiguration:\n\n```javascript\n{\n  innerRadius: null,\n  outerRadius: null,\n  min: null,\n  max: null,\n  color: 'd3d3d3',\n  strokeColor: null,\n  strokeWidth: 0,\n  opacity: 1,\n  logScale: false,\n  tooltipContent: null,\n  events: {}\n}\n```\n\n### Histogram\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/histogram.png\" width=\"60%\" alt=\"histogram\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eGenetic abnormalities in human stem cells (\u003ca href=\"demo/histogram.js\"\u003esource\u003c/a\u003e)\u003c/i\u003e\n\u003c/p\u003e\n\nData should looks like this:\n\n```javascript\nvar data = [\n    {\n      block_id: 'january',\n      start: 1,\n      end: 10,\n      value: 5\n    }\n];\n```\n\nThe available configuration fields are:\n- [innerRadius](#innerRadiusOuterRadius)\n- [outerRadius](#innerRadiusOuterRadius)\n- [color](#color)\n- [opacity](#opacity)\n- [zIndex](#zIndex)\n- [tooltipContent](#tooltipContent)\n- [min](#minmax)\n- [max](#minmax)\n- [logScale](#logScale)\n- [logScaleBase](#logScaleBase)\n- [axes](#axes)\n- [events](#events)\n\n### Line\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/line.png\" width=\"60%\" alt=\"line\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003eSome single nucleotide polymorphism on chromosomes 1, 2 and 3 (\u003ca href=\"demo/line.js\"\u003esource\u003c/a\u003e)\u003c/i\u003e\n\u003c/p\u003e\n\n```javascript\nmyCircos.line('line1', data, configuration);\n```\n\nThe minimal datum should have `block_id`, `position` and `value` attributes (see above tracks for more details).\n\nThe available configuration fields are:\n- [innerRadius](#innerRadiusOuterRadius)\n- [outerRadius](#innerRadiusOuterRadius)\n- [color](#color)\n- [strokeColor](#strokeColor)\n- [strokeWidth](#strokeWidth)\n- [direction](#direction)\n- [fill](#fill)\n- [fillColor](#fillColor)\n- [maxGap](#maxGap)\n- [opacity](#opacity)\n- [zIndex](#zIndex)\n- [min](#minmax)\n- [max](#minmax)\n- [logScale](#logScale)\n- [logScaleBase](#logScaleBase)\n- [axes](#axes)\n- [backgrounds](#backgrounds)\n- [events](#events)\n\n**Note**: The tooltip option is not available for line track. To display a tooltip, you should superimpose an invisble `scatter` track (`fill: false` and `strokeWidth: 0`) and set a tooltip for this track.\n\n### Scatter\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/scatter.png\" width=\"60%\" alt=\"scatter\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/line.js\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\n```javascript\nmyCircos.scatter('scatter1', data, configuration);\n```\n\nThe minimal datum should have `block_id`, `position` and `value` attributes (see above tracks for more details).\n\nThe available configuration fields are:\n- [innerRadius](#innerRadiusOuterRadius)\n- [outerRadius](#innerRadiusOuterRadius)\n- [color](#color)\n- [strokeColor](#strokeColor)\n- [strokeWidth](#strokeWidth)\n- [direction](#direction)\n- [fill](#fill)\n- [size](#size)\n- [shape](#shape)\n- [opacity](#opacity)\n- [zIndex](#zIndex)\n- [min](#minmax)\n- [max](#minmax)\n- [logScale](#logScale)\n- [logScaleBase](#logScaleBase)\n- [axes](#axes)\n- [backgrounds](#backgrounds)\n- [events](#events)\n\n### Stack\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/stack.png\" width=\"60%\" alt=\"stack\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/stack.js\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\n```javascript\nmyCircos.stack('stack', data, configuration);\n```\n\nThe minimal datum should have `block_id`, `start` and `end` attributes (see above tracks for more details).\n\nConfiguration:\n\n```javascript\n{\n  innerRadius: null,\n  outerRadius: null,\n  min: null,\n  max: null,\n  color: '#fd6a62',\n  strokeColor: '#d3d3d3',\n  strokeWidth: 1,\n  direction: 'out',\n  thickness: 10,\n  radialMargin: 2,\n  margin: 2,\n  opacity: 1,\n  logScale: false,\n  tooltipContent: null,\n  events: {}\n}\n```\n\n### Text\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/text.png\" width=\"60%\" alt=\"text\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/text.js\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\n```javascript\nmyCircos.text('text', data, configuration);\n```\n\nThe minimal datum should have `block_id`, `position` and `value` attributes (see above tracks for more details).\n\nConfiguration:\n\n```javascript\n{\n  innerRadius: null,\n  outerRadius: null,\n  style: {\n    'font-size': 12,\n    fill: 'black',\n    opacity: 1,\n  },\n  events: {}\n}\n```\n\n## Configuration Attributes\n\n### backgrounds\n\nYou can add a list of backgrounds:\n\n```javascript\n{\n  backgrounds: [\n    {\n      start: 0.006,\n      color: '#4caf50',\n      opacity: 0.1\n    },\n    {\n      start: 0.002,\n      end: 0.006,\n      color: '#d3d3d3',\n      opacity: 0.1\n    },\n    {\n      end: 0.002,\n      color: '#f44336',\n      opacity: 0.1\n    }\n  ]\n}\n```\n\nThe `start` and `end` fields are interpreted as values on the same scale than the track values.\n- If `start` is not specified, default is the `min` value of the track.\n- If `end` is not specified, default is the `max` value of the track.\n\nYou can also specify a `color` and an `opacity`.\n\n### events\n\nAll tracks and the layout configurations can receive an events attribute. This attribute must be an object where keys are event names and values are event callbacks. For example:\n\n```javascript\n{\n  events: {\n    'click.alert': function (datum, index, nodes, event) {\n      window.alert(datum)\n    }\n  }\n}\n```\n\nThe documentation about d3 events is [here](https://github.com/d3/d3-selection/blob/master/README.md#selection_on). You can add all events described in this documentation. I recommend using event namespaces (`click.alert` instead of `click`) to avoid possible conflicts with internal circosjs events.\n\n### innerRadius/outerRadius\n\nFor the layout, the innerRadius and outerRadius values are always interpreted as a number of pixel.\n\nFor tracks:\n\nIf innerRadius and outerRadius are between `0` and `1`, the value is interpreted as a fraction of the innerRadius of the layout.\n\neg:\n```\n{\n  innerRadius: 0.5,\n  outerRadius: 0.8\n}\n```\n\nIf innerRadius and outerRadius are between `1` and `10`, the value is interpreted as a fraction of the outerRadius of the layout.\n\neg:\n```\n{\n  innerRadius: 1,\n  outerRadius: 1.2\n}\n```\n\nOtherwise it is interpreted as a number of pixels.\n\n### min/max\n\nThe default min and max values are computed according to the dataset. You can override these values by specifying a `min` or `max` attribute in the configuration.\n\n### color\n\nThe color attribute can be either:\n\n#### CSS color code\n\ne.g `#d3d3d3`, `blue`, `rgb(0, 0, 0)`\n\n#### Palette name from [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic)\n\nThe color will be computed dynamically according to the track data `value` field.\n\nIf you prefix the palette name with a `-` (e.g `-BrBG`), the palette will be reversed.\n\nThe list of palette names are:\n\n**BrBG**:\n\u003cimg src=\"doc/palettes/BrBG.png\" width=\"100%\" height=\"10\"\u003e\n**PRGn**:\n\u003cimg src=\"doc/palettes/PRGn.png\" width=\"100%\" height=\"10\"\u003e\n**PiYG**:\n\u003cimg src=\"doc/palettes/PiYG.png\" width=\"100%\" height=\"10\"\u003e\n**PuOr**:\n\u003cimg src=\"doc/palettes/PuOr.png\" width=\"100%\" height=\"10\"\u003e\n**RdBu**:\n\u003cimg src=\"doc/palettes/RdBu.png\" width=\"100%\" height=\"10\"\u003e\n**RdGy**:\n\u003cimg src=\"doc/palettes/RdGy.png\" width=\"100%\" height=\"10\"\u003e\n**RdYlBu**:\n\u003cimg src=\"doc/palettes/RdYlBu.png\" width=\"100%\" height=\"10\"\u003e\n**RdYlGn**:\n\u003cimg src=\"doc/palettes/RdYlGn.png\" width=\"100%\" height=\"10\"\u003e\n**Spectral**:\n\u003cimg src=\"doc/palettes/Spectral.png\" width=\"100%\" height=\"10\"\u003e\n**Blues**:\n\u003cimg src=\"doc/palettes/Blues.png\" width=\"100%\" height=\"10\"\u003e\n**Greens**:\n\u003cimg src=\"doc/palettes/Greens.png\" width=\"100%\" height=\"10\"\u003e\n**Greys**:\n\u003cimg src=\"doc/palettes/Greys.png\" width=\"100%\" height=\"10\"\u003e\n**Oranges**:\n\u003cimg src=\"doc/palettes/Oranges.png\" width=\"100%\" height=\"10\"\u003e\n**Purples**:\n\u003cimg src=\"doc/palettes/Purples.png\" width=\"100%\" height=\"10\"\u003e\n**Reds**:\n\u003cimg src=\"doc/palettes/Reds.png\" width=\"100%\" height=\"10\"\u003e\n**BuGn**:\n\u003cimg src=\"doc/palettes/BuGn.png\" width=\"100%\" height=\"10\"\u003e\n**BuPu**:\n\u003cimg src=\"doc/palettes/BuPu.png\" width=\"100%\" height=\"10\"\u003e\n**GnBu**:\n\u003cimg src=\"doc/palettes/GnBu.png\" width=\"100%\" height=\"10\"\u003e\n**OrRd**:\n\u003cimg src=\"doc/palettes/OrRd.png\" width=\"100%\" height=\"10\"\u003e\n**PuBuGn**:\n\u003cimg src=\"doc/palettes/PuBuGn.png\" width=\"100%\" height=\"10\"\u003e\n**PuBu**:\n\u003cimg src=\"doc/palettes/PuBu.png\" width=\"100%\" height=\"10\"\u003e\n**PuRd**:\n\u003cimg src=\"doc/palettes/PuRd.png\" width=\"100%\" height=\"10\"\u003e\n**RdPu**:\n\u003cimg src=\"doc/palettes/RdPu.png\" width=\"100%\" height=\"10\"\u003e\n**YlGnBu**:\n\u003cimg src=\"doc/palettes/YlGnBu.png\" width=\"100%\" height=\"10\"\u003e\n**YlGn**:\n\u003cimg src=\"doc/palettes/YlGn.png\" width=\"100%\" height=\"10\"\u003e\n**YlOrBr**:\n\u003cimg src=\"doc/palettes/YlOrBr.png\" width=\"100%\" height=\"10\"\u003e\n**YlOrRd**:\n\u003cimg src=\"doc/palettes/YlOrRd.png\" width=\"100%\" height=\"10\"\u003e\n\n#### Custom function\n\nYou can specify a function that compute the color code given the track data and the datum index. For example:\n\n```javascript\n{\n  color: function(datum, index) {\n    return datum.value \u003c 5 ? 'red' : 'green'\n  }\n}\n\n```\n\n### axes\n\nThe default value is an empty array:\n\n```javascript\n{\n  axes: []\n}\n```\n\nYou can add items to this array to render an axis or a group of axes. You can give axes a `color` (default: '#d3d3d3'), `thickness` (default: 1) and `opacity` (default: track opacity):\n\n```javascript\n{\n  axes: [\n    {\n      color: 'black',\n      thickness: 2, // in pixel\n      opacity: 0.3 // between 0 and 1\n    }\n  ]\n}\n```\n\nThen you should specify where to place the axes.\n\nYou can either define a single axis by defining a `position` attribute with a value between the min and max value of the track:\n\n```javascript\n{\n  axes: [\n    {\n      color: 'red',\n      position: 4\n    },\n    {\n      color: 'green',\n      position: 15\n    }\n  ]\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/axes-1.png\" width=\"60%\" alt=\"axes-1\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/axes\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\n\nOr define a range of axes with a `spacing` attribute and optionnally a `start` and `end` attributes:\n\n```javascript\n{\n  axes: [\n    {\n      spacing: 2\n    }\n  ]\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/axes-2.png\" width=\"60%\" alt=\"axes-2\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/axes\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\nHere is an advanced example:\n\n```javascript\n{\n  axes: [\n    {\n      color: 'red',\n      spacing: 2,\n      end: 4\n    },\n    {\n      color: 'green',\n      spacing: 2,\n      start: 16\n    },\n    {\n      spacing: 2,\n      start: 4,\n      end: 16,\n      thickness: 2\n    },\n    {\n      spacing: 1,\n      start: 4,\n      end: 16,\n      thickness: 1\n    }\n  ]\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"doc/axes-3.png\" width=\"60%\" alt=\"axes-3\"\u003e\n  \u003cbr/\u003e\n  \u003ci\u003e\u003ca href=\"demo/axes\"\u003esource\u003c/a\u003e\u003c/i\u003e\n\u003c/p\u003e\n\nThe values that you set for `position`, `spacing`, `start` and `end` are in the unit of the track values.\n\n### tooltipContent\n\nA function that receive the datum and the index as a value and return a string displayed in the tooltip (HTML is accepted):\n\n```javascript\n{\n  tooltipContent: function (datum, index) {\n    return `\u003ch5\u003e${datum.block_id}:${datum.start}-${datum.end} ➤ ${datum.value}\u003c/h5\u003e \u003ci\u003e(CTRL+C to copy to clipboard)\u003c/i\u003e`\n  }\n}\n```\n\nThen when you mouseover the datum, a tooltip will be displayed.\nNote that you can use the keyboard shortcut CTRL+C to copy the content to clipboard.\n\n### showAxesTooltip\n\nShow or not a tooltip with the value of the axis. Default is `true`.\n\n### direction\n\nIt should be either `in` or `out`. Default is `out`. For stack you can also use `center`.\n\n### fill\n\n`true` or `false`.\n\n### fillColor\n\nA color such as `#d3d3d3`, `red`, `rgb(112, 255, 1)`.\n\n### logScale\n\n`true` or `false`. Default is `false`.\n\n### logScaleBase\n\nThe log base if logScale is `true`. Default is `Math.E`.\n\n### radius\n\nIn the chords configuration you can specify a radius parameter. Default is `null`.\n\nExamples:\n\n```javascript\n// when there is no value, default is null:\n// the radius will be the one of the innerRadius of the layout\n{}\n\n// when the value is a number greater than 1, it is interpreted as\n// a number of pixel from the center\n{\n  radius: 200\n}\n\n// when the value is a number lower than 1, it is interpreted as\n// a fraction of the layout inner radius\n{\n  radius: 0.8\n}\n\n// you can also specify a function that return a number that\n// will be interpreted as explained above. The function takes\n// a datum as parameter\n{\n  radius: function (d) {\n    if (d.source.id === 'chr1') {\n      return 0.8\n    }\n    if (d.source.id === 'chr2') {\n      return 0.7\n    }\n  }\n}\n```\n\n### shape\n\nIt should be one of:\n  - `circle`\n  - `cross`\n  - `diamond`\n  - `square`\n  - `triangle`\n  - `star`\n  - `wye`\n\n### zIndex\n\nThis should be an integer. The higher it is the more above the track will appear.\n\n## Contact\n\nNicolas Girault\nnic.girault@gmail.com\n\nYour feedbacks are welcome. If you're struggling using the librairy, the best way to ask questions is to use the Github issues so that they are shared with everybody.\n","funding_links":[],"categories":["Circular"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicgirault%2FcircosJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicgirault%2FcircosJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicgirault%2FcircosJS/lists"}