Aditya - Summary Plot practice

Aditya - React D3 Conditional Line Chart Practice

A connected scatter plot renders monthly risk values from a CSV file as an SVG line chart. The D3 v6 scaleTime and scaleLinear functions map dates and values, while conditional classes color each circle marker green, amber, or red based on thresholds at 50% and 75%. The component visualizes time series data and includes dashed reference lines for these thresholds. Tooltips show exact percentages, and axes are generated using D3's tick formatting.

79% match

Aditya - test plot for scatter plot

This scatter plot visualizes Time against Value from the Iris Dataset, with each data point rendered as a circle. The React application uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with axes drawn via custom `AxisBottom` and `AxisLeft` components. D3’s `line` function connects the points in a path, while a CSV file fetched with `csv` provides the data.

77% match

Aditya - Reusing D3 chart as React components

This example demonstrates how to reuse a D3 chart as a React component, displaying a connected scatter plot of time-series data. The visualization renders a line with circular points on an SVG canvas using d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft. It reads data from a CSV file hosted on GitHub, parsing dates with d3.timeParse. The React component returns a div that D3 selects, appends an SVG to, and populates with axes, a line, and circles, showing a practical pattern for integrating D3 into a React application.

Fork of Aditya - React D3 Conditional Line Chart Practice

This chart visualizes risk values over time as a connected scatter plot, with each point colored green, amber, or red based on whether its value falls below 50, between 50 and 75, or above 75. Dashed reference lines mark these thresholds. The visualization uses React with D3 v6, including `scaleTime`, `scaleLinear`, `extent`, and `line` generators, rendering SVG elements with axes built from `timeFormat` tick labels. Data loads from a CSV file via `d3.csv`, and both the line path and circles display CSS drop-shadow filters.

Sshery1001

Aditya - Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, with each slice filled by the corresponding color’s RGB hex value. It loads data from a CSV file using `d3.csv` and computes slice angles with `d3.pie`, while `d3.arc` generates the SVG path geometry. React manages the component state and renders the SVG elements, with a loading placeholder shown before data arrives. The visualization uses React hooks like `useState` and `useEffect` to fetch and store the data asynchronously.

Fork of Aditya - React D3 Conditional Line Chart Practice

This example visualizes a time series of risk values from a CSV file, showing how conditions vary over monthly intervals. A black connected line links the data points, while each point is colored green, amber, or red based on whether its value falls below 50, between 50 and 75, or above 75. Dashed gray horizontal threshold lines mark the 50 and 75 percent boundaries. The React component uses d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3.csv for data loading, rendering everything as SVG with custom AxisBottom and AxisLeft components.

Jjmkdev9

Fork of Aditya - React D3 Conditional Line Chart Practice

A monthly time-series line chart renders risk values as circles colored by thresholds (green under 50, amber under 75, red above), with dashed reference lines at 50 and 75. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `line()` from d3, loads CSV data via `d3.csv`, and draws SVG axes and marks. CSS classes style conditional point colors, while native `<title>` elements provide hover tooltips.

GGangtokMet

Aditya - React D3 Bar Chart Practice 2

This visualization presents a bar chart of automobile fuel efficiency trends from 1980 to 2017, using data on model years and efficiency ratings. Built with a React component and D3 v6, it uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with SVG rendering. The chart displays efficiency values as steel-blue bars, with axes generated via `axisBottom` and `axisLeft`, and includes tick marks and labels for clear data reading.