DEV Community: reshma p

📊 Building a Netflix Content Dashboard with ML.NET

reshma p — Thu, 23 Oct 2025 14:15:51 +0000

🚀 In this project, I built a modular dashboard to analyze Netflix content trends using ML.NET, CsvHelper, and Razor Pages — with bargraph visualizations for genre, country, and release year insights.

🔍 Tech Stack

ML.NET: SdcaMaximumEntropy for multiclass classification
CsvHelper.Configuration: Clean parsing of Netflix dataset
Razor Pages: UI with dropdown filters and summary cards
Chart.js: Interactive bargraphs for visual storytelling
LINQ: Dynamic filtering by genre, type, country, and year

📁 Dataset

Used the Netflix Movies and TV Shows dataset from Kaggle:

Fields: Title, Type, Country, Genre, Release Year, Rating

🧠 ML.NET Model: Content Type Classifier trained model in console app

    var pipeline = mlContext.Transforms.Text.FeaturizeText("TitleFeats", nameof(TitleData.Title))
           .Append(mlContext.Transforms.Text.FeaturizeText("GenreFeats", nameof(TitleData.Genre)))
           .Append(mlContext.Transforms.Text.FeaturizeText("DescFeats", nameof(TitleData.Description)))
           .Append(mlContext.Transforms.Text.FeaturizeText("DurationFeats", nameof(TitleData.Duration)))
           .Append(mlContext.Transforms.Conversion.MapValueToKey("Label", nameof(Type)))
           .Append(mlContext.MulticlassClassification.Trainers.SdcaMaximumEntropy("Label", "Features"))
           .Append(mlContext.Transforms.Conversion.MapKeyToValue("PredictedLabel"));
           return pipeline;

Initialize ML.NET Context

var mlContext = new MLContext();

Define Paths

var modelPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "models", "Model.zip");
var dataPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "models", "netflix_titles.csv");

Load Data with ML.NET

IDataView dataView = mlContext.Data.LoadFromTextFile<TitleData>(
    dataPath, separatorChar: ',', hasHeader: true);

var dataEnumerable = mlContext.Data.CreateEnumerable<TitleData>(
    dataView, reuseRowObject: false).Take(100).ToList();

This gives us a sample of 100 titles for quick dashboard rendering.

Parse CSV with CsvHelper

List<TitleData> records;
using (var reader = new StreamReader(dataPath))
using (var csv = new CsvReader(reader, CultureInfo.InvariantCulture))
{
    csv.Context.RegisterClassMap<TitleDataMap>();
    records = csv.GetRecords<TitleData>().ToList();
}

CsvHelper ensures clean mapping and parsing of the full dataset.


Predicts whether a title is a Movie or TV Show based on its name and genre.

📊 Dashboard Visuals

🎬 Movies vs TV Shows


            TypeCounts = records
             .GroupBy(p => p.Type)
             .Select(g => new TypeCount
             {
                 Type = g.Key,
                 Count = g.Count()
             })
             .ToList();

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const typectx = document.getElementById('typeChart').getContext('2d');
    const typeChart = new Chart(typectx, {
        type: 'bar',
        data: {
            labels: @Html.Raw(Json.Serialize(type)),
            datasets: [{
                label: 'Movies vs TV Shows on Netflix',
                data: @Html.Raw(Json.Serialize(values)),
                backgroundColor: ['#4e79a7', '#f28e2b'],
                // borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,

            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Count'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Type'
                    }
                }
            }
        }
    });
</script>

🌍 Top 10 Countries Producing Netflix Content
Bargraph: Country-wise content count

 TopCountries = records
           .Where(r => !string.IsNullOrWhiteSpace(r.Country))
           .SelectMany(r => r.Country.Split(','))
           .Select(c => c.Trim())
           .GroupBy(c => c)
           .Select(g => new CountryCount
           {
               Country = g.Key,
               Count = g.Count()
           })
           .OrderByDescending(c => c.Count)
           .Take(10)
           .ToList();

<script>
    const countryctx = document.getElementById('countryChart').getContext('2d');
    const countrychart = new Chart(countryctx, {
        type: 'bar',
        data: {
            labels: @Html.Raw(Json.Serialize(Model.TopCountries.Select(c => c.Country))),
            datasets: [{
                label: 'Top 10 Countries producing Netflix content',
                data: @Html.Raw(Json.Serialize(Model.TopCountries.Select(c => c.Count))),
                backgroundColor: 'rgba(255, 99, 132, 0.6)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Titles'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Country'
                    }
                }
            }
        }
    });
