Donut Graph with D3

Developer
John W. Long
Size
4,022 Kb
Views
26,312
  1. Donut Graph with D3 Previews
  2. Donut Graph with D3 HTML Codes
  3. Donut Graph with D3 CSS Codes
  4. Donut Graph with D3 JS Codes

How do I make an donut graph with d3?

A simple donut graph in D3.js.. What is a donut graph with d3? How do you make a donut graph with d3? This script and codes were developed by John W. Long on 24 September 2022, Saturday.

Donut Graph with D3 Previews
IQ Test

Donut Graph with D3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Donut Graph with D3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="donut-graph-1" class="donut-graph"></div>
<div id="donut-graph-2" class="donut-graph"></div>
<div id="donut-graph-3" class="donut-graph"></div>
<div id="donut-graph-4" class="donut-graph"></div>
<div id="donut-graph-5" class="donut-graph"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Donut Graph with D3 - Script Codes CSS Codes

body { font-family: sans-serif; font-weight: 100; font-size: 13px; padding: 10px; background: #f9fafb; color: #112;
}
.donut-graph { margin: 20px;
}
.donut-graph-background { fill: #e5e5e5;
}
.donut-graph-value { font-size: 15px;
}
.donut-graph.large .donut-graph-value { font-size: 350%;
}
.donut-graph-label { font-size: 15px; font-weight: bold; line-height: 1.3;
}
.donut-graph.large .donut-graph-label { font-size: 13px; font-weight: 100; text-transform: uppercase;
}
.donut-graph-label-subtext { font-weight: 100; font-size: 13px;
}

Donut Graph with D3 - Script Codes JS Codes

