Resources for visualizing data using C# and the .NET platform
Resources for visualizing data using C# and the .NET platform
This repository is a collection of C# code examples that draw graphics to display data
Additional resources are available at https://swharden.com/csdv/
These examples were created for the C# Data Visualization Website and mostly involve creating rendering-library-agnostic models of complex systems, then developing rendering systems that can display the models.
| Project | Screenshot |
|---|---|
| Mystify Your Mind with C# - The classic screensaver implemented using both OpenGL and System.Drawing. See C# Data Visualization Website for details. | |
| Game of Life in C# - Conway's Game of Life is a zero-player video game that uses a few basic rules to determine if cells live or die based on the density of their neighbors. In this project we create Life using C# and System.Drawing. See C# Data Visualization Website for details. | |
| Boids in C# - This project implements the Boids flocking algorithm in C# to create an interesting procedural animation of bird-drones (boids) scurrying about the screen. See C# Data Visualization Website for details. | |
| Boids in C# with SkiaSharp - This project is an extension of the original boids project that uses an abstracted rendering system supporting SkiaSharp and OpenGL for hardware-accelerated rendering. See C# Data Visualization Website for details. | |
| Spline Interpolation with C# - This project demonstrates how to create a smooth curve from a rough set of X/Y points using cubic spline interpolation. The interpolation code used here is in a .NET Standard 2.0 library, and the interactive GUI is a WinForms App using ScottPlot. |
| Description | Screenshot |
|---|---|
| Create a bitmap by editing bytes in memory and save the resulting image to disk without using any image manipulation library dependency |
These examples use Microsoft.Maui.Graphics package to provide cross-platform drawing in .NET Core and .NET Framework applications.
| Description | Screenshot |
|---|---|
Draw with Maui.Graphics in Windows Forms, WPF, and MAUI apps - This project encapsulates drawing logic in a .NET Standard library using Maui.Graphics (with no dependency on System.Drawing). This common library is then referenced by separate Maui, Windows Forms, WPF, and console apps to display images and animations. |
|
| Audio Level Monitor with Maui.Graphics - This project uses NAudio to continuously sample the default microphone device, calculate the maximum intensity, and display it in a Windows Forms application using the SkiaSharp OpenGL control. | |
| Microphone FFT Display with Maui.Graphics - This project uses NAudio to continuously sample the default microphone device, calculate the Fast fourier transform (FFT), and display the result in a Windows Forms application using the SkiaSharp OpenGL control. | |
| Life with Maui.Graphics - This implementation of Conway's Game of Life uses an isolated class library to encapsulate the game board's logic and rendering methods, and a separate Windows Forms application to provide the interactive GUI to display the board using SkiaSharp and OpenGL. | |
| Graphics Model Viewer - This project has a .NET Standard library of graphics models containing simulation logic and rendering methods, and multiple GUI applications (Windows Forms, WPF, etc.) that display them using different rendering technologies. | |
Compare Maui.Graphics Skia rendering performance in Windows Forms with and without OpenGL - A test pattern of 10,000 anti-aliased semi-transparent lines is used to evaluate framerate performance of the skControl compared to the skglControl. On my system the standard control is over 6 times slower than the OpenGL control (3 Hz vs 20 Hz). |
| Description | Screenshot |
|---|---|
| Drawing Lines with WPF is a minimal-case example to demonstrate how to add primitive shapes to a canvas in a WPF application |
System.Drawing uses the GDI+ backend to draw on the screen. It is convenient because it is been around forever and is easily supported by .NET, but it does not perform well in parallel environments or with large bitmaps (e.g., full screen). See this page for a thorough description of its limitations. Most examples on this page use GDI+ to create images. For a long time System.Drawing was limited to .NET Framework applications, but in 2018 the System.Drawing.Common package brought System.Drawing support to .NET Core.
SkiaSharp is a cross-platform .NET API for drawing with Skia, an open-source 2D drawing library developed by Google. SkiaSharp has an OpenGL control which allows hardware-accelerated rendering using OpenGL out of the box without requiring any OpenGL knowledge.
| Description | Screenshot |
|---|---|
| Drawing with SkiaSharp and OpenGL - This program demonstrates how to vastly outperform GDI+ (System.Drawing) when drawing thousands of semi-transparent lines at full-screen window sizes. |
Client-side Blazor lets graphics models written in C# compile-down to WebAssembly that can run in the browser on a static website. No special hosting is required! At the time of writing client-side Blazor is on the bleeding edge of development, and performance is mediocre. For intense rendering jobs in the browser JavaScript is still required, but for simple tasks you can define graphics models in C# and render them with a HTML Canvas API without ever learning C#
| Description | Screenshot |
|---|---|
Animation in the Browser with Blazor WebAssembly and HTML Canvas (see blog post and live demo) - This program demonstrates how to write a graphics model in C# and render it using the Blazor.Extensions.Canvas to draw on a HTML canvas. See the blog post for details |
|
| Blazor Boids in your Browser (see blog post and live demo) - demonstrates how to use a C# graphics model with .NET code managing business logic and a JavaScript render method which uses the high speed HTML5 canvas to do the drawing. | |
| Mystify your Browser with Blazor (see blog post and live demo) The classic Windows 3 screensaver now runs in the browser! The graphics model is in C# and uses Blazor bindings to control various settings. Blazor tells JavaScript what to render (using JSON) and JavaScript draws colored lines on a HTML canvas. | |
| Google Charts in Blazor (see blog post and live demo) shows how to generate data in C# and display it interactively in the browser using Google Charts |
| Description | Screenshot |
|---|---|
| Audio Monitor - Demonstrates how to connect to an audio device using NAudio and plot the levels in real time using ScottPlot | |
| FFT Monitor - Extends the audio monitor project by using FftSharp to calculate the frequency component of live microphone audio and display the result using ScottPlot | |
| Plotting Audio Amplitude - This example uses NAudio to access the sound card, calculates the amplitude of short recordings, then graphs them continuously in real time with ScottPlot. This project is a good place to get started to see how to interface audio input devices. | |
| Plotting Audio Values - This example uses NAudio to access the sound card and plots raw PCM values with ScottPlot. These graphs contain tens of thousands of data points, but remain fully interactive even as they are being updated in real time. | |
| Plotting Audio FFT - This example continuously plots the frequency component of an audio input device. The NAudio library is used to acquire the audio data and process the FFT and ScottPlot is used for the plotting. | |
| Microphone Level Monitor - This console application uses NAudio to continuously monitor the microphone and display audio levels by printing characters to the screen. Examples are provided for mono and stereo audio inputs. |
Some code examples started in this repository and have matured into their own projects
| Project | Screenshot |
|---|---|
| ScottPlot is an interactive plotting library for .NET. If you're just looking for an easy way to interactively display some data on a graph using C#, ScottPlot might be for you! | |
| Spectrogram is a simple spectrogram library for .NET. Specrogram converts signals (typically audio) into the frequency-domain and makes it easy to display spectrograms as 2D images. Spectrogram is fast enough to display the audio spectrum in real time. | |
| Sound Card ECG uses scottplot to interactively display the soundcard signal in real time | |
| HHSharp is an interactive Hodgkin-Huxley neuron simulator |
⚠️ Code quality warning: This section contains projects and notes I created when I was first learning how to draw graphics with C#. They work, but likely have poor code quality. I share them here in case someone may find them useful, but they should certainly not be deeply studied or accepted as best practice.
| Description | Screenshot |
|---|---|
| Is a point inside a rotated rectangle? This Windows Forms application demonstrates how to rotate a rectangle around an arbitrary point then perform mouse tracking and hit detection. This example uses Maui.Graphics and SkiaSharp with OpenGL. | |
| Drawing Lines - This project demonstrates a simple way to draw lines in a Windows Form. Here we create a Bitmap then use a Graphics object to draw lines on it. The Bitmap is then assigned to PictureBox.Image and displayed to the user. | |
| Drawing with the Mouse - This project uses a PictureBox's MouseMove ev |
No open issues yet, or sync has not completed.