SVG face

100%

✓ Published1🌍 Public

Last edited Mar 5, 2020

Created on Feb 20, 2020

Forked from 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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

87% match

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

86% match

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of the top 15 movies from an IMDB dataset, displaying their Meta scores. The React app loads CSV data with d3.csv, then uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. It renders SVG rectangles for each bar, with axes built manually using d3.ticks and tick labels drawn as SVG text elements.

NNikitha123171

78% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the titles and ratings of 15 movies, fetched from a remote CSV file. Built with React and D3 v5, it renders an SVG with horizontal bars and axes. The code uses `d3.csv` to load and parse data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and maps data to SVG `rect` elements for the bars.

AAISWARYAMARAPATLA1999

77% match

Loading thumbnail…

Scientific Data Visualisation Assignment Rendering Marks and Channels with React & D3

This bar chart displays the gross earnings of twelve movies, with movie titles on the y-axis and their corresponding dollar values on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and generates axis ticks. The data is fetched from a remote CSV URL, and the chart draws blue rectangles for each movie's gross value.

SSravyaAnnadi

76% match

Loading thumbnail…

Lets make a face with D3 js!

This example displays a horizontal bar chart of population data for the ten most populous countries, using a linear scale for population values and a band scale for country names. The visualization is rendered as SVG within a React framework, with D3 v6 handling data loading via `csv`, scales via `scaleLinear` and `scaleBand`, and axes via `axisLeft` and `axisBottom`. The bars are styled with steelblue fill, and the chart includes margins and a padded band scale to separate each bar.

Nnsadath

76% match

Loading thumbnail…

Title

A simple horizontal bar chart visualizes five numeric values using SVG rectangles. D3.js v3 scales the bar widths linearly from the data’s maximum value to a fixed pixel width. Each bar displays its corresponding number as white text at the rectangle’s end. The chart is built by binding the data array to groups, appending rect and text elements, and setting their positions with transform attributes.

SSaiteja

76% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a horizontal bar chart of the top 15 movies by Meta score, displaying each film’s title along the y-axis and its score along the x-axis. The visualization uses React for component state and rendering, with D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions to load and scale data from a GitHub-hosted CSV. SVG rects are drawn inside a transformed group, with custom tick labels and gridlines generated manually rather than via D3 axes. The data loads asynchronously and defaults to a "Loading..." message until ready.

NNikitha123171

76% match