derhuerst / svg-radar-chart Goto Github PK
View Code? Open in Web Editor NEWGenerate SVG radar charts.
Home Page: https://derhuerst.github.io/svg-radar-chart/
License: ISC License
Generate SVG radar charts.
Home Page: https://derhuerst.github.io/svg-radar-chart/
License: ISC License
Thank you for the great lightweight script which I'm using successfully on 2 charts. The first has 5 columns & works beautifully. For the 2nd I had to comment out the code below:
columns.reduce((all, column) => { all[column.key] = column return all }, columns)
For some reason it is transforming data with this set of 18 columns:
{1: "Collaboration & Teamwork", 2: "Trustworthiness", 3: "Empathy & Respect", 4: "Relationship-centred Care", 5: "Effective Communication", 6: "Application of Expertise", 7: "Problem-solving", 8: "Managing Workflow", 9: "Continual Learning", 10: "Commitment", 11: "Diligence", 12: "Sustainable Engagement", 13: "Motivation", 14: "Resilience", 15: "Adaptability", 16: "Emotional Competence", 17: "Reflective Self-evaluation", 18: "Self-confidence & Identity"}
into a VirtualNode with every 2nd column replaced with a copy of its predecessor, which then results in an SVG chart with every 2nd column missing. See screenshots below. Weird reduce behaviour, or something I'm doing wrong?
Accepting any h
function would allow users to use the frontend framework of their choice.
I used this code to generate similar chart as show bellow but the result was have so visual differences:
const radar = require('svg-radar-chart');
const stringify = require('virtual-dom-stringify');
var fs = require('fs');
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);
console.log(final);
const chart = radar({
// columns
a: 'a',
b: 'b',
c: 'c',
d: 'd',
e: 'e',
f: 'f',
g: 'g',
h: 'h'
}, [
// data
{
class: 'sab1',
a: final[0] / 10,
b: final[1] / 10,
c: final[2] / 10,
d: final[3] / 10,
e: final[4] / 10,
f: final[5] / 10,
g: final[6] / 10,
h: final[7] / 10
}
]);
const svg = `
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.axis {
stroke-width: .2;
}
.scale {
stroke-width: .3;
}
.shape {
fill-opacity: .3;
}
.shape:hover {
fill-opacity: .6;
}
</style>
${stringify(chart)}
</svg>
`;
//process.stdout.write(svg);
var fname = 'test' + '.svg';
fs.writeFile(fname, svg, function (err) {
if (err) {
return console.log(err);
}
console.log("The file was saved!");
});
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;
}
Preferred Chart:
Output result:
I want to remove opacity & add box shadow of all radars. I am trying to achieve something like this
Can you please guide me?
Hi, playing with your module and find it great. Now what I would like to do is to:
The idea is to have a way to do this radar chart (only alternating colors are the matter here):
I will ask about the captions in another issue.
UPDATE: the chart (image) above was most likely been created with https://github.com/colorfulgrayscale/angular-radial-plot (Angular based component).
16.3.0
to 16.4.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
browserify is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 5 commits.
8980670
16.4.0
f871a85
Update changelog.markdown
52de2c4
Merge pull request #1916 from browserify/stream-http
5dc1bf2
Upgrade stream-http to v3
4a5ea7e
Add funding.yml
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi there,
Thanks so much for your nice work.
Sorry if my question seems dumb to u, but I was wondering how far would we be from making this code in IE?
I tried IE11, added the <meta http-equiv="X-UA-Compatible" content="IE=edge">
, but got no success...
Any plans in this direction?
Thanks in advance for your kind answer
when i set axes true, there is no reaction
Hi Jannis! I guess this is potentially a feature request or a question if you don't have the time.
SVG scares (horrifies me), but your package works wonders and I'm super happy with it. I'm trying to add a title / text to my charts though and I'm not sure where it might go in the package code... do you think you could point me in the right direction / towards the right resources? Thanks!
This is a desirable feature and relatively simple to achieve but I'm not that versed in node.js yet. The captions would look best if they would be in the angle and rotated so the letters are always upside down. Repeating the same image as in other issue for a demonstration (apologizing for that):
Now this is quite good yet even better would to have the captions on the path. For that invisible circle segments (arcs) would need to be added to a chart and used as xlink:href attributes for captions (so they align with the arc). Best example for a coding help is here:
http://bl.ocks.org/nbremer/b603c3e0f7a74794da87
If this would be added to svg-radar-chart, together with alternate colors and possibly a parameter to have linear or logarithmic scales of column values (and scales to adapt as well) it would make svg-radar-chart fully complete and still small in size and versatile.
Hey mate, thanks for your work
Would it be possible to add JSDoc to the exposed methods of your project so that we can benefit from types? Or export a ts file for typescript users?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.