Horizontal Bar Graph with D3

Developer
John W. Long
Size
2,944 Kb
Views
32,384
  1. Horizontal Bar Graph with D3 Previews
  2. Horizontal Bar Graph with D3 HTML Codes
  3. Horizontal Bar Graph with D3 CSS Codes
  4. Horizontal Bar Graph with D3 JS Codes

How do I make an horizontal bar graph with d3?

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

Horizontal Bar Graph with D3 Previews
IQ Test

Horizontal Bar Graph with D3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal Bar 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 class="horizontal-bar-graph" id="my-graph"></div> <script src='https://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horizontal Bar Graph with D3 - Script Codes CSS Codes

body { font-family: sans-serif; font-weight: 100; padding: 50px;
}
.horizontal-bar-graph { display: table; width: 100%;
}
.horizontal-bar-graph-segment { display: table-row;
}
.horizontal-bar-graph-label { display: table-cell; border-right: 1px solid silver; text-align: right; padding: 4px 10px 4px 0; vertical-align: baseline; white-space: nowrap;
}
.horizontal-bar-graph-value { display: table-cell; padding: 3px 0; vertical-align: baseline; width: 100%;
}
.horizontal-bar-graph-value-bar { background: silver; -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; box-sizing: padding-box; padding: 4px 4px 3px; height: 1em; text-align: right; color: white; overflow: visible; display: inline-block; white-space: nowrap; -webkit-font-smoothing: antialiased;
}
.horizontal-bar-graph-segment:first-child .horizontal-bar-graph-label { padding-top: 12px;
}
.horizontal-bar-graph-segment:first-child .horizontal-bar-graph-value { padding-top: 11px;
}
.horizontal-bar-graph-segment:last-child .horizontal-bar-graph-label { padding-bottom: 12px;
}
.horizontal-bar-graph-segment:last-child .horizontal-bar-graph-value { padding-bottom: 11px;
}

Horizontal Bar Graph with D3 - Script Codes JS Codes

HorizontalBarGraph = function(el, series) { this.el = d3.select(el); this.series = series;
};
HorizontalBarGraph.prototype.draw = function() { var x = d3.scale.linear() .domain([0, d3.max(this.series, function(d) { return d.value })]) .range([0, 100]); var segment = this.el .selectAll(".horizontal-bar-graph-segment") .data(this.series) .enter() .append("div").classed("horizontal-bar-graph-segment", true); segment .append("div").classed("horizontal-bar-graph-label", true) .text(function(d) { return d.label }); segment .append("div").classed("horizontal-bar-graph-value", true) .append("div").classed("horizontal-bar-graph-value-bar", true) .style("background-color", function(d) { return d.color }) .text(function(d) { return d.inner_label ? d.inner_label : "" }) .transition() .duration(1000) .style("min-width", function(d) { return x(d.value) + "%" });
};
var graph = new HorizontalBarGraph('#my-graph', [ {label: "Desktop", inner_label: "1,167 visits", value: 1167, color: "#6ea6df" }, {label: "Mobile", inner_label: "543 visits", value: 543, color: "#84c26d" }, {label: "Tablet", inner_label: "224 visits", value: 224, color: "#e17a69" }
]);
graph.draw();
Horizontal Bar Graph with D3 - Script Codes
Horizontal Bar Graph with D3 - Script Codes
Home Page Home
Developer John W. Long
Username jlong
Uploaded September 24, 2022
Rating 3.5
Size 2,944 Kb
Views 32,384
Do you need developer help for Horizontal Bar 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
Simple menu 3
Animated CSS Throbber
Simple menu 1
The Matrix in Sass
Simple menu
Donut Graph with D3
JSON Code Editor
Animated CSS Timer Spinner
Modular Typography
Modular Form Styles
Create amazing blog posts 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!