mzsima/Index.razor

## helper.js
window.myD3Helper = {
  setup: function (props) {

  var width = 400;
  var height = 400;

  var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")

  // range generator
  function* range(start, end) {
    yield start;
    if (start === end) return;
    yield* range(start + 1, end);
  }

  var x = d3.scaleBand()
    .range([ 0, width ])
    .domain([...range(0, 9)])
    .padding(0.1);

  var y = d3.scaleBand()
    .range([ height, 0 ])
    .domain([...range(0, 9)])
    .padding(0.1);

  // Build color scale
  var myColor = d3.scaleLinear()
    .range(["white", "#69b3a2"])
    .domain([1,100])

  var data = props.record;

  svg.selectAll()
      .data(data)
      .enter()
      .append("rect")
      .attr("x", function(d, i) { return x(Math.floor(i / 10)) })
      .attr("y", function(d, i) { return y(i % 10) })
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
  },
};

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

</head>
<body>
    <app>Loading...</app>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="helper.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

## Index.razor
@page "/"
@using System.Collections.Generic;
@inject IJSRuntime JsRuntime;

<h1>D3 heatmap</h1>

<div id="my_dataviz"></div>


@functions{

  struct MyRecord {
    public string uid;
    public int value;
  }

  IList<MyRecord> record = new List<MyRecord>();

  protected override async Task OnAfterRenderAsync() {

    Random rnd = new Random();
    for (var i = 0; i < 100; i++) {
      var value = rnd.Next(1, 100);
      record.Add(new MyRecord { uid = "User" + i, value = value } );
    }


    await JsRuntime.InvokeAsync<Object>("myD3Helper.setup", new { record = record });
  }

}
	window.myD3Helper = {
	setup: function (props) {

	var width = 400;
	var height = 400;

	var svg = d3.select("#my_dataviz")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")

	// range generator
	function* range(start, end) {
	yield start;
	if (start === end) return;
	yield* range(start + 1, end);
	}

	var x = d3.scaleBand()
	.range([ 0, width ])
	.domain([...range(0, 9)])
	.padding(0.1);

	var y = d3.scaleBand()
	.range([ height, 0 ])
	.domain([...range(0, 9)])
	.padding(0.1);

	// Build color scale
	var myColor = d3.scaleLinear()
	.range(["white", "#69b3a2"])
	.domain([1,100])

	var data = props.record;

	svg.selectAll()
	.data(data)
	.enter()
	.append("rect")
	.attr("x", function(d, i) { return x(Math.floor(i / 10)) })
	.attr("y", function(d, i) { return y(i % 10) })
	.attr("width", x.bandwidth() )
	.attr("height", y.bandwidth() )
	.style("fill", function(d) { return myColor(d.value)} )
	},
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>d3_heatmap</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/site.css" rel="stylesheet" />

	</head>
	<body>
	<app>Loading...</app>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="helper.js"></script>
	<script src="_framework/blazor.webassembly.js"></script>
	</body>
	</html>
	@page "/"
	@using System.Collections.Generic;
	@inject IJSRuntime JsRuntime;

	<h1>D3 heatmap</h1>

	<div id="my_dataviz"></div>


	@functions{

	struct MyRecord {
	public string uid;
	public int value;
	}

	IList<MyRecord> record = new List<MyRecord>();

	protected override async Task OnAfterRenderAsync() {

	Random rnd = new Random();
	for (var i = 0; i < 100; i++) {
	var value = rnd.Next(1, 100);
	record.Add(new MyRecord { uid = "User" + i, value = value } );
	}


	await JsRuntime.InvokeAsync<Object>("myD3Helper.setup", new { record = record });
	}

	}