Packaged bargraph for release under MIT license
This commit is contained in:
parent
3471227d55
commit
a6793ac03e
26
drawbar.js
26
drawbar.js
@ -1,4 +1,30 @@
|
||||
/* This code is copywrite Telos Digital 2025 working for Telos Partners:
|
||||
|
||||
https://www.telospartners.com/
|
||||
|
||||
It is released under the MIT licence https://opensource.org/license/mit
|
||||
|
||||
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the “Software”), to
|
||||
deal in the Software without restriction, including without limitation the
|
||||
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||
sell copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
function drawBar(id,data) {
|
||||
|
||||
121
indexbar.html
121
indexbar.html
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bar Chart - Fixed Height Bars</title>
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<script src="./drawbar.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
@ -35,113 +36,29 @@
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="startdrawing();">
|
||||
<p>This is a minimal example of the barchart created as part of a Telos Partners contract
|
||||
copyright 2025, and released under the <a href="https://opensource.org/license/mit">MIT license.</a>
|
||||
</p>
|
||||
|
||||
<svg id="bargraph" width="800" height="200"></svg>
|
||||
|
||||
<svg width="600" height="200"></svg>
|
||||
|
||||
<script>
|
||||
const svg = d3.select("svg");
|
||||
const width = +svg.attr("width");
|
||||
const height = +svg.attr("height");
|
||||
const margin = { top: 40, right: 30, bottom: 40, left: 30 };
|
||||
|
||||
const data = {
|
||||
"-3": 0,
|
||||
"-2": 1,
|
||||
"-1": 3,
|
||||
"0": 0,
|
||||
"1": 2,
|
||||
"2": 0,
|
||||
"3": 6
|
||||
};
|
||||
function startdrawing() {
|
||||
const data = {
|
||||
"-3": 0,
|
||||
"-2": 1,
|
||||
"-1": 3,
|
||||
"0": 0,
|
||||
"1": 2,
|
||||
"2": 0,
|
||||
"3": 6
|
||||
};
|
||||
|
||||
// Convert object to array of {key, value}
|
||||
const dataArray = Object.entries(data).map(([key, count]) => ({
|
||||
key: +key,
|
||||
count: count,
|
||||
show: count > 0
|
||||
}));
|
||||
|
||||
// Scales
|
||||
const x = d3.scaleBand()
|
||||
.domain(d3.range(-3, 4)) // [-3, -2, ..., 3]
|
||||
.range([margin.left, width - margin.right])
|
||||
.padding(0); //space between bars
|
||||
|
||||
const y = d3.scaleLinear()
|
||||
.domain([0, 1]) // fixed height of 1
|
||||
.range([height - margin.bottom, margin.top]);
|
||||
|
||||
// X-axis
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(0,${height - margin.bottom})`)
|
||||
.call(d3.axisBottom(x).tickFormat(d => d))
|
||||
.attr("class", "axis");
|
||||
|
||||
// Draw bars
|
||||
svg.selectAll(".bar")
|
||||
.data(dataArray)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("class", "bar")
|
||||
.attr("x", d => x(d.key))
|
||||
.attr("y", d => d.show ? y(1) : y(0))
|
||||
.attr("width", x.bandwidth())
|
||||
.attr("height", d => d.show ? y(0) - y(1) : 0);
|
||||
|
||||
//Add values above bars:
|
||||
svg.selectAll(".bar-label")
|
||||
.data(dataArray)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("class", "bar-label")
|
||||
.attr("x", d => x(d.key) + x.bandwidth() / 2)
|
||||
.attr("y", d => d.count > 0 ? y(1) - 5 : y(0)) // 5px above the bar
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-size", "12px")
|
||||
.attr("fill", "black")
|
||||
.text(d => d.count > 0 ? d.count : "");
|
||||
|
||||
// Display average line
|
||||
|
||||
const totalCount = d3.sum(dataArray, d => d.count);
|
||||
const weightedSum = d3.sum(dataArray, d => d.key * d.count);
|
||||
const average = totalCount > 0 ? weightedSum / totalCount : 0;
|
||||
|
||||
const xLinear = d3.scaleLinear()
|
||||
.domain([-3, 3])
|
||||
.range([margin.left + x.bandwidth() / 2, width - margin.right - x.bandwidth() / 2]);
|
||||
|
||||
const averageX = xLinear(average);
|
||||
|
||||
// Draw the vertical red line
|
||||
svg.append("line")
|
||||
.attr("x1", averageX)
|
||||
.attr("x2", averageX)
|
||||
.attr("y1", y(0))
|
||||
.attr("y2", y(1) - 20) //raise by 20px
|
||||
.attr("stroke", "red")
|
||||
.attr("stroke-width", 2)
|
||||
.attr("stroke-dasharray", "4,2"); // Optional dashed line
|
||||
|
||||
// Add "Average" label above the line
|
||||
const formatAvg = d3.format(".2f");
|
||||
svg.append("text")
|
||||
.attr("x", averageX)
|
||||
.attr("y", y(1) - 30) //was -10
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("fill", "red")
|
||||
.attr("font-size", "12px")
|
||||
.text(`Average(mean): ${formatAvg(average)}`);
|
||||
|
||||
// Title beneath the graph
|
||||
svg.append("text")
|
||||
.attr("x", width / 2)
|
||||
.attr("y", height - 5) // Just below the x-axis
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-size", "14px")
|
||||
.attr("fill", "black")
|
||||
.text("Demo bar graph");
|
||||
drawBar('#bargraph',data);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user