</script>

📅 Content by Release Year
Bargraph: Titles released per year

            YearCounts = records
                .Select(r => new
                {
                    ParsedYear = int.TryParse(r.Year, out var y) ? y : 0
                })
                .Where(x => x.ParsedYear > 1900)
                .GroupBy(x => x.ParsedYear)
                .Select(g => new YearCount
                {
                    Year = g.Key,
                    Count = g.Count()
                })
                .OrderBy(y => y.Year)
                .ToList();

<script>
    const yearctx = document.getElementById('yearChart').getContext('2d');
    const yearchart = new Chart(yearctx, {
        type: 'bar',
        data: {
            labels: @Html.Raw(Json.Serialize(Model.YearCounts.Select(y => y.Year))),
            datasets: [{
                label: 'Netflix Content by Release Year',
                data: @Html.Raw(Json.Serialize(Model.YearCounts.Select(y => y.Count))),
                backgroundColor: 'rgba(54, 162, 235, 0.6)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Titles'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Release Year'
                    }
                }
            }
        }
    });
</script>

🎭 Top Genres on Netflix
Bargraph: Genre frequency across all titles

 TopGenres = records
           .Where(r => !string.IsNullOrWhiteSpace(r.Genre))
           .SelectMany(r => r.Genre.Split(','))
           .Select(g => g.Trim())
           .GroupBy(g => g)
           .Select(g => new GenreCount
           {
               Genre = g.Key,
               Count = g.Count()
           })
           .OrderByDescending(g => g.Count)
           .Take(10)
           .ToList();

<script>
    const genrectx = document.getElementById('genreChart').getContext('2d');
    const genreChart = new Chart(genrectx, {
        type: 'bar',
        data: {
            labels: @Html.Raw(Json.Serialize(Model.TopGenres.Select(g => g.Genre))),
            datasets: [{
                label: 'Top 10 Genres on Netflix',
                data: @Html.Raw(Json.Serialize(Model.TopGenres.Select(g => g.Count))),
                backgroundColor: 'rgba(153, 102, 255, 0.6)'
            }]
        },
        options: {
            indexAxis: 'y', // Horizontal bar chart
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Titles'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Genre'
                    }
                }
            }
        }
    });
</script>

🖥️ Razor Pages UI

Dropdown filters: Genre, Country, Type, Year
Summary cards: Total titles, Movies, TV Shows
LINQ-powered filtering for real-time updates
Chart.js for interactive visuals

👉 GitHub: https://github.com/reshmapotthuri/ML_NetflixAnalysis

✅ Conclusion

This project demonstrates how ML.NET can be seamlessly integrated into real-world dashboards — from classifying Netflix content with SdcaMaximumEntropy by combining Razor Pages, CsvHelper, and Chart.js

Detecting Sales Anomalies with ML.NET — Razor Dashboard + SQL Integration

reshma p — Thu, 16 Oct 2025 11:29:51 +0000

🔍 Introduction

In this post, I’ll Walk through how I built an intelligent anomaly detection dashboard using ML.NET, SQL Server, and Razor Pages. The goal: flag unusual sales patterns across stores and organizations using DetectIidSpike

🧪 Problem Statement
Sales data can fluctuate — but how do we know when it’s abnormal?
Using ML.NET’s DetectIidSpike, we can identify sudden spikes in sales values and surface them in a dashboard with filters, counts

🧱 Tech Stack
• ML.NET TimeSeries: DetectIidSpike for anomaly detection
• SQL Server View: vw_SalesAnomaly as the data source
• Razor Pages: UI with dropdown filters and summary counts
• LINQ: Dynamic filtering by Store and Or

🧠 ML.NET Pipeline

var pipeline = mlContext.Transforms.DetectIidSpike(
                    outputColumnName: nameof(SalesOutput.Prediction),
                    inputColumnName: nameof(SalesInput.Sales),
                    confidence: 95,
                    pvalueHistoryLength: 30)
                     .Append(mlContext.Transforms.CopyColumns("OrgName", "OrgName"))
                    .Append(mlContext.Transforms.CopyColumns("StoreName", "StoreName"));

