Skip to content
XING Yun edited this page Mar 27, 2018 · 2 revisions

Rose

Quick Reference

import { rose } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},

	data: {
			x: { name: 'Director', type: 'string', accessor: 'Director'},
			y: [{ name: 'Total', type: 'number', accessor: 'Total', yAxis: 0}],
	},
};

const chart = rose('#chart', options);
d3.csv('./data/movies.csv', function(err, res){
   chart.render(res);
});
	

API

Default options:

const RoseOpt = {
  chart: {
    type: 'rose',
  },

  plots: {
    opacity: 0.5,
    outerRadiusMargin: 10,
    axisLabel: null,
    axisLabelAlign: true,
    axisLabelAlignThreshold: 0.5,
    axisLabelOffset: 10,
    axisLabelColor: 'black',
    dimensionOrder: null,
  },
};

opacity

Opacity. 0.5 by default

outerRadiusMargin

outer radius margin. 10 by default

axisLabel

a function to display axis label

axisLabelAlign

align labels? true by default

axisLabelAlignThreshold

threshold of aligning labels

axisLabelOffset

label offset. 10 by default

axisLabelColor

label color. black by default

dimensionOrder

function to sort dimensions

Clone this wiki locally