//
// Graph utility functions
//
var Util = { format_integer: function(number) { var int = parseInt("0" + number, 10); return String(int).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
};
//
// Donut Graph
//
var DonutGraph = function(el, series, opts) { opts || (opts = {}); this.el = d3.select(el); this.size = opts.size || parseInt(this.el.style('width'), 10); this.radius = this.size / 2; this.thickness = opts.thickness || Math.round(this.radius / 7); this.value = opts.value; this.value_text = typeof(opts.value_text) === "undefined" ? Util.format_integer(this.value) : opts.value_text; this.value_color = opts.value_color; this.label = opts.label; this.label_position = opts.label_position || 'center'; this.label_color = opts.label_color; this.label_subtext = opts.label_subtext; this.color = opts.color || 'gray'; this.total = opts.total; this.series = series; if (!this.series || !(this.series && this.series.length)) { this.series = [{ value: this.value, color: this.color }]; } this.class_name = opts.class_name;
};
DonutGraph.prototype.draw = function() { var pie = d3.layout.pie().sort(null).startAngle(0).value(function(d){ return d.value; }) , series = this.series , total = this.total , innerRadius = this.radius - this.thickness , outerRadius = this.radius , arc = function() { return d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius) } , sum = 0 , value , label ; for (var i = 0; i < series.length; i++) { sum += series[i].value; } if (this.total) { pie.endAngle(2.0 * Math.PI * sum / total); } else { total = sum; } this.el .classed('donut-graph', true) .style('width', this.size + 'px') .style('height', this.size + 'px'); if (this.class_name) { this.el.classed(this.class_name, true); } var graph = this.el.append('div') .style('position', 'relative') .style('width', this.size + 'px') .style('height', this.size + 'px'); var svg = graph .append('svg:svg') .attr('width', this.size) .attr('height', this.size); var background = svg.append('svg:path') .classed('donut-graph-background', true) .attr('fill', '#e5e5e5') .attr('transform', 'translate(' + this.radius + ',' + this.radius + ')') .attr('d', arc().startAngle(0).endAngle(2*Math.PI)()); var arcs = svg .append('svg:g') .selectAll('.donut-graph-arc') .data(pie(this.series)) .enter() .append('svg:path') .classed('donut-graph-arc', true) .attr('transform', 'translate(' + this.radius + ',' + this.radius + ')') .attr('fill', function(d, i) { return d.data.color; }) .attr('d', arc()); if (this.label && this.label_position === 'center') { var label_group = graph.append("div") .style("position", "absolute") .style("display", "table") .style("top", this.thickness + "px") .style("left", this.thickness + "px") .style("width", this.size - (this.thickness * 2) + "px") .style("height", this.size - (this.thickness * 2) + "px"); var label_group_inner = label_group.append("div") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle"); value = label_group_inner.append("div") .classed('donut-graph-value', true) .text(this.value_text); label = label_group_inner.append("div") .classed("donut-graph-label", true) .style("text-align", "center") .text(this.label); } else { value = graph.append('div') .classed("donut-graph-value", true) .style("white-space", "nowrap") .style("overflow", "visible") .style("display", "inline-block") .text(this.value_text); var value_rect = { width: parseInt(value.style('width'), 10), height: parseInt(value.style('height'), 10) }; value .style('position', 'absolute') .style('left', ((this.size - value_rect.width) / 2) + 'px') .style('top', ((this.size - value_rect.height) / 2) + 'px'); if (this.label) { var width = this.size; label = graph.append('div') .classed("donut-graph-label", true) .style("white-space", "nowrap") .style("overflow", "visible") .style("display", "inline-block") .text(this.label); if (this.label_subtext) { label.node().appendChild(document.createTextNode(" ")); var subtext = label.append('span') .classed("donut-graph-label-subtext", true) .text(this.label_subtext); } var label_rect = { width: parseInt(label.style('width'), 10), height: parseInt(label.style('height'), 10) }; var space = (label_rect.height / 2); label .style('position', 'absolute') .style('left', this.size + space + 'px') .style('top', ((this.size - label_rect.height) / 2) + 'px'); width += space + label_rect.width; svg.attr('width', width + 'px'); this.el.style('width', width + 'px'); } if (value && this.value_color) { value.style('color', this.value_color); } if (label && this.label_color) { label.style('color', this.label_color); } }
};
var graph1 = new DonutGraph('#donut-graph-1', [], { total: 2800, value: 1872, value_text: '', color: '#9a9bc9', size: 18, thickness: 3,
});
graph1.draw();
var graph2 = new DonutGraph('#donut-graph-2', [], { total: 2800, value: 1872, value_text: '64%', color: '#9a9bc9', value_color: '#9a9bc9', size: 48, thickness: 4, label: 'Widget', label_position: 'right', label_subtext: '1,872 visitors'
});
graph2.draw();
var graph3 = new DonutGraph('#donut-graph-3', [ {value: 1167, color: "#6ea6df" }, {value: 543, color: "#84c26d" }, {value: 224, color: "#e17a69" }
], { value: 11, size: 48
});
graph3.draw();
var graph4 = new DonutGraph('#donut-graph-4', [ {value: 1167, color: "#6ea6df" }, {value: 543, color: "#84c26d" }, {value: 224, color: "#e17a69" }
], { value: 11, label: 'visitors', label_position: 'right', size: 48
});
graph4.draw();
var graph5 = new DonutGraph('#donut-graph-5', [ {value: 771, color: "#e25825" }, {value: 1293, color: "#f5e14d" }, {value: 1524, color: "#9fC03f" }
], { class_name: 'large', value: 20, label: "satisfaction score", size: 150
});
graph5.draw();
Donut Graph with D3 - Script Codes
Donut Graph with D3 - Script Codes
Home Page Home
Developer John W. Long
Username jlong
Uploaded September 24, 2022
Rating 4
Size 4,022 Kb
Views 26,312
Do you need developer help for Donut Graph with D3?

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!

John W. Long (jlong) Script Codes
Name
March of the Smilies
Animated CSS Gauge Loader
Animated CSS Spinner
Animated CSS Flower Spinner
Simple menu 3
Pure CSS Spinners
JSON Code Editor
Simple menu 2
Animated CSS Dots Loader
Animated CSS Google Plus-Like Loader
Create amazing love letters with AI!

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!