Skip to main content
SimilarExport ZIP
100%

SVG face

✓ Published0🌍 Public
Uuttam-vish
Last edited Feb 21, 2020
Created on Feb 20, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG face

A scatter plot visualizes movie dialogue data, with each circle representing a film. The x-axis shows the number of men's lines and the y-axis shows women's lines from the provided CSV dataset. Hovering reveals the movie title and exact line counts via a tooltip. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading, with circles styled in steelBlue. Animated transitions occur on the tooltip's opacity changes.

Uuttam-vish
95% match
Loading thumbnail…

SVG face

This visualization displays a horizontal bar chart showing the number of Men_line data points for various movie titles, with each bar’s length proportional to the value. It uses React and D3.js v5, specifically `csv` for data loading, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. The bars are rendered as SVG rectangles within a 900x500 pixel canvas, sourced from the provided `data.csv` file.

Uuttam-vish
87% 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
75% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

VVamsi Bhargav Sukamanchi
74% match
Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79
73% match
Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929
73% match
Loading thumbnail…

Movies Scatter Plot

A scatter plot displays movie ratings against release dates from 1958 to 2019, with each red semi-transparent circle representing a single film’s score. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data, while `csv()` loads the dataset and SVG renders the circles. Grid lines extend from both axes, and custom axis labels and a title annotate the chart.

DD0no
72% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug
72% match