Skip to content

Wordcloud Prompt

This section describes the challenges of using p5.js to create a wordcloud diagram for a signal processing course. It also shows how the specialized JavaScript library wordcloud2.js does a much better job at placing words on a page.

P5.js Prompt

1
2
3
4
5
Create a list of the 50 most important terms in signal processing. 
Create a JavaScript program that displays a word-cloud of
these words using the vis.js application.  Use size the words to
reflect how often they are mentioned in a typical college-level
textbook on signal processing.

ChatGPT Response

Here's a list of 50 important terms in signal processing along with their relative frequency of mention in a typical college-level textbook. The words with higher importance will have a larger font size in the word cloud.

Signal Processing Terms and Frequencies

  1. Signal (80)
  2. Noise (75)
  3. Filter (70)
  4. Fourier Transform (65)
  5. Sampling (60)
  6. Convolution (60)
  7. Frequency (58)
  8. Time Domain (55)
  9. Spectral Analysis (50)
  10. Amplitude (48)
  11. Discrete Fourier Transform (DFT) (48)
  12. Impulse Response (47)
  13. Phase (46)
  14. Quantization (45)
  15. Z-Transform (45)
  16. Laplace Transform (42)
  17. Modulation (40)
  18. Aliasing (40)
  19. Bandpass Filter (39)
  20. Lowpass Filter (39)
  21. Transfer Function (38)
  22. Linear Time-Invariant (LTI) Systems (37)
  23. Digital Filter (36)
  24. Decimation (35)
  25. Interpolation (35)
  26. Autocorrelation (34)
  27. Power Spectrum (33)
  28. Windowing (33)
  29. Cross-correlation (33)
  30. Downsampling (32)
  31. Upsampling (32)
  32. Sinc Function (30)
  33. Butterworth Filter (30)
  34. Chebyshev Filter (29)
  35. Wavelet Transform (28)
  36. Hilbert Transform (27)
  37. Nyquist Rate (26)
  38. Sampling Theorem (25)
  39. Impulse (24)
  40. Bandwidth (23)
  41. Oversampling (23)
  42. Step Response (22)
  43. Causal System (22)
  44. Non-causal System (21)
  45. Bode Plot (20)
  46. Frequency Response (19)
  47. Zero-Padding (19)
  48. Notch Filter (18)
  49. Phase Shift (18)
  50. Fast Fourier Transform (FFT) (18)

JavaScript Program to Create a Word Cloud using vis.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signal Processing Word Cloud</title>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style>
        #network {
            width: 100%;
            height: 100vh;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>

<div id="network"></div>

<script type="text/javascript">
    // Data for the word cloud
    const words = [
        {label: "Signal", value: 80},
        {label: "Noise", value: 75},
        {label: "Filter", value: 70},
        {label: "Fourier Transform", value: 65},
        {label: "Sampling", value: 60},
        {label: "Convolution", value: 60},
        {label: "Frequency", value: 58},
        {label: "Time Domain", value: 55},
        {label: "Spectral Analysis", value: 50},
        {label: "Amplitude", value: 48},
        {label: "Discrete Fourier Transform (DFT)", value: 48},
        {label: "Impulse Response", value: 47},
        {label: "Phase", value: 46},
        {label: "Quantization", value: 45},
        {label: "Z-Transform", value: 45},
        {label: "Laplace Transform", value: 42},
        {label: "Modulation", value: 40},
        {label: "Aliasing", value: 40},
        {label: "Bandpass Filter", value: 39},
        {label: "Lowpass Filter", value: 39},
        {label: "Transfer Function", value: 38},
        {label: "Linear Time-Invariant (LTI) Systems", value: 37},
        {label: "Digital Filter", value: 36},
        {label: "Decimation", value: 35},
        {label: "Interpolation", value: 35},
        {label: "Autocorrelation", value: 34},
        {label: "Power Spectrum", value: 33},
        {label: "Windowing", value: 33},
        {label: "Cross-correlation", value: 33},
        {label: "Downsampling", value: 32},
        {label: "Upsampling", value: 32},
        {label: "Sinc Function", value: 30},
        {label: "Butterworth Filter", value: 30},
        {label: "Chebyshev Filter", value: 29},
        {label: "Wavelet Transform", value: 28},
        {label: "Hilbert Transform", value: 27},
        {label: "Nyquist Rate", value: 26},
        {label: "Sampling Theorem", value: 25},
        {label: "Impulse", value: 24},
        {label: "Bandwidth", value: 23},
        {label: "Oversampling", value: 23},
        {label: "Step Response", value: 22},
        {label: "Causal System", value: 22},
        {label: "Non-causal System", value: 21},
        {label: "Bode Plot", value: 20},
        {label: "Frequency Response", value: 19},
        {label: "Zero-Padding", value: 19},
        {label: "Notch Filter", value: 18},
        {label: "Phase Shift", value: 18},
        {label: "Fast Fourier Transform (FFT)", value: 18}
    ];

    // Create nodes for the word cloud
    const nodes = words.map((word, index) => ({
        id: index,
        label: word.label,
        font: {
            size: word.value * 1.5
        },
        value: word.value
    }));

    // Create a network
    const container = document.getElementById('network');
    const data = {nodes: new vis.DataSet(nodes)};
    const options = {
        nodes: {
            shape: 'text',
        },
        physics: {
            enabled: false
        },
        layout: {
            randomSeed: 42 // Makes layout deterministic
        }
    };
    const network = new vis.Network(container, data, options);
