The latest articles on DEV Community by jack (@xinmuli). https://dev.to/xinmuli https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3849469%2F996f75ff-5c26-4406-884f-e074713c6360.png https://dev.to/xinmuli en jack Sun, 29 Mar 2026 14:42:09 +0000 https://dev.to/xinmuli/i-built-sheetviz-turn-csvexcel-into-shareable-charts-in-seconds-no-signup-4pll https://dev.to/xinmuli/i-built-sheetviz-turn-csvexcel-into-shareable-charts-in-seconds-no-signup-4pll <h2> The problem I was solving </h2> <p>I kept running into the same situation: someone shares a CSV, I need a quick visual, but opening Excel or Google Sheets just to make one chart felt like overkill.</p> <p>I wanted something like:</p> <blockquote> <p>Drop file → see chart → share link. Done.</p> </blockquote> <p>That's <strong>SheetViz</strong>.</p> <h2> What it does </h2> <ul> <li> <strong>Upload CSV or XLSX</strong> — or just paste raw data</li> <li> <strong>Auto field detection</strong> — figures out which columns are strings, numbers, or dates</li> <li> <strong>Chart recommendations</strong> — suggests bar, line, pie, or scatter based on your data shape</li> <li> <strong>PNG export</strong> — one click</li> <li> <strong>Shareable static links</strong> — no account, no login wall</li> </ul> <p>Try it: <a href="https://sheetviz.shop" rel="noopener noreferrer">sheetviz.shop</a></p> <h2> Tech stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Layer</th> <th>Choice</th> <th>Why</th> </tr> </thead> <tbody> <tr> <td>Framework</td> <td>Next.js 14 (App Router)</td> <td>Fast SSR + static export</td> </tr> <tr> <td>Styling</td> <td>Tailwind CSS</td> <td>No-brainer for quick UI</td> </tr> <tr> <td>Charts</td> <td>ECharts</td> <td>Powerful, flexible, good defaults</td> </tr> <tr> <td>CSV parsing</td> <td>PapaParse</td> <td>Battle-tested, handles edge cases</td> </tr> <tr> <td>Excel parsing</td> <td>SheetJS</td> <td>Industry standard for XLSX</td> </tr> <tr> <td>Hosting</td> <td>Cloudflare Pages</td> <td>Free, fast, auto-deploy from GitHub</td> </tr> </tbody> </table></div> <h2> The chart recommendation logic </h2> <p>This was the most interesting part to build. The heuristic:</p> <ol> <li> <strong>Count columns by type</strong> (numeric vs. categorical vs. date)</li> <li> <strong>Count unique values</strong> in categorical columns</li> <li>Apply rules: <ul> <li>Date column + numeric column → <strong>line chart</strong> </li> <li>One categorical (≤ 6 unique) + one numeric → <strong>pie chart</strong> </li> <li>One categorical + one numeric → <strong>bar chart</strong> </li> <li>Two numeric columns → <strong>scatter plot</strong> </li> <li>Default → <strong>bar chart</strong> </li> </ul> </li> </ol> <p>It's simple but covers 80% of real-world cases. PRs welcome for edge cases.</p> <h2> Lessons learned </h2> <p><strong>What went well:</strong></p> <ul> <li>ECharts' responsive config made mobile support almost free</li> <li>PapaParse's <code>dynamicTyping: true</code> handles number detection cleanly</li> <li>Cloudflare Pages + GitHub = zero-config CI/CD</li> </ul> <p><strong>What I'd do differently:</strong></p> <ul> <li>Add a data preview step before rendering the chart</li> <li>Support multi-series charts earlier (currently single-series only)</li> <li>Add column selection UI instead of auto-picking</li> </ul> <h2> What's next </h2> <ul> <li>[ ] Multi-series support</li> <li>[ ] More chart types (area, histogram, heatmap)</li> <li>[ ] Shareable embed codes</li> <li>[ ] Data transformation (filter, sort, group by)</li> </ul> <h2> Try it / feedback welcome </h2> <p>🔗 <a href="https://sheetviz.shop" rel="noopener noreferrer">sheetviz.shop</a></p> <p>Would love feedback on:</p> <ul> <li>The chart recommendation logic — what rules would you add?</li> <li>What chart types matter most to you?</li> <li>Any data formats I'm missing?</li> </ul> <p><em>Built with Next.js, ECharts, and too much coffee.</em></p> data nextjs productivity showdev