mzsima/Index.razor

## d3_sparkline_bar.csproj
<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <LangVersion>7.3</LangVersion>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="MathNet.Numerics" Version="4.8.1" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview6.19307.2" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview6.19307.2" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview6.19307.2" PrivateAssets="all" />
  </ItemGroup>

</Project>

## helper.js
window.MyChart = {
  createChart: function (props) {

    let data = props.data
    let width = props.width
    let height = props.height
    let domain = props.domain
    let range =  props.range
    let uid = props.uid

    let x = d3.scaleBand().domain(domain.x).range(range.x).padding(0.1);
    let y = d3.scaleLinear().domain(domain.y).range(range.y);
    let svg = d3.select("#" + uid)
        .append('svg')
        .style("width", width + 'px')
        .style("height", height + 'px');
    svg
    .append("g")
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => x(i))
    .attr("y", (d, i) => y(d))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d))
    .attr("fill", "cyan");
  }
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>d3_sparkline_bar</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="helper.js"></script>

    <style type="text/css">
        .board {
          display: flex;
          flex-direction: column;
          list-style: none;
        }
        .record {
          display: flex;
          flex-direction: row;
          justify-content: right;
          align-items: center;
          margin: 5px;
          padding: 10px;
          border-radius: 5px;
          line-hight: 1;
          color: #fff;
          background: #7a7;
        }
        .user {
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <app>Loading...</app>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

## Index.razor
@page "/"
@using System.Collections.Generic
@using MathNet.Numerics.Random;
@using MathNet.Numerics.Distributions;
@using System.Linq;
@inject IJSRuntime JsRuntime;

<h1>sparklines bar</h1>

@if (records == null)
{
  <p><em>Loading...</em></p>
}
else
{
  <ul class="board">
    @foreach (var record in records)
    {
      <li class="record"><span class="user">@record.uid</span><span id=@record.uid></span></li>
    }
  </ul>
}


@code {


  IList<UserRecord> records = new List<UserRecord>();


  protected override void OnInit()
  {
  	Random rnd = new Random();

	  for (var i = 0; i < 10; i++) {
	  	double[] c = new double[40];
			LogNormal.Samples(c, 0.0, 1.0);
			var samples = from double item in c select item * 10.0 + 5;


			records.Add(new UserRecord {
			  uid = "U" + i.ToString().PadLeft(4, '0'),
			  width = 400,
			  height = 50,
			  domain = new { x=Enumerable.Range(0, 40).ToArray(), y=new int[]{0, 50}},
			  range = new { x = new int[]{0, 400}, y = new int[]{50, 0} },
			  data = new List<double>(samples)
			});
		}
  }

  protected override async Task OnAfterRenderAsync() {

    foreach (var r in records) {
      await JsRuntime.InvokeAsync<Object>("MyChart.createChart", new {
      	uid=r.uid,
      	width=r.width,
      	height = r.height,
			  domain =r.domain,
			  range = r.range,
			  data = r.data
      });
    }
  }

  struct UserRecord {
		public string uid;
		public int width;
		public int height;
		public dynamic domain;
		public dynamic range;
		public List<double> data;
  }

}
	<Project Sdk="Microsoft.NET.Sdk.Web">

	<PropertyGroup>
	<TargetFramework>netstandard2.0</TargetFramework>
	<LangVersion>7.3</LangVersion>
	<RazorLangVersion>3.0</RazorLangVersion>
	</PropertyGroup>

	<ItemGroup>
	<PackageReference Include="MathNet.Numerics" Version="4.8.1" />
	<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview6.19307.2" />
	<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview6.19307.2" PrivateAssets="all" />
	<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview6.19307.2" PrivateAssets="all" />
	</ItemGroup>

	</Project>
	window.MyChart = {
	createChart: function (props) {

	let data = props.data
	let width = props.width
	let height = props.height
	let domain = props.domain
	let range = props.range
	let uid = props.uid

	let x = d3.scaleBand().domain(domain.x).range(range.x).padding(0.1);
	let y = d3.scaleLinear().domain(domain.y).range(range.y);
	let svg = d3.select("#" + uid)
	.append('svg')
	.style("width", width + 'px')
	.style("height", height + 'px');
	svg
	.append("g")
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", (d, i) => x(i))
	.attr("y", (d, i) => y(d))
	.attr("width", x.bandwidth())
	.attr("height", d => height - y(d))
	.attr("fill", "cyan");
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>d3_sparkline_bar</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/site.css" rel="stylesheet" />

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script type="text/javascript" src="helper.js"></script>

	<style type="text/css">
	.board {
	display: flex;
	flex-direction: column;
	list-style: none;
	}
	.record {
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	margin: 5px;
	padding: 10px;
	border-radius: 5px;
	line-hight: 1;
	color: #fff;
	background: #7a7;
	}
	.user {
	padding-right: 20px;
	}
	</style>
	</head>
	<body>
	<app>Loading...</app>
	<script src="_framework/blazor.webassembly.js"></script>
	</body>
	</html>
	@page "/"
	@using System.Collections.Generic
	@using MathNet.Numerics.Random;
	@using MathNet.Numerics.Distributions;
	@using System.Linq;
	@inject IJSRuntime JsRuntime;

	<h1>sparklines bar</h1>

	@if (records == null)
	{
	<p><em>Loading...</em></p>
	}
	else
	{
	<ul class="board">
	@foreach (var record in records)
	{
	<li class="record"><span class="user">@record.uid</span><span id=@record.uid></span></li>
	}
	</ul>
	}


	@code {


	IList<UserRecord> records = new List<UserRecord>();


	protected override void OnInit()
	{
	Random rnd = new Random();

	for (var i = 0; i < 10; i++) {
	double[] c = new double[40];
	LogNormal.Samples(c, 0.0, 1.0);
	var samples = from double item in c select item * 10.0 + 5;


	records.Add(new UserRecord {
	uid = "U" + i.ToString().PadLeft(4, '0'),
	width = 400,
	height = 50,
	domain = new { x=Enumerable.Range(0, 40).ToArray(), y=new int[]{0, 50}},
	range = new { x = new int[]{0, 400}, y = new int[]{50, 0} },
	data = new List<double>(samples)
	});
	}
	}

	protected override async Task OnAfterRenderAsync() {

	foreach (var r in records) {
	await JsRuntime.InvokeAsync<Object>("MyChart.createChart", new {
	uid=r.uid,
	width=r.width,
	height = r.height,
	domain =r.domain,
	range = r.range,
	data = r.data
	});
	}
	}

	struct UserRecord {
	public string uid;
	public int width;
	public int height;
	public dynamic domain;
	public dynamic range;
	public List<double> data;
	}

	}