d3-bubble-matrix
A bubble matrix, for representing any kind of bidimensional data.
Install
With npm:
npm install d3-bubble-matrix
With bower:
bower install d3-bubble-matrix
Dependencies:
npm install d3
npm install d3-tip
Example
<!-- index.html -->
let data = columns: '2013' '2014' '2015' '2016' '2017' rows: name: 'Hey men' values: 03 054 099 03 02 name: 'What?????' values: 05 06 07 08 05 name: 'Whatever!!' values: 099 02 03 04 07 name: 'Really?' values: 094 007 027 09 05;
let config = // Mandatory need argument root or id // root: d3.select('#bubble'), selector: '#bubble' ;
let matrix = config; // Draw it.matrix;
This will draw a bubble matrix. You can find this example in the app/index.html folder.
To play with the example npm install
, run npm start
and go to
localhost:8000.
Constructor
let config = // {HTMLElement} root: The container's DOM element. root: d3 // {string} selector: The selector of the container to use. selector: '#bubble' // {number} width: The width of the canvas, not the matrix. width: 800 // {number} height: The height of the canvas, not the matrix. height: 600 // {function} onClick: The function to trigger when click a bubble. // {boolean} reverseColor: Reverse the color scale. reverseColor: true // {boolean} hideTooltip: Hide the tooltip for the bubbles. hideTooltip: true // {function} tooltip: Function to show tooltip, need to have show and hide method. tooltip: d3 // {boolean} hideLeftTitle: Hide the left title. hideLeftTitle: true // {boolean} hideRightTitle: Hide the right title. hideRightTitle: true // {boolean} hideTopTitle: Hide the top title. hideTopTitle: true // {boolean} hideBottomTitle: Hide the bottom title. hideBottomTitle: true // {boolean} duration: The duration of the animation. duration: 5000 // {number} maxRadius: The radius of the circles. maxRadius: 10 // {number} maxColors: The numbers of colors to used. maxColors: 6 // {object} padding: Padding for the matrix. padding: top: 20 right: 0 bottom: 20 left: 10 // {object} classNames: The names of the classes used for each element. classNames: bubbleMatrix: 'bubble-matrix' leftRows: 'left-rows' rightRows: 'right-rows' horizontalLines: 'horizontal-lines' verticalLines: 'vertical-lines' row: 'row' column: 'column' topColumns: 'top-columns' bottomColumns: 'bottom-columns' rects: 'rects' bubbles: 'bubbles' color: 'bubble-color-' ;
let matrix = config;
Add more colors
Change the value of maxColors.
maxColors: 3
Add this classes to the css.
Ready!
Methods
chart.draw(data)
let data = columns: 'hello' 'world' rows: name: 'foo' values: 01 03 09 name: 'blob' values: 05 08 02 ;
data
Object Data to represent.
Draw the chart.
Please feel free to open pull requests to make any change.