mzsima/Index.razor

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

  var width = 400;
  var height = 400;

  var svg = d3.select("#my_data")
  .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.scaleLinear()
    .domain([0, 100])
    .range([ 0, width ]);

  var y = d3.scaleLinear()
    .domain([0, 30])
    .range([ height, 0 ]);

  // Build color scale
  var myColor = d3.scaleOrdinal()
    .domain(["A", "B", "C" ])
    .range([ "#440154aa", "#21908daa", "#ade725aa"])

  var data = props.data;

  svg.selectAll()
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function (d) { return x(d.valueA); } )
      .attr("cy", function (d) { return y(d.valueB); } )
      .attr("r", 5)
      .style("fill", function(d) { return myColor(d.type)} )
  },
};

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>d3_scatter_plot</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 scatter plot</h1>

<div id="my_data"></div>

@functions {
  struct MyData {
    public string type;
    public double valueA;
    public double valueB;
  }

  IList<MyData> data = new List<MyData>();

  Random rnd = new Random();

  protected override void OnInit()
  {
    for (var i = 0; i < 300; i++) {
      var type = new []{"A", "B", "C"}[rnd.Next(0,3)];

      var valueA = RandStdNormal(100);
      var valueB = RandStdNormal(30);
      data.Add(new MyData { type = type, valueA = valueA, valueB = valueB } );
    }
  }

  protected override async Task OnAfterRenderAsync() {
    await JsRuntime.InvokeAsync<Object>("myD3Helper.setup", new { data = data });
  }


  private double RandStdNormal(int num)
  {
    double u1 = 1.0-rnd.NextDouble(); //uniform(0,1] random doubles
    double u2 = 1.0-rnd.NextDouble();
    return num * (Math.Sqrt(-2.0 * Math.Log(u1)) * Math.Sin(2.0 * Math.PI * u2) + 3.0) / 6.0; //random normal(0,1)
  }
}
	window.myD3Helper = {
	setup: function (props) {

	var width = 400;
	var height = 400;

	var svg = d3.select("#my_data")
	.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.scaleLinear()
	.domain([0, 100])
	.range([ 0, width ]);

	var y = d3.scaleLinear()
	.domain([0, 30])
	.range([ height, 0 ]);

	// Build color scale
	var myColor = d3.scaleOrdinal()
	.domain(["A", "B", "C" ])
	.range([ "#440154aa", "#21908daa", "#ade725aa"])

	var data = props.data;

	svg.selectAll()
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function (d) { return x(d.valueA); } )
	.attr("cy", function (d) { return y(d.valueB); } )
	.attr("r", 5)
	.style("fill", function(d) { return myColor(d.type)} )
	},
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>d3_scatter_plot</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 scatter plot</h1>

	<div id="my_data"></div>

	@functions {
	struct MyData {
	public string type;
	public double valueA;
	public double valueB;
	}

	IList<MyData> data = new List<MyData>();

	Random rnd = new Random();

	protected override void OnInit()
	{
	for (var i = 0; i < 300; i++) {
	var type = new []{"A", "B", "C"}[rnd.Next(0,3)];

	var valueA = RandStdNormal(100);
	var valueB = RandStdNormal(30);
	data.Add(new MyData { type = type, valueA = valueA, valueB = valueB } );
	}
	}

	protected override async Task OnAfterRenderAsync() {
	await JsRuntime.InvokeAsync<Object>("myD3Helper.setup", new { data = data });
	}


	private double RandStdNormal(int num)
	{
	double u1 = 1.0-rnd.NextDouble(); //uniform(0,1] random doubles
	double u2 = 1.0-rnd.NextDouble();
	return num * (Math.Sqrt(-2.0 * Math.Log(u1)) * Math.Sin(2.0 * Math.PI * u2) + 3.0) / 6.0; //random normal(0,1)
	}
	}