Skip to main content
SimilarExport ZIP
100%

intensity vs likelihood

✓ Published0🌍 Public
Gguitmonk-1290
Last edited May 10, 2023
Created on May 10, 2023
Forked from D3 Scatter Plot

A D3.js scatter plot visualizes topic intensity against relevance, with points positioned by ordinal topic categories on the x-axis and a linear relevance scale on the y-axis. The plot uses SVG circles with a fixed radius and 0.4 opacity, sourced from JSON data loaded via `d3.json`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with scales defined by `d3.scaleOrdinal` and `d3.scaleLinear`. The visualization adapts to the window dimensions and uses a fluid layout with minimal margins.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

topic vs relevance

This chart displays the top 10 most populous topics ranked by relevance, rendered as horizontal bars using React and SVG. The visualization uses d3.scaleBand and d3.scaleLinear to map topics and relevance values, with data loaded via d3.json from a UN World Population Prospects dataset. The code builds custom axes using React components, and the marks are SVG rectangles that include a title tooltip. The chart is styled with a Poppins font and teal-colored bars.

Gguitmonk-1290
68% match
Loading thumbnail…

intensity vs sector

This visualization displays a bar chart comparing intensity values across different sectors. The chart uses a dark-themed SVG canvas with a clean, minimal design. The data is loaded from a JSON file, and the chart is built using the D3.js version 5 library, specifically utilizing `d3.json`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` and `d3.axisLeft` for the axes. Each bar's height corresponds to the intensity metric for its respective sector, with axes labeled using D3's tick text styling.

Gguitmonk-1290
68% 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
68% match
Loading thumbnail…

pestle vs relevance

This scatterplot shows the relevance of each article across different PESTLE categories, with each point representing an article and its y-axis position indicating relevance score. The visualization uses a Vega-Lite API specification to render an SVG chart with semi-transparent circular marks, allowing overlapping points to display density. Data is loaded asynchronously via D3’s `json` method from a GitHub-hosted JSON file, and the chart is styled with custom axis and label configuration to enhance readability.

Gguitmonk-1290
67% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables, plotting each data point as a circle on a Cartesian plane. The chart uses the D3.js library to generate the axes and scale the data, while the `d3.select` and `d3.scaleLinear` APIs handle element creation and coordinate mapping. Each point’s position is derived from the input dataset, and the visualization updates dynamically when new data is passed to the main `update` function. The renderer draws only the SVG shapes, with no additional interactivity or color encoding applied to the points.

Hhaozhou334@gmail.com
67% match
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
67% match
Loading thumbnail…

D3.chart Likert (even-point) example

The example displays a four-point Likert scale survey visualization using d3.chart and d3.v3, presenting five survey items as horizontal stacked bars with colored segments for each response category. Each bar shows percentage distributions across four response options (e.g., “Strongly disagree” to “Agree”), with labels aligned to the left or right to suggest forced-choice responses. The chart uses SVG rendering with animated transitions when the “Randomize” button is clicked, which updates percentages via a normalization algorithm that scales four random values to total 100. The visualization builds on Mike Bostock’s bullet chart, with custom chart classes (`LikertEven`, `LikertEvens`) managing layers for backgrounds, grid lines, and bar segments. Axis labels and tick formatting show absolute values, while the final row demonstrates the scale’s semantics with dimension descriptions.

CCodeXmonk
67% match
Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8
66% match