SVM

100%

✓ Published0🌍 Public

Last edited Apr 11, 2021

Created on Apr 11, 2021

This example demonstrates a support vector machine (SVM) classifier using the SMO algorithm. Two-dimensional labeled data points (class 1 and class 2) from a JSON file are plotted as colored circles, with D3 scales mapping coordinates to an SVG canvas. Three decision boundary lines are drawn using `d3.svg.line()`, showing the separating hyperplane and its margins based on the computed weight vector and bias. The visualization relies on D3 v3 and a custom SMO implementation for training.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVM

This example displays a fixed rectangular region drawn in red with a blue outline, accompanied by a single diagonal black line segment. The visualization is implemented as a minimal HTML page using an SVG canvas with a width of 960 and height of 500. The code employs raw SVG elements—specifically `rect` and `line`—within an inline `<svg>` tag, styled through inline attributes rather than CSS classes. No external libraries or JavaScript are used, making it a static, declarative demonstration of basic vector graphics primitives.

Hhamid99abbas

72% match

Loading thumbnail…

Smiley with D3.js

This example demonstrates basic SVG rendering with D3.js by drawing a series of circles whose positions and colors update dynamically with changing data arrays. The code uses D3 selections and the `data()` join to append circle elements, mapping each value to a vertical position (`cy`) and a red or blue fill depending on whether the value exceeds 30. It highlights the enter selection pattern by calling `updateVis` twice with different datasets, showing how new circles are added incrementally. The visualization relies on D3 v3’s core selection API and standard SVG attributes within a 960x500 canvas.

Wwindwardpassage

59% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

OOsekovS

59% match

Loading thumbnail…

D3 Example

This example demonstrates a simple scatter plot where circular marks are placed on an SVG canvas based on data loaded from an external CSV file. The visualization shows how data points are bound to SVG circles, with their horizontal and vertical positions determined by the `x` and `y` properties of each data record. The code uses D3.js version 3.5.5, specifically the `d3.select`, `d3.csv`, and the `data`, `enter`, `update`, and `exit` selection methods to manage the circles. All circles are styled with a uniform teal fill (`#40E0D0`) and a fixed radius of 15 pixels, while the SVG viewport is set to 250 by 250 pixels. The rendering relies entirely on SVG elements.

AAlvaroMoro

58% match

Loading thumbnail…

SVG

This example shows two labeled line charts, “Home” and “Away,” tracking a numeric value across eight time steps, with hover interactions highlighting each line and its points. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.line` for path generation, and SVG elements for rendering. Circles mark individual data points and show their values on hover, while lines increase in opacity and stroke width on mouseover. The chart includes bottom and left axes generated with `d3.axisBottom` and `d3.axisLeft`, and all transitions use D3’s `.transition()` and `.duration()` methods.

VVishwas2629

58% match

Loading thumbnail…

D3 Example 2

Two datasets, `y1` and `y2`, are plotted against a shared `x` axis, showing how their values diverge over the same input range. The visualization uses a single SVG canvas with green and blue circles for each dataset, and red and black line paths connecting the points. Built with D3 v7, it loads tab-separated data from `example2.tsv` using `d3.tsv`, scales both axes with `d3.scaleLinear`, and computes the line paths with `d3.line`. The layout positions axes within a 700×400 pixel light-gray SVG.

OOleJRask

58% match

Loading thumbnail…

SVG face

This example shows a scatter plot of dialog lines in movies, with the number of men’s lines on the x-axis and women’s lines on the y-axis. Each circle represents a film, colored from blue to red based on men’s line count, and hovering reveals a tooltip with the movie title and both line counts. Built with React and D3 v5, it uses `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to load data, scale axes, and render SVG circles with interactive mouse events.

Uuttam-vish

58% match

Loading thumbnail…

The d3 test

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG Data Set, plotting x and y values as red, semi-transparent circles. The example uses D3 v2 with linear scales and SVG circles to render the points. It builds axes with `d3.svg.axis` and positions each circle via `d3.scale.linear` for x and y translation, with margins defining the chart layout.

SSushanta77

57% match