Fork of Testing jStat

100%

Fork of Testing jStat

✓ Published0🌍 Public

Last edited Mar 15, 2022

Created on Mar 13, 2022

This visualization displays two categories of data across weeks using a grouped bar chart. The code loads JSON data representing mating and conception values, then renders them as steelblue bars using D3 scales and axes within a React component. The example demonstrates a practical application of the jStat library for statistical analysis, though the current rendering only shows raw data values rather than computed statistics. The SVG-based visualization uses D3 version 6 for scales, axes, and bar positioning, with React managing the component lifecycle and rendering updates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable J.I. Bar chart (with menu) - TEST2

A stacked horizontal bar chart visualizes donation activities and amounts across categories, allowing interactive switching between total, COVID-19, and other-purpose views via a menu. The chart presents paired bars for actions and monetary sums, with color-coded segments for COVID-19 and other causes. It uses React with D3.v6 functions like scaleBand and scaleLinear for axes and scales, rendering SVG elements. Data is loaded from a CSV file, and user clicks trigger state updates to change displayed attributes and zoom scales.

Kkragovic

76% match

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23

76% match

Loading thumbnail…

Testing jStat

This visualization displays average hemoglobin levels by sex, with each horizontal bar showing the mean and a 95% confidence interval computed using the `jStat.tci` function. The chart uses React and D3 v6, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG through a reusable `VizContainer`. Data is loaded from a CSV file via `d3.csv`, and the bars include optional confidence-interval lines that are drawn from the lower to upper bound of the interval.

WWaseem Medhat

75% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays student statistics by area, using an SVG visualization rendered through React and D3. The chart loads data from a CSV file via `d3.csv`, then maps area names to horizontal bars using `d3.scaleBand` and `d3.scaleLinear` for axes. Tick marks and labels are generated with `d3.axisLeft` and `d3.axisBottom` equivalents, while React components manage the rendering pipeline. The visualization uses `d3.max` and `d3.format` for scaling and number formatting, with the top 15 records shown.

SSaiipriiya

75% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu

75% match

Loading thumbnail…

Fork of Fork of Refactored Bar Chart

This example visualizes CSS named colors as a scatterplot, showing the number of move-ins per day of the week from a CSV dataset. The chart uses React state to manage data loading and rendering, with D3 v6 functions like `scaleLinear` and `extent` to compute scales and domains. SVG circles render the aggregated data points, while custom React components handle axes and marks. The code includes formatting utilities like `format` and relies on `useEffect` and `useState` hooks for data fetching.

PPatrick Feldman

75% match

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example shows an area chart of values over time, using a small inline dataset of five ordered day-value pairs. Rendered as an SVG, the chart fills the space beneath a line that connects the data points, which are scaled along linear x and y axes. The code creates the visualization using D3 v7 API calls like `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.max`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`. It includes labeled axes for "Days" and "Values" and uses a light blue fill to represent the area under the curve.

SSanjayRamaSwamyAdla@my.unt.edu

75% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A bar chart showing the frequency of letters in a dataset, rendered with React and D3 v7. The visualization displays interactive bars that respond to clicks, highlighting the selected category while dimming others. The code combines React's `useState` hook for state management with D3's `scaleBand`, `scaleLinear`, and axis components, using a `ResizeObserver` to handle responsive resizing. Data loads from a local CSV file, and bars apply transitions on hover and selection.

CCurran Kelleher

74% match