var results = mlContext.Data.CreateEnumerable<SalesOutput>(transformed, reuseRowObject: false)
                        .Select((p, index) => new AnomalyPoint
                        {
                            Index = index,
                            Score = p.Prediction[1],
                            PValue = p.Prediction[2],
                            IsAnomaly = p.Prediction[0] == 1,
                            OrgName = p.OrgName,
                            StoreName = p.StoreName
                        }).ToList();
                return results;

This detects spikes in the Sales column and retains metadata for filtering

🗂️ Data Source

SELECT 
CAST(Sales AS REAL) AS Sales,
CAST(Multiplier AS REAL)AS Multiplier,
Severity,
OrgName,
StoreName 
FROM vw_SalesAnomaly

The view aggregates sales metrics across stores and organizations.

📊 Razor Dashboard Logic

if (!string.IsNullOrEmpty(SelectedStore))
            {
                results = results.Where(x => x.StoreName == SelectedStore).ToList();
            }
            if (!string.IsNullOrEmpty(SelectedOrg))
            {
                results = results.Where(x => x.OrgName == SelectedOrg).ToList();
            }
            AnomalyCount = results.Count(x=>x.IsAnomaly);
            OrgCount = results.Where(r => r.IsAnomaly).Select(r => r.OrgName).Distinct().ToList().Count();
            StoreCount = results.Where(r => r.IsAnomaly).Select(r => r.StoreName).Distinct().ToList().Count();
            StoreList = results.Select(x => x.StoreName).ToList();
            OrgList = results.Select(x => x.OrgName).ToList();
            TotalRecords = results.Distinct().ToList().Count();

🎨 Razor UI Highlights

🔍 Alert Summary Pane


<div class="alert alert-strong-danger d-flex align-items-center justify-content-between mb-3">
  <div class="alert-box">
    <span class="label">No.of Anomaly</span>
    <div class="icon-line">
      <i class="bi bi-eye-fill"></i>
      <span>@Model.AnomalyCount</span>
    </div>
  </div>
</div>

Custom alert styling with .alert-strong-danger
Bootstrap Icons for visual cues
Dynamic counts for anomalies, affected orgs, and store

🧭 Interactive Filters


<form class="form-group">
    <label for="SelectedOrg">Org Name</label>
    <select id="SelectedOrg" name="SelectedOrg" class="form-control" onchange="this.form.submit()">
        <option value="">-- Select Organization --</option>
        @foreach (var org in @Model.OrgList)
        {
            <option value="@org" selected="@(org == @Model.SelectedOrg ? "selected" : null)">
                @org
            </option>
        }
    </select>
</form>

Organization and store filters auto-submit on change
Razor logic ensures selected values persist

📊 Chart.js Visualizatio

const data = {
    labels: @Html.Raw(JsonConvert.SerializeObject(Model.results.Select(a => a.Index))),
    datasets: [
        {
            label: 'Sales Score',
            data: @Html.Raw(JsonConvert.SerializeObject(Model.results.Select(a => a.Score))),
            borderColor: 'blue',
            fill: false
        },
        {
            label: 'Anomalies',
            data: @Html.Raw(JsonConvert.SerializeObject(Model.results.Select(a => a.IsAnomaly ? a.Score : (double?)null))),
            borderColor: 'red',
            pointBackgroundColor: 'red',
            pointRadius: 5,
            showLine: false
        }
    ]
};

Blue line for normal scores
Red dots for anomalies
Responsive chart with title plugin

📋 Tabular Insights

<table class="table">
    <thead>
        <tr><th>OrgName</th><th>StoreName</th><th>Score</th><th>P-Value</th><th>Status</th></tr>
    </thead>
    <tbody>
        @foreach (var a in Model.results)
        {
            <tr>
                <td>@a.OrgName</td>
                <td>@a.StoreName</td>
                <td>@a.Score</td>
                <td>@a.PValue</td>
                <td>
                    <span class="@(a.IsAnomaly ? "text-danger" : "text-primary")">
                        @(a.IsAnomaly ? "Anomaly" : "Normal")
                    </span>
                </td>
            </tr>
        }
    </tbody>
</table>

Conditional styling for anomaly status
Clean layout using Bootstrap’s table classes

This powers the dropdown filters and summary counts on the dashboard.

📈 Output
• ✅ Total anomalies detected
• 🏢 Unique orgs and stores affected
• 📋 Filterable results by Store and Org

Detail Code:

📁 Visit GitHub

🚀 Conclusion
ML.NET makes it easy to build intelligent dashboards that detect and visualize anomalies in real time. This project combines SQL, ML.NET, and Razor Pages