Bubble Chart
How do I make an bubble chart?
What is a bubble chart? How do you make a bubble chart? This script and codes were developed by Tushar Sonawane on 26 December 2022, Monday.
Bubble Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bubble Chart</title>
</head>
<body> <div class="bubble-chart"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bubble Chart - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
(function () { var BubbleChart = function () { function BubbleChart(options) { var _this = this; _classCallCheck(this, BubbleChart); this.margin = { top: options.width / 4, right: options.width / 24, bottom: options.width / 40, left: options.width / 24 }; this.width = options.width - this.margin.left - this.margin.right; this.height = options.width / 1.5 - this.margin.top - this.margin.bottom; this.fontSize = options.width / 6.25; this.el = options.el; this.bubbleColor = options.bubbleColor; this.invertColors = options.invertColors; this.svg = d3.select(this.el).append('svg').attr('width', this.width + this.margin.left + this.margin.right).attr('height', this.height + this.margin.top + this.margin.bottom).append('g'); this.bubble = this.svg.append('circle').attr({ 'cx': this.width / 2, 'cy': this.height / 2, 'r': this.height / 2, 'stroke': this.bubbleColor, 'stroke-width': 2, 'fill': function fill() { if (_this.invertColors) { return _this.bubbleColor; } return 'white'; } }); this.text = this.svg.append('text').attr({ 'x': this.width / 2, 'y': this.height / 2 + this.fontSize / 2, 'font-size': this.fontSize, 'text-anchor': 'middle', 'fill': function fill() { if (_this.invertColors) { return 'white'; } return _this.bubbleColor; } }); } BubbleChart.prototype.update = function update(value) { this.text.text(value); }; return BubbleChart; }(); var bubbleChart = new BubbleChart({ el: '.bubble-chart', width: 100, invertColors: false, bubbleColor: 'rgb(56, 124, 197)' }); bubbleChart.update(20);
})();
Developer | Tushar Sonawane |
Username | Tushkiz |
Uploaded | December 26, 2022 |
Rating | 3 |
Size | 2,690 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Typewrite Effect | 2,055 Kb |
Simple Radar | 2,157 Kb |
IDE | 2,273 Kb |
Login Form | 2,008 Kb |
Skills Bar | 2,029 Kb |
NFS Hot Pursuit Style Loader | 2,243 Kb |
A Pen by Tushar Sonawane | 1,762 Kb |
Optweemize | 2,223 Kb |
Radial Menu | 3,020 Kb |
Meter gauge | 4,727 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Price | Catcode | 2,623 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!