mirror of
https://github.com/gchq/CyberChef.git
synced 2025-05-09 15:55:01 -04:00
Revert "added word cloud chart operation"
This commit is contained in:
parent
a218f0aa47
commit
69770f9395
5 changed files with 32 additions and 691 deletions
|
@ -488,8 +488,7 @@
|
|||
"Hex Density chart",
|
||||
"Scatter chart",
|
||||
"Series chart",
|
||||
"Heatmap chart",
|
||||
"Wordcloud chart"
|
||||
"Heatmap chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
import * as d3temp from "d3";
|
||||
const d3 = d3temp.default ? d3temp.default : d3temp;
|
||||
import cloud from "d3-cloud";
|
||||
|
||||
/**
|
||||
* Various components for drawing diagrams on an HTML5 canvas.
|
||||
*
|
||||
|
@ -206,56 +202,3 @@ export function drawScaleBar(canvas, score, max, markings) {
|
|||
ctx.fillText(markings[i].label, x0, y0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Draws a word cloud chart.
|
||||
*
|
||||
* @param canvas
|
||||
* @param words
|
||||
*/
|
||||
export function drawWordCloudChart(canvas, words) {
|
||||
const dimension = 500;
|
||||
let svg = document.createElement("svg");
|
||||
svg = d3.select(svg)
|
||||
.attr("width", "100%")
|
||||
.attr("height", "100%")
|
||||
.attr("viewBox", `0 0 ${dimension} ${dimension}`);
|
||||
|
||||
const margin = {
|
||||
top: 10,
|
||||
right: 0,
|
||||
bottom: 40,
|
||||
left: 30,
|
||||
},
|
||||
width = dimension - margin.left - margin.right,
|
||||
height = dimension - margin.top - margin.bottom,
|
||||
marginedSpace = svg.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
marginedSpace.append("clipPath")
|
||||
.attr("id", "clip")
|
||||
.append("rect")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
marginedSpace.append("g")
|
||||
.attr("class", "bins")
|
||||
.attr("clip-path", "url(#clip)");
|
||||
// Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
|
||||
|
||||
cloud().size([960, 500])
|
||||
.canvas(canvas)
|
||||
.words(words)
|
||||
.padding(2)
|
||||
.rotate(() => Math.floor(Math.random() * 2) * 90)
|
||||
.font("sans-serif")
|
||||
.fontSize(d => {
|
||||
return d.size * 30;
|
||||
})
|
||||
.fontWeight("lighter")
|
||||
.on("end", (data) => {
|
||||
})
|
||||
.start();
|
||||
}
|
||||
|
||||
|
|
|
@ -1,74 +0,0 @@
|
|||
/**
|
||||
* @author tlwr [toby@toby.codes]
|
||||
* @author Matt C [me@mitt.dev]
|
||||
* @copyright Crown Copyright 2019
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
import Operation from "../Operation.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Wordcloud chart operation
|
||||
*/
|
||||
class WordcloudChart extends Operation {
|
||||
|
||||
/**
|
||||
* WordcloudChart constructor
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.name = "Wordcloud chart";
|
||||
this.module = "Charts";
|
||||
this.description = "Word Cloud Chart is a visualization method that allows you to quickly see which words appear more frequently in a bunch of text";
|
||||
this.infoURL = "https://en.wikipedia.org/wiki/Tag_cloud";
|
||||
this.inputType = "string";
|
||||
this.outputType = "html";
|
||||
this.args = [
|
||||
{
|
||||
name: "Exclude Words",
|
||||
type: "string",
|
||||
values: "A, The, And"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Wordcloud chart operation.
|
||||
*
|
||||
* @param {string} input
|
||||
* @param {Object[]} args
|
||||
* @returns {html}
|
||||
*/
|
||||
run(input, args) {
|
||||
const excludeWords = args[0];
|
||||
const uniqueWords = [...new Set(input.split(" "))].filter((word) => !excludeWords.includes(word));
|
||||
|
||||
const count = input.split(" ").reduce((acc, curr) => {
|
||||
acc[curr] = -~acc[curr];
|
||||
return acc;
|
||||
}, {});
|
||||
const words = uniqueWords
|
||||
.map(function(d) {
|
||||
return {text: d, size: count[d]};
|
||||
});
|
||||
const output = `<canvas id='chart-area'></canvas><br>
|
||||
|
||||
<script>
|
||||
var canvas = document.getElementById("chart-area"),
|
||||
parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
|
||||
inputWords = ${JSON.stringify(words)};
|
||||
|
||||
canvas.width = parentRect.width * 0.95;
|
||||
canvas.height = parentRect.height * 0.9;
|
||||
|
||||
CanvasComponents.drawWordCloudChart(canvas, inputWords);
|
||||
</script>`;
|
||||
return output;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default WordcloudChart;
|
Loading…
Add table
Add a link
Reference in a new issue