Coding Challenge: Display Customer Purchase Orders with D$3.$js

Objective:

fetch this data and create a list item $(ib)$ for each purchase order, displaying the customer's name, order ID$,$ and purchase amount.

Instructions:

Setup Your Project:

Create an HTML file and include the D$3.$js library in the sheads section.

Create a JavaScript file $($ exarole. js $)$ where you will implement the logic to load and display the data.

purchase order within an unordered list $($ suls$)$ in the body of your HTML document, displaying the customer's name, order ID$,$ and purchase amount for each order.

CSV Data File $($purchase$\_$orders.csv $)$: Ensure your CSV file is properly formatted with headers for customerName, orderId, and purchasehmount $.$

Here is the csv file for download: purchase orders.csv darr

Data Loading and Display: Modify the provided JavaScript template to effectively load and display the data. Ensure that:

The data from purchase$\_$orders.csv is accurately fetched using d$3.$dsv$.$

For each order in the CSV file, a new list item $(Li{c}^3)$ is appended to an unordered list in the document body.

Each list item displays the purchase order's details in the format: "Customer Name $-$ Order ID: Purchase Amount".

Requirements:

Your application must not produce any errors when loaded in a web browser.

Ensure the asynchronous data loading is correctly handled, displaying all purchase orders upon completion.

Utilize D$3.$js methods for data binding, element creation, and dynamic content generation based on the CSV data.

Submission:

Submit the following files for evaluation:

The HTML file $($ index, htmi$).$

The JavaScript file $($example$.$ js $)$ with your D$3.$js code.

An example CSV data file $($purchase$\_$orders.csv$)$ for testing your application.