'A Bubble Chart is a multi-variable graph that resembles a combination of a Scatter plot and a Proportional Area Chart.' This example is split into a quadrant colouring the circles depending on the quadrant they fall into.
More info on Bubble Chart Chart built on d3fc
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { font-family: Consolas, monaco, monospace;} | |
| header { padding-left: 25px; } | |
| .chart { | |
| margin: 10px 0; | |
| width: 100%; | |
| height: 600px; | |
| } | |
| .chart > svg { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| </style> | |
| <!-- https://github.com/ScottLogic/d3fc --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/11.0.0/d3fc.css" rel="stylesheet"/> | |
| <!-- http://clrs.cc/ --> | |
| <link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet"> | |
| <body> | |
| <header> | |
| <p>Bubble chart organised in a quadrant</p> | |
| </header> | |
| <section id="vis" class='chart'></section> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3fc/8.0.0/d3fc.bundle.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script> | |
| <!-- d3 code --> | |
| <script src="script-compiled.js" charset="utf-8"></script> | |
| <script> | |
| d3.select(self.frameElement).style('height', '700px'); | |
| </script> | |
| 'use strict'; | |
| (function () { | |
| // test with dummy data | |
| function generateData() { | |
| var _data = []; | |
| // generate data | |
| _.times(_.random(30, 50), function (n) { | |
| _data.push({ | |
| s: _.random(44, 2000), // size/area of bubble | |
| x: _.random(-100, 100), | |
| y: _.random(-100, 100) | |
| }); | |
| }); | |
| return _data; | |
| } | |
| var data = generateData(); | |
| var size = d3.scale.linear().range([40, 2000]).domain(fc.util.extent().fields(['s'])(data)); | |
| // create a chart with two linear axes | |
| var chart = fc.chart.cartesian(d3.scale.linear(), d3.scale.linear()).xDomain(fc.util.extent().pad(0.4).fields(['x'])(data)).xLabel('x Label').xBaseline(0).yDomain(fc.util.extent().pad(0.4).fields(['y'])(data)).yOrient('left').yBaseline(0).yTicks(7).yLabel('y Label').margin({ bottom: 20, right: 15, left: 25 }); | |
| // create the point series | |
| var point = fc.series.point().size(function (d) { | |
| return size(d.s); | |
| }).xValue(function (d) { | |
| return d.x; | |
| }).yValue(function (d) { | |
| return d.y; | |
| }).decorate(function (s) { | |
| s.attr('d', function (d) { | |
| if (d.x >= 0 && d.y >= 0) { | |
| d3.select(this).style({ | |
| fill: 'green', | |
| 'fill-opacity': 0.6, | |
| stroke: 'green' | |
| }); | |
| } else if (d.x <= 0 && d.y >= 0) { | |
| d3.select(this).style({ | |
| fill: 'red', | |
| 'fill-opacity': 0.6, | |
| stroke: 'red' | |
| }); | |
| } else if (d.x < 0 && d.y < 0) { | |
| d3.select(this).style({ | |
| fill: 'orange', | |
| 'fill-opacity': 0.6, | |
| stroke: 'orange' | |
| }); | |
| } else if (d.x > 0 && d.y < 0) { | |
| d3.select(this).style({ | |
| fill: 'blue', | |
| 'fill-opacity': 0.6, | |
| stroke: 'blue' | |
| }); | |
| } | |
| }); | |
| }); | |
| var gridlines = fc.annotation.gridline(); | |
| // add it to the chart | |
| var multi = fc.series.multi().series([gridlines, point]); | |
| chart.plotArea(multi); | |
| function render() { | |
| d3.select('#vis').datum(data).call(chart); | |
| } | |
| render(); | |
| })(); |
https://d3fc.io/d3fc.min.css file missing, also how can I put a blue background?, same code, but renders a black background