Menu
I have used the following tutorial of D3js to generate my preferred chart. but I had to open HTML file to chart generated instead it should be part of the automated process to generate SVG file on server-side instead of front-end.
Tutorial : http://bl.ocks.org/nbremer/21746a9668ffdf6d8242
Result is an array of test data. in a real application, it was generated by several processes the final step is to make a sub-total and from sub-total generate SVG output and send it to a specific person.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Smoothed D3.js Radar Chart</title>
<script src="./d3.js" charset="utf-8"></script>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 300;
fill: #242424;
text-align: center;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
cursor: default;
}
.legend {
font-family: 'Raleway', sans-serif;
fill: #333333;
}
.tooltip {
fill: #333333;
}
</style>
</head>
<body>
<div class="radarChart"></div>
<a id="download" href="#">Download SVG</a>
<script src="radarChart.js"></script>
<script>
const result = [1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 2, 0, 0];
var final = sort(result);
var margin = {
top: 100,
right: 100,
bottom: 100,
left: 100
},
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
var data = [
[
{
axis: "a",
value: final[0],
},
{
axis: "b",
value: final[1],
},
{
axis: "c",
value: final[2],
},
{
axis: "d",
value:final[3],
},
{
axis: "e",
value: final[4],
},
{
axis: "f",
value:final[5],
},
{
axis: "g",
value: final[6],
},
{
axis: "h",
value: final[7],
}
]
];
var color = d3.scale.ordinal()
.range(["#EDC951", "#CC333F", "#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
function sort(result) {
var newr = [
[0],
[0],
[0],
[0],
[0],
[0],
[0],
[0]
];
var j = 0;
var p = 0;
for (var i = 0; i != 7; i++) {
var ip = 0;
for (var k = j; k != 7; k++) {
newr[ip].push(result[p]);
p++;
ip++
}
j++;
}
for (var i = 0; i != 7; i++) {
ip = i + 1;
for (var k = i + 1; k != 8; k++) {
newr[ip].unshift(result[p]);
p++;
ip++
}
}
return subtotall(newr);
}
function subtotall(newr) {
var total = [0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (newr[i][j] == 1) {
total[i] = total[i] + 1;
}
}
}
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (newr[j][i] == 2) {
total[i] = total[i] + 1;
}
}
}
return total;
}
RadarChart(".radarChart", data, radarChartOptions);
var svg = d3.select(".radarChart svg")
.attr("id", "visualization")
.attr("xmlns", "http://www.w3.org/2000/svg");
d3.select("#download").on("click", function(){
d3.select(this)
.attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select(".radarChart").html()))
.attr("download", "viz.svg")
})
</script>
</body>
</html>
I am not a professional coder but I try to be better.
478
I made an example in case that helps:
#!/usr/bin/env node
var d3 = require("d3"),
jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM('')).window;
global.document = document;
var body = d3.select(document).select("body");
var width = 300;
var height = 300;
var svg = body.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
const fs = require('fs');
fs.writeFileSync("test.svg", body.node().innerHTML)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