</script>

</body>
</html>

Instructions

  1. Open a new HTML file.
  2. Copy and paste the code above.
  3. Save and open the file in a web browser.

This will create a word cloud, with larger words reflecting the more frequently mentioned terms in a typical signal processing textbook. The vis.js library uses physics-based layout, but here it is disabled for a word-cloud-like appearance.

A Better Way: Use the wordcloud2.js JavaScript Library

Sample wordcloud2 Prompt

Create a new javascript program using the wordcloud2.js program here:

https://github.com/timdream/wordcloud2.js

Assume that the data is in the file words.json

Response

Here’s how you can create a word cloud using the wordcloud2.js library with data from a words.json file. First, ensure you have the wordcloud2.js library included in your project.

Step 1: Include wordcloud2.js

Download or link to the wordcloud2.js library from here or use a CDN link directly in your HTML file.

Step 2: Create the HTML file

Here’s an HTML file that includes wordcloud2.js and loads the word data from words.json:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signal Processing Word Cloud</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script>
    <style>
        #wordcloud {
            width: 100%;
            height: 100vh;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>

<div id="wordcloud"></div>

<script type="text/javascript">
    // Load the JSON file
    fetch('words.json')
        .then(response => response.json())
        .then(data => {
            // Convert the data to the format expected by wordcloud2.js
            const words = data.words.map(word => [word.label, word.value]);

            // Generate the word cloud
            WordCloud(document.getElementById('wordcloud'), {
                list: words,
                gridSize: Math.round(16 * window.innerWidth / 1024),
                weightFactor: 0.5,  // Adjusts the size of the words
                fontFamily: 'Times, serif',
                color: 'random-dark',
                rotateRatio: 0.5,
                rotationSteps: 2,
                backgroundColor: '#f0f0f0'
            });
        })
        .catch(error => console.error('Error loading the JSON file:', error));
</script>

</body>
</html>

Step 3: JSON Data (words.json)

Here’s the words.json file that contains the word data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
  "words": [
    {"label": "Signal", "value": 80},
    {"label": "Noise", "value": 75},
    {"label": "Filter", "value": 70},
    {"label": "Fourier Transform", "value": 65},
    {"label": "Sampling", "value": 60},
    {"label": "Convolution", "value": 60},
    {"label": "Frequency", "value": 58},
    {"label": "Time Domain", "value": 55},
    {"label": "Spectral Analysis", "value": 50},
    {"label": "Amplitude", "value": 48},
    {"label": "Discrete Fourier Transform (DFT)", "value": 48},
    {"label": "Impulse Response", "value": 47},
    {"label": "Phase", "value": 46},
    {"label": "Quantization", "value": 45},
    {"label": "Z-Transform", "value": 45},
    {"label": "Laplace Transform", "value": 42},
    {"label": "Modulation", "value": 40},
    {"label": "Aliasing", "value": 40},
    {"label": "Bandpass Filter", "value": 39},
    {"label": "Lowpass Filter", "value": 39},
    {"label": "Transfer Function", "value": 38},
    {"label": "Linear Time-Invariant (LTI) Systems", "value": 37},
    {"label": "Digital Filter", "value": 36},
    {"label": "Decimation", "value": 35},
    {"label": "Interpolation", "value": 35},
    {"label": "Autocorrelation", "value": 34},
    {"label": "Power Spectrum", "value": 33},
    {"label": "Windowing", "value": 33},
    {"label": "Cross-correlation", "value": 33},
    {"label": "Downsampling", "value": 32},
    {"label": "Upsampling", "value": 32},
    {"label": "Sinc Function", "value": 30},
    {"label": "Butterworth Filter", "value": 30},
    {"label": "Chebyshev Filter", "value": 29},
    {"label": "Wavelet Transform", "value": 28},
    {"label": "Hilbert Transform", "value": 27},
    {"label": "Nyquist Rate", "value": 26},
    {"label": "Sampling Theorem", "value": 25},
    {"label": "Impulse", "value": 24},
    {"label": "Bandwidth", "value": 23},
    {"label": "Oversampling", "value": 23},
    {"label": "Step Response", "value": 22},
    {"label": "Causal System", "value": 22},
    {"label": "Non-causal System", "value": 21},
    {"label": "Bode Plot", "value": 20},
    {"label": "Frequency Response", "value": 19},
    {"label": "Zero-Padding", "value": 19},
    {"label": "Notch Filter", "value": 18},
    {"label": "Phase Shift", "value": 18},
    {"label": "Fast Fourier Transform (FFT)", "value": 18}
  ]
}

Explanation of the Code

• HTML: The word cloud is displayed in the #wordcloud div, which fills the entire viewport. • JavaScript: • The fetch() function loads the words.json file. • The words are mapped to the format expected by wordcloud2.js, which is a list of arrays where each array contains a word and its weight (size). • The WordCloud() function generates the word cloud in the target element (#wordcloud). • The gridSize and weightFactor properties help control the size and spacing of the words. You can adjust these values to further fine-tune the appearance.

Notes:

  1. wordcloud2.js: Ensure you have the library correctly referenced via the CDN link or by downloading it.
  2. File Paths: The words.json file should be in the same directory as your HTML file, or modify the fetch() path if it is located elsewhere.

This setup will generate a word cloud based on the word frequencies in the JSON file!