Data Visualization in Apps

“Show me your data plot!” That was the first thing the professor said when I tried to explain my ML model in graduate school at MIT. Not the accuracy. Not the loss curve. Not the architecture. The plot. Over time, I realized, visualization is not the final step of machine learning. It is the first one. Before we build anything we need to understand what we are working with. And to understand it, we need to see it. This week, I taught a lecture on data visualization for ML using Matplotlib, Seaborn, and Plotly on Vizuara's YouTube channel: https://lnkd.in/dQTQYccT We walked through a complete exploratory data analysis (EDA) pipeline, starting with foundational charts and ending with interactive, dynamic visualizations. And through that, I was reminded of a principle I often forget: A good plot does not just summarize your data. A good plot changes what you believe about your data. You are not always building models for yourself. You are building for a client, reviewer or even a policymaker. They will not read your code. They may not understand your metrics. But they will look at your plots. Visualization is what makes machine learning interpretable - not only to others, but to you. And that matters more than ever. -A boxplot reveals whether a feature is skewed. -A scatterplot shows whether it separates your classes. -A correlation heatmap tells you what is redundant. -A violin plot raises questions about fairness. The stack: Matplotlib, Seaborn, Plotly Each of the three libraries plays a different role in the data visualization journey. 1) matplotlib: The bedrock. Sometimes verbose, but it gives you full control. Perfect for plotting model metrics, trends, and comparisons. Think of it as the NumPy of plotting. 2) seaborn: Statistical plotting done right. One-liner plots that look beautiful and convey distributions, relationships, and groups instantly. Use it for EDA - where every plot leads to a new hypothesis. 3) plotly: The bridge to interaction. If you want to share a story, demo a dataset, or explore it dynamically - this is the tool. Interactive histograms, 3D scatter plots, tooltips on hover. Especially powerful for explaining your work to non-technical stakeholders. Data visualization is not about being fancy. It is about being thoughtful. If you cannot explain your dataset visually, you are not ready to model it. If you cannot explain your model’s results visually, you are not ready to defend it. No one ever changed their mind because of an F1-score. But stunning plot? Those make people pause. Those change narratives. As ML gets more complex - with deeper models, larger datasets, and higher stakes - our ability to communicate clearly will matter more, not less. So if you are starting out in ML - start here. Learn to see before you try to predict. The plots will tell you where to go.

Tip to generate visualization for your data using LLM: Using LLMs to generate visualizations is a commonly underestimated area (and surprisingly, I haven’t seen many discussions on this). I’ve spoken with many customers recently, and they all ask: how can we get LLMs to produce better visualizations? Some tips, lessons learned: 🚀 (Choose a framework & spec) First, decide where you’ll display these visuals: a Python notebook, a JavaScript app, or static images. Then pick a popular framework with a published specification you can validate. Validating the spec isn’t just about correctness—it also guards against security risks. You don’t want an LLM randomly spitting out unchecked JavaScript that could expose vulnerabilities. 📊 (Syntax correctness) LLMs “know” Plotly, ECharts, Recharts, Vega-Lite, etc., but not every library fits every context. Embedding Plotly in a web app can balloon dependencies; Recharts lacks a formal spec; that often leaves Vega-Lite or ECharts. We chose Vega-Lite for its balance of power and a clear grammar. Even then, you can’t trust an LLM to handle every corner case. E.g. Misusing `timeUnit` can completely destroy an area chart. Always validate: the chart must render, reference the right fields, apply the right aggregations, and avoid conflicting settings. ✨ (Readability) Once it renders, readability is your next frontier. A bar chart with 50 tick labels is like reading street names on a crowded map. For such case, swap axes or show only the top N entries to keep things legible. Watch your labels too: “1,997” for a year or “21,290,189,100” for a total value looks confusing and hard to read. Better to format as “1997” or “21B.” Relying on prompt engineering alone to enforce all these conventions is a losing battle. We’ve tried, and don't do it, it is a painful and frustrating process! 🛠️ (Implementation) To turn these principles into production, we follow this flow: 1. Analyze dataset → survey distributions, min/max, distinct counts 2. Use agents to draft an IR (Intermediate Representation) → a simpler, purposely created spec which include simple flags like `regression_line: true` (rendering regression line + scatter plot on vegalite needs layered chart, which is very hard to get it right) 3. Transpile IR → target Vega-Lite (or ECharts/Metabase) spec 4. Compile & validate → check against published spec for correctness & security 5. Fix & test → catch corner cases before release 6. Ship & monitor → hundreds of test cases each cycle ensure model swaps, new rules, change of IR spec improve, not regress, results It still isn’t perfect, but with a validated spec, an intermediate representation, and relentless testing, it’s far more consistent and reliable than asking an LLM to go it alone.

