Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 4,592 Bytes 
1124cb0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
<html><head><base href="https://websim.ai/c/graph" /><title>CSV to Graph - WebSim Analytics</title><style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f4f8;
  }
  h1, h2 {
    color: #2c3e50;
  }
  .container {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  #csvInput {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
  }
  #graphContainer {
    width: 100%;
    height: 500px;
  }
  .button {
    background-color: #3498db;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  .button:hover {
    background-color: #2980b9;
  }
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head><body>
  <div class="container">
    <h1>CSV to Graph - WebSim Analytics</h1>
    <p>Transform your CSV data into beautiful, interactive graphs with our WebSim Analytics tool. Simply paste your CSV data below and click "Generate Graph" to visualize your data instantly.</p>
    
    <h2>Input Your CSV Data</h2>
    <textarea id="csvInput" placeholder="Paste your CSV data here..."></textarea>
    <button id="generateGraph" class="button">Generate Graph</button>
    
    <div id="graphContainer"></div>
    
    <h2>How to Use</h2>
    <ol>
      <li>Paste your CSV data into the text area above. The first row should contain column headers.</li>
      <li>Click the "Generate Graph" button to create your visualization.</li>
      <li>Interact with the graph: zoom, pan, and hover over data points for more information.</li>
    </ol>
    
    <h2>Features</h2>
    <ul>
      <li>Automatic detection of data types (numeric, date, categorical)</li>
      <li>Smart selection of appropriate chart types based on your data</li>
      <li>Interactive graphs with zoom, pan, and hover functionality</li>
      <li>Export options for PNG, SVG, and interactive HTML</li>
    </ul>
    
    <p>Need help or have questions? Check out our <a href="https://websim.ai/docs/analytics">documentation</a> or <a href="https://websim.ai/support">contact support</a>.</p>
  </div>

  <script>
    document.getElementById('generateGraph').addEventListener('click', function() {
      const csvData = document.getElementById('csvInput').value;
      const parsedData = parseCSV(csvData);
      createGraph(parsedData);
    });

    function parseCSV(csv) {
      const lines = csv.split('\n');
      const headers = lines[0].split(',');
      const data = [];
      
      for (let i = 1; i < lines.length; i++) {
        const values = lines[i].split(',');
        if (values.length === headers.length) {
          const row = {};
          for (let j = 0; j < headers.length; j++) {
            row[headers[j]] = values[j];
          }
          data.push(row);
        }
      }
      
      return { headers, data };
    }

    function createGraph(parsedData) {
      const { headers, data } = parsedData;
      
      // Determine data types
      const dataTypes = headers.map(header => {
        const values = data.map(row => row[header]);
        if (values.every(value => !isNaN(value))) return 'numeric';
        if (values.every(value => !isNaN(Date.parse(value)))) return 'date';
        return 'categorical';
      });
      
      // Choose appropriate chart type
      let chartType, xAxis, yAxis;
      if (dataTypes.includes('date')) {
        chartType = 'scatter';
        xAxis = headers[dataTypes.indexOf('date')];
        yAxis = headers.find((header, index) => dataTypes[index] === 'numeric');
      } else if (dataTypes.filter(type => type === 'numeric').length >= 2) {
        chartType = 'scatter';
        xAxis = headers[dataTypes.indexOf('numeric')];
        yAxis = headers[dataTypes.lastIndexOf('numeric')];
      } else {
        chartType = 'bar';
        xAxis = headers[dataTypes.indexOf('categorical')];
        yAxis = headers[dataTypes.indexOf('numeric')];
      }
      
      // Prepare plot data
      const plotData = [{
        x: data.map(row => row[xAxis]),
        y: data.map(row => row[yAxis]),
        type: chartType,
        mode: 'lines+markers'
      }];
      
      // Set up layout
      const layout = {
        title: `${yAxis} vs ${xAxis}`,
        xaxis: { title: xAxis },
        yaxis: { title: yAxis }
      };
      
      // Create the plot
      Plotly.newPlot('graphContainer', plotData, layout);
    }
  </script>
</body></html>