Circle Pack

Circle Pack represents hierarchy. This work is based on Nadieh Bremer's A Closer look at Occupations
Home / Demo / Circle Pack
Find a Book Category
Number of book borrowings
Circle Pack

Renderer: Canvas

Module: vizart-hierarchy

Data: Wanli University Library book borrowing records. Bars in each circle represents borrowings from schools of Wanli university

Doc: API

import { circlePack } from 'vizart-hierarchy';
import 'vizart-hierarchy/dist/vizart-hierarchy.css';

const options = {
	data: {
		x: { name: 'School', type: 'string', accessor: 'MX'},
		y: { name: 'Book Borrowings', type: 'number', accessor: 'MY'},
	},

	plots: {
		titleFn: (d)=> { return 'Total: ' + d + ' borrowings'}
	}
};


let chart = VizArtHierarchy.circlePack('#chart', options);
$.getJSON('./data/library.json', function(data){
	chart.render(data);
	chart.createLegend('#legendCircles');
});