Visualizing data helps humans digest complex information 10X faster than text, yet most dashboards actually slow down decision-making. Edward Tufte's pioneering work reveals why: effective data visualization requires ruthlessly eliminating noise to amplify signal—what he calls "above all else, show the data." 1. Maximize the Data-Ink Ratio 🔍 Remove decorative elements that don't convey information. Every pixel should serve a purpose. Those 3D effects and heavy gridlines? They're actively hiding your insights. 2. Answer "Compared to What?" 📊 Tufte's favorite question drives his "small multiples" concept—mini-charts arranged side-by-side with consistent scales. When executives see monthly revenue across six product categories simultaneously, patterns emerge instantly. 3. Context Belongs On the Visualization 📝 Annotate directly on charts rather than in legends or footnotes. A small note "Promo campaign launch" on a sales spike explains more than a meeting ever could. 4. Embrace Sparklines for Trends 📈 These "word-sized graphics" pack tremendous insight alongside metrics. A tiny 30-day trendline next to "Conversion Rate" immediately conveys direction without requiring separate charts. 5. Design for Decisions, Not Aesthetics 🎯 The true test: does this visualization help someone make a better decision? If not, it needs rethinking. At SourceMedium.com, these principles guide our data visualization design, which has powered up to 30x growth for some of our customers over the years. We're now designing these principles into our AI data analyst agent to make it a seamless part of your daily workflow – no more thinking about the best way to make charts, you simply get the most effective visualizations based on your questions and preferences. This represents a fundamental paradigm shift from conventional dashboards and web apps. SourceMedium.ai doesn't just present data; it delivers insights with Tufte-inspired clarity and purpose, integrating directly into your team's communication channels. The best data visuals aren't the flashiest—they're the ones that disappear, leaving only understanding behind.

Best LLM-based Open-Source tool for Data Visualization, non-tech friendly CanvasXpress is a JavaScript library with built-in LLM and copilot features. This means users can chat with the LLM directly, with no code needed. It also works from visualizations in a web page, R, or Python. It’s funny how I came across this tool first and only later realized it was built by someone I know—Isaac Neuhaus. I called Isaac, of course: This tool was originally built internally for the company he works for and designed to analyze genomics and research data, which requires the tool to meet high-level reliability and accuracy. ➡️Link https://lnkd.in/gk5y_h7W As an open-source tool, it's very powerful and worth exploring. Here are some of its features that stand out the most to me: 𝐀𝐮𝐭𝐨𝐦𝐚𝐭𝐢𝐜 𝐆𝐫𝐚𝐩𝐡 𝐋𝐢𝐧𝐤𝐢𝐧𝐠: Visualizations on the same page are automatically connected. Selecting data points in one graph highlights them in other graphs. No extra code is needed. 𝐏𝐨𝐰𝐞𝐫𝐟𝐮𝐥 𝐓𝐨𝐨𝐥𝐬 𝐟𝐨𝐫 𝐂𝐮𝐬𝐭𝐨𝐦𝐢𝐳𝐚𝐭𝐢𝐨𝐧: - Filtering data like in Spotfire. - An interactive data table for exploring datasets. - A detailed customizer designed for end users. 𝐀𝐝𝐯𝐚𝐧𝐜𝐞𝐝 𝐀𝐮𝐝𝐢𝐭 𝐓𝐫𝐚𝐢𝐥: Tracks every customization and keeps a detailed record. (This feature stands out compared to other open-source tools that I've tried.) ➡️Explore it here: https://lnkd.in/gk5y_h7W Isaac's team has also published this tool in a peer-reviewed journal and is working on publishing its LLM capabilities. #datascience #datavisualization #programming #datanalysis #opensource

