Fork of proba

100%

✓ Published3🌍 Public

Last edited Jan 29, 2021

Created on Jan 26, 2021

Forked from proba

This example plots likelihood against a categorical severity score, connecting points with a red line to show the relationship between probability and impact. The y-axis uses a logarithmic scale, while the x-axis displays custom score labels. Built with D3 v5, it loads CSV data and renders an SVG using `scaleLinear`, `scaleLog`, `axisBottom`, `axisLeft`, and a line generator. Red circles mark each data point, and the chart includes a title and rotated axis label.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

connected scatterplot

A connected scatterplot maps likelihood and score from a CSV file, with points connected by a line to show their sequential relationship. The x-axis uses a linear scale for score, while the y-axis uses a logarithmic scale for likelihood, with custom tick labels for severity levels. Circles mark each data point, and a path generated by d3.line connects them. The visualization is built with D3 v5, using scaleLinear, scaleLog, axisBottom, axisLeft, and SVG rendering.

Aaleksstan96

73% match

Loading thumbnail…

take2

This scatterplot displays the likelihood of risk events against their qualitative severity scores, ranging from “minor” to “disastrous.” The y-axis uses a logarithmic scale to accommodate widely varying probability values. The chart is built with D3 v5, using `scaleBand` for the categorical x-axis and `scaleLog` for the numeric y-axis, with data loaded from a CSV file and rendered as SVG circles.

Aaleksstan96

73% match

Loading thumbnail…

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

68% match

Loading thumbnail…

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

68% match

Loading thumbnail…

Fork of final

This interactive scatter plot explores global suicide rates using a dataset from a CSV file, allowing users to switch between quantitative variables for the x- and y-axes via dropdown menus. Built with D3 v6, the visualization renders as an SVG with animated transitions (`d3.transition`) that smoothly move circles and update axis scales when selections change. The code uses `d3.scaleLinear` for continuous data and `d3.scalePoint` for categorical support, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Mmnalk

67% match

Loading thumbnail…

Fork of Fork of Parallel Coordinates

This example shows a parallel coordinates plot of leaf measurements from a CSV dataset, with each row representing a specimen and each vertical axis a feature such as eccentricity, aspect ratio, and solidity. Lines are colored by leaf class, with a legend distinguishing three classes in blue, yellow, and red. The visualization uses D3 v4 with SVG and animation, building scales via `d3.scalePoint` and `d3.scale.linear`, rendering paths with `d3.line`, and supporting interactive dragging of axes through `d3.behavior.drag`. Brushing is applied to the background paths for context, while foreground paths highlight selected data.

HHugo-Dominguez

67% match

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This visualization combines a central radar-style chart with interactive quadrant and bubble elements to display categorized risk data. The radar chart uses concentric circular rings generated with `d3.arc()` to create a radial grid, while D3 scales (`scaleLinear`) and axes position data points across four quadrants. The visualization loads external CSV data via the `csv` function from D3 v5, and additional JSON data (datapoints.json) provides text labels and circle assignments for each quadrant. The SVG-based layout divides the view into three sections—slider, chart, and text header—with color-coded gradients distinguishing quadrants.

Tt0miwa22

67% match

Loading thumbnail…

Fork of Aditya - React D3 Conditional Line Chart Practice

A React and D3 line chart visualizes risk values over time, with each data point colored conditionally by its value: green below 50, amber between 50 and 75, and red above 75. The line connects monthly data from a CSV file, while dashed threshold lines mark the 50 and 75 percent boundaries. The chart uses `scaleTime` and `scaleLinear` for axes, `d3.line` for the path, and SVG `<circle>` elements with hover tooltips showing formatted percentage values.

AAbdouEnsaj

67% match