Trabalho Final D3

100%

Trabalho Final D3

✓ Published0🌍 Public

Last edited Jun 2, 2021

Created on May 31, 2021

Forked from Fork of Polished Scatter Plot with Menus -mpg

This interactive scatterplot, built with D3 v5 and React, visualizes the auto-mpg dataset, plotting five car attributes (e.g., miles per gallon, horsepower) against each other on selectable X and Y axes. Each point represents a vehicle, colored by its brand according to a categorical color scale shown in the legend. Users can hover over legend entries to highlight points from that brand, and dropdown menus allow them to switch the attributes on each axis. The SVG rendering uses modular React components for the axes, marks, and color legend, with D3’s `scaleLinear`, `scaleOrdinal`, and CSV parsing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus -mpg

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes like miles per gallon, horsepower, and weight. Two dropdown menus let viewers select which attributes appear on the X and Y axes. A color legend on the right encodes car brand; hovering over a legend entry highlights only that brand's points and dims others. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` SVG components.

11joaorodrigues

84% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the relationship between pairs of attributes in the auto-mpg dataset, allowing users to select which variables appear on the x- and y-axes via dropdown menus. Built with React and D3.js v5, the visualization renders points as SVG circles colored teal, with axis labels derived from the selected attributes. The data, loaded using d3.csv, includes numeric fields such as miles per gallon, horsepower, and weight, with axes scaled using d3.scaleLinear and tick formatting via d3.format. A title tooltip on each circle displays the formatted x-value.

11joaorodrigues

84% match

Loading thumbnail…

Cars Scatter Plot with menus with D3.js!

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing viewers to explore relationships between car attributes like weight, horsepower, and acceleration. Two dropdown menus let users select which columns to plot on the x and y axes. Built with React and D3.js version 5, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and animated transitions for circles that move to their new positions when the selected variables change.

Fforcox43

83% match

Loading thumbnail…

MPG Scatter Plot, Color & Interactive Legend

This scatter plot displays vehicle MPG highway ratings against a selected attribute, with each point colored by car make. Users can change the y-axis attribute via a dropdown menu. The interactive color legend highlights points of a specific make on mouse hover while fading others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and SVG circles with tooltips for data inspection.

AAndre J Denais

82% match

Loading thumbnail…

Scatterplot

This scatterplot displays the relationship between miles per gallon and horsepower for vehicles in the auto-mpg dataset, loaded via d3.csv. The React component renders SVG circles for each data point using d3.scaleLinear for both axes. An interactive dropdown lets the user switch between years, though the code only changes state without filtering the visualized data. Axis components construct tick marks and labels, while the Marks component maps each row’s mpg and horsepower values to circle positions.

MMark Jones

82% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong

82% match

Loading thumbnail…

Cars Scatter PLot

This interactive scatter plot visualizes the relationship between car horsepower and weight using the classic MPG dataset. Users can switch the x-axis attribute via a dropdown menu to explore different variables. The visualization is built with React and D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with animated SVG circles transitioning over one second. Data is loaded from a CSV file and displayed with axis labels and a title in an SVG canvas.

Iinroadings

81% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays automobile data from the auto-mpg dataset, plotting miles per gallon against a variable selected via a dropdown menu. Users can switch the x-axis attribute among columns like horsepower, weight, and acceleration. The visualization is built with React, D3 v6, and SVG rendering, using d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv for data loading. The dropdown menu is implemented as a reusable component with D3 selections, updating the chart dynamically on user interaction.

MMatan

81% match