i want to plot fiber type in javascript

To plot fiber type in JavaScript, you can use various data visualization libraries. One popular library for this purpose is D3.js. Here's an example of how you can use D3.js to plot fiber types:

First, include the D3.js library in your HTML file:

<script src="https://d3js.org/d3.v6.min.js"></script>
54 chars
2 lines

Next, create a div element in your HTML file where the plot will be rendered:

<div id="fiber-plot"></div>
28 chars
2 lines

Then, write JavaScript code to fetch and process your fiber type data, and plot it using D3.js:

index.tsx
// Sample fiber type data
const fiberTypes = [
  { type: "Type 1", count: 20 },
  { type: "Type 2", count: 30 },
  { type: "Type 3", count: 15 },
];

// Set up the SVG container for the plot
const svg = d3.select("#fiber-plot")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// Define the scales for x and y axis
const xScale = d3.scaleBand()
  .domain(fiberTypes.map((d) => d.type))
  .range([0, 400])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(fiberTypes, (d) => d.count)])
  .range([300, 0]);

// Draw the bars
svg.selectAll("rect")
  .data(fiberTypes)
  .join("rect")
  .attr("x", (d) => xScale(d.type))
  .attr("y", (d) => yScale(d.count))
  .attr("width", xScale.bandwidth())
  .attr("height", (d) => 300 - yScale(d.count))
  .attr("fill", "steelblue");

// Add x-axis labels
svg.append("g")
  .attr("transform", "translate(0, 300)")
  .call(d3.axisBottom(xScale));

// Add y-axis labels
svg.append("g")
  .call(d3.axisLeft(yScale));
985 chars
42 lines

In this example, we assume that you have an array of objects (fiberTypes) representing the fiber types and their respective counts. The code creates an SVG element of width 400 and height 300 to render the plot. It then defines scales for the x and y axes based on the data. The bars representing fiber types are drawn using the selectAll and data methods, and their positions, widths, and heights are determined based on the scales. Finally, x and y axis labels are added using the append and call methods.

Remember to replace the sample data with your actual fiber type data.

This example should help you get started with plotting fiber types in JavaScript using D3.js. Feel free to customize the styles, colors, and other aspects of the plot to suit your needs.