Skip to main content
SimilarExport ZIP
100%

Set

✓ Published0🌍 Public
Aaleksstan96
Last edited Feb 19, 2021
Created on Feb 18, 2021
Forked from sheet2

The visualization displays a qualitative risk matrix, plotting likelihood against a five-level impact scale. Severity data points, colored by category, are positioned on the chart, with a red diagonal line indicating a risk threshold. The visualization uses D3.js v5 for SVG rendering, employing `scaleLinear` and `scaleLog` for axes, and data loaded from two CSV files. Interactive features include downloadable PDF generation via jsPDF and selectable tooltip display modes (label, coordinates, or both).

AI-generated description
MIT Licensed

Similar vizzes

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
77% match
Loading thumbnail…

sheet2

This scatterplot overlays two datasets on logarithmic and linear scales to visualize risk likelihood and impact. The first dataset (data.csv) is rendered as red circles connected by a line, while the second (data1.csv) is displayed as colored circles with a legend. The visualization uses custom margins, axis tick labels, and a color scale to differentiate severity levels, with a log-scaled y-axis for likelihood.

Aaleksstan96
74% match
Loading thumbnail…

Making Axes

This interactive chart, built with React and D3.js, traces how a numeric value changes over time, with data points colored by threshold—green below 50, amber between 50 and 75, and red above 75. Dashed reference lines at 50 and 75 mark these risk zones, and hovering over a circle reveals the exact percentage. The visualization uses a time-scaled x-axis and a linear y-axis, rendering an SVG connected scatter plot from CSV data.

JJamesHop31
68% match
Loading thumbnail…

React D3 Conditional Line Chart Practice

This example shows a time-series line chart of risk values against a “Time” axis, with points colored conditionally (green, amber, or red) based on their value and annotated with dashed threshold lines at 50 and 75. It loads CSV data via `useData` and `d3.csv`, scales it with `scaleTime` and `scaleLinear`, and draws SVG axes and marks using React components, `d3.line`, and `d3.format`. Tooltips appear via SVG `<title>` elements showing the formatted value as a percentage.

VV.Rao
68% match
Loading thumbnail…

Main Viz | Protype Dev

This visualization displays risk areas with their FWI values on a logarithmic scale, using colored circles for each data point. The code employs d3.scaleBand and d3.scaleLog to construct the axes, appended as SVG groups in a prototype interface. The data is rendered as circles via d3.select, with styling defined in a separate CSS file. The layout includes placeholder divs for additional chart elements, suggesting an interactive dashboard under development.

RRSSBDAE
68% match
Loading thumbnail…

React D3 Conditional Line Chart Practice

A time-series line chart tracks a risk value as a percentage over monthly intervals from 2015 to 2016, with each data point colored by a conditional threshold: green below 50, amber between 50 and 75, and red above 75. Dashed reference lines mark the 50% and 75% boundaries. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line()` for the connecting path, and `d3.csv` to load the data from points.csv. SVG circles render each point, with hover tooltips showing the exact value via the `<title>` element.

AAndre J Denais
68% match
Loading thumbnail…

React D3 Conditional Line Chart Practice

This chart plots a monthly risk value time series from a CSV file using React and D3 v6. Points and connecting lines are rendered as SVG, with circles colored green, amber, or red based on thresholds at 50 and 75 percent, shown as dashed reference lines. The chart uses `scaleTime` and `scaleLinear` for axes, plus a custom `line` generator for the path. Hovering a circle reveals a tooltip with the formatted percentage via the SVG `title` element.

TTammminana
68% match
Loading thumbnail…

Accident Data

This scatter plot visualizes accident data, encoding accident count on the x-axis and categorical severity (High, Medium, Low) on the y-axis using numeric mapping (3, 2, 1). The SVG rendering uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` to map severity levels to red, orange, and green fills. The chart loads data from a local `accidents.csv` file, with custom axis labels for severity and count.

Llikhithakarunakarreddym@gmail.com
67% match