💡Line, bar, and pie chart design: tips & tricks Effective data viz makes it easy to communicate complex information without requiring people to read and interpret a lot of text. People tend to be familiar with common chart types, such as line and bar charts, so using one of these types in your app can make it more likely that people will already know how to read your chart. 🍎 General recommendations ✔ Ensure chart placement and size aligns with the visual hierarchy of the page. When using multiple charts at the same level of importance, they should have consistent sizing. ✔ Design charts to adapt to different screen sizes and resolutions without losing clarity or detail. ✔ Use colorblind-friendly palettes and ensure charts are legible in both dark and light mode. 🍏 Line chart Line charts connect a series of data points using a line, and are commonly used to show data trends over time. ✔ Simplify the lines: Use distinct, contrasting colors for each line. Avoid using more than four to six lines to prevent clutter. ✔ Axis labels and gridlines: Use subtle gridlines and clearly label the axes. ✔ Data points: Highlight data points with small markers (circles, squares) to make it easier to read exact values. ✔ Interactivity: Consider adding tooltips that show exact data values when users hover over specific points on the line. ✔ Avoid using just color to communicate meaning in your data visualization. Incorporate other visual indicators such as shapes, line texture, patterns, or direct labels to help users make sense of the data. How to create line chart in Figma: https://lnkd.in/edPVhsih 🍏 Bar chart Bar charts are used to compare categorical or discrete data. ✔ Baseline number: Don't set the baseline to any number other than zero. Doing so misrepresents the data. ✔ Color: Use a single color for all bars unless comparing different categories; in that case, use distinct colors for each category. ✔ Labels: Place value labels directly on top of or inside the bars to make the data easily accessible without needing to reference the axis. ✔ Stacked vs. grouped bars: Use stacked bars for comparing parts of a whole and grouped bars for comparing multiple categories across the same scale. 🍏 Pie chart Pie chart helps users visualize portions of a whole at a glance. ✔ Segment clarity: Limit the number of slices to 5; more slices make the chart difficult to read. Consider grouping smaller slices into an "Others" category. ✔ Pie order: show data in descending order, starting at the 12 o'clock point and moving clockwise. ✔ Minimalist design: Keep the design clean by avoiding 3D effects, shadows, or excessive borders, which can distort perception. How to create bar chart in Figma: https://lnkd.in/eAaV3KBs #dataviz #datavisualization #ui #uidesign #productdesign #userinterface #uxdesign

Tables miss the big picture. Graphs unlock deeper insights. When your data is too complex, key insights stay hidden. 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗯𝗿𝗶𝗻𝗴𝘀 𝗰𝗹𝗮𝗿𝗶𝘁𝘆—𝗳𝗮𝘀𝘁. That’s where tools like Neo4j Bloom come in. Visualization platforms transform connected data into an intuitive experience anyone can explore. No complex queries, just patterns and insights at your fingertips. It’s like a search engine for your graph data. Type a name, concept, or relationship and instantly see the connections. If you are using Neo4j and Bloom you can leverage: ✅ 𝗖𝘂𝘀𝘁𝗼𝗺 𝗩𝗶𝗲𝘄𝘀: Adjust node colors, sizes, and labels to match your focus. ✅ 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝗮𝗹 𝗙𝗼𝗿𝗺𝗮𝘁𝘁𝗶𝗻𝗴: Highlight patterns or anomalies with rule-based colors. ✅ 𝗩𝗲𝗿𝘀𝗮𝘁𝗶𝗹𝗲 𝗟𝗮𝘆𝗼𝘂𝘁𝘀: Switch between org charts, geographic maps, and more. These tools become even more powerful when paired with AI. LLM integration turns natural language questions into Cypher queries. For example, asking "Which customers are most likely to churn?" can return high-risk customers in the visualization. Graph visualization tools like Neo4j Bloom bridge the gap between data complexity and business insight. They transform raw data into relationships that drive decisions. Whether you’re conducting fraud investigations or mapping customer journeys, graph visualization gives you the clarity to act. 💬What is your favorite approach to visualizing connected data? Share it in the comments. 📢 Know someone struggling to understand complex data? Share this post to help them out! 🔔 Follow me, Daniel Bukowski, for practical insights about building with connected data. 

📱 Communicate Data-Driven Insights with Interactive Apps When it comes to showcasing your data or models, interactive apps can make your work more accessible and impactful. Traditional app frameworks like Flutter, React Native, and SwiftUI are excellent for mobile-first designs. However, Python developers have a new option for rapid prototyping with Streamlit. This video showcases an app that McGyver Clark developed for working with Track and Field athletes. His athletes achieve success with data-driven insights to unlock performance. 💻 Why Develop an App? Streamlit is a Python-based framework designed to transform your scripts into shareable web apps—no front-end expertise needed. - Turn ideas into interactive prototypes - Use Python libraries like Pandas, Matplotlib, and Plotly - Share results with collaborators via a browser 🔧 Getting Started 1️⃣ Install Streamlit: pip install streamlit 2️⃣ Create an app: import streamlit as st st.title("Hello, Streamlit!") st.write("This is a simple Streamlit application.") 3️⃣ Run your app: streamlit run app.py 🌟 Examples and Use Cases - Data Dashboards: Visualize key metrics dynamically. - Machine Learning: Prototype interactive interfaces for model inputs and predictions. - Education: Engage students with hands-on learning tools: https://tclab.apopt.com (TCLab Example) 📈 Apps aren't just for prototyping—they for communicating complex ideas in a way that resonates with your audience. See https://apmonitor.com/pds for a new APP development module with streamlit. 💡 Ready to make your work more engaging? Share your favorite frameworks in the comments! #DataVisualization #Python #Streamlit #EngineeringTools #MachineLearning #AppDevelopment

Someone on a recent Sanity post asked whether Portable Text works for complex data visualizations: charts that need to render the same way across web dashboards and mobile apps. It's a fair question. Most rich text formats punt on this. So I...told Claude Code to buid a demo. A Portable Text editor where you can embed bar charts, area graphs, data tables, and inline sparklines alongside regular text. Edit the values, watch the JSON and rendered output update live. A chart in Portable Text isn't HTML. It's typed JSON with named fields {chartType: "bar", labels: "Mon,Tue,Wed", values: "72,75,68"}. Your web app renders that as SVG. Your mobile app renders it as a native chart view. The content doesn't care about the platform. That's the job for the serializers. 👉 Demo: https://lnkd.in/gtTYc-ZD 👉 New docs: portabletext.org

Good data visualization can make or break your insights. Here are 5 charting Dos and Don’ts to level up your storytelling: 1️⃣ Bar Charts ✔ Do: Keep it simple for comparisons. ❌ Don’t: Add unnecessary 3D effects—they distort data clarity. 👉 Example: Use consistent colors and clear axis labels to compare sales across regions. 2️⃣ Line Charts ✔ Do: Show trends with clear intervals and labels. ❌ Don’t: Overload with too many lines or similar colors—confusion kills clarity. 👉 Example: Monthly revenue growth, one clear line at a time. 3️⃣ Pie Charts ✔ Do: Represent parts of a whole with distinct colors and only a few slices. ❌ Don’t: Use pie charts with 10+ tiny slices—your message gets lost. 👉 Example: Showcase market share among 4 companies, not 14. 4️⃣ Scatter Plots ✔ Do: Highlight relationships with a trendline and clear axes. ❌ Don’t: Overcrowd data points or omit a guiding trendline. 👉 Example: Study hours vs. exam scores, clean and focused. 5️⃣ Heatmaps ✔ Do: Use a logical color gradient and a legend to interpret data density. ❌ Don’t: Randomize colors or skip a legend—it’s overwhelming. 👉 Example: Visualize global engagement with intuitive shading. Why It Matters: 🎯 Clarity in your visuals translates to clarity in decision-making. What’s your go-to data visualization tool? Share your tips below! ⬇️ -- 👋 I’m Dr. Jayen T., Dedicated to helping aspiring data analysts thrive in their careers. ➕ Follow MetricMinds.in for more tips, insights, and support on your data journey!"

🚨 Visualizing time series data? Most people slap a line chart on it and call it a day. Here’s the problem: one size doesn’t fit all. If you want to really understand your data and communicate insights that drive action, you need to step up your visualization game. We just wrapped up our 15th time series visualization, and I’m going to share my top 3 that I use all the time. Why? Because they work, and they make your data impossible to ignore. 1️⃣ Bar On Bar: If you’re comparing YoY or MoM data and not using this, you’re missing out. It’s simple, clean, and perfect for showing how one period stacks up against another. It takes “apples to apples” comparisons and turns them into “apples to actionable insights.” 2️⃣ Bullet Chart: Also great for YoY/MoM comparisons but with a twist. It’s like your regular bar chart but on steroids. It shows progress against a target and adds context at a glance. I use this when I need to show not just what happened but how we’re doing against a goal. 3️⃣ Enclosed Dot Plot: My secret weapon for showing period-over-period movement across groups in a compact and visually appealing way. Think of it as a way to pack a lot of insight into a small space. When you want to highlight shifts and changes without overwhelming your audience, this is your go-to. Why does this matter? Because when you can see your data the right way, you can make decisions that actually move the needle. And if you’re not visualizing data in ways that your team, clients, or stakeholders can instantly understand, you’re leaving money on the table. #DataVisualization #TimeSeriesAnalysis #BusinessInsights