[VizStudy]Add a menu on polished scatter plot

100%

[VizStudy]Add a menu on polished scatter plot

✓ Published0🌍 Public

Last edited Nov 5, 2019

Created on Oct 27, 2019

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset, showing correlations between eight economic freedom attributes. Users select X and Y axes via dropdown menus to explore relationships between variables like Property Rights and Tax Burden. The visualization is built with React and d3.scaleLinear for axes and scales, rendering SVG circles with tooltips. Data loads through d3.csv, while custom AxisBottom, AxisLeft, and Marks components structure the polished chart.

AI-generated description

A polished scatter plot of The 2019 World Economic Freedom Index dataset with dropdown menus.

Dropdown menus added to the visualization to show the correlation between the selected 2 economic freedom indexes.

MIT Licensed

Similar vizzes

Loading thumbnail…

[VizStudy]Week6: Add a menu

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset, allowing users to explore relationships between different economic indicators. Dropdown menus let viewers dynamically select which attribute appears on each axis, with the chart updating the scatter plot, axis labels, and scale accordingly. The visualization uses React components with D3 v5 scales (`scaleLinear`, `extent`, `max`) to map data to SVG positions, while `useState` and `useEffect` hooks manage state and data loading. Axis components and marks are rendered as reusable React functional components, with tooltips showing formatted values via the `format` function.

Hhotdoujiang

89% match

Loading thumbnail…

Fork of [VizStudy]Week6: Add a menu

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset from a GitHub gist. Users can dynamically select which four attributes—teaching, research, citations, and total_score—to display on the x and y axes via React dropdown menus. Built with React hooks (useState), the chart renders SVG circles using D3 v5 scales (scaleLinear) and extent for axis domains. The code includes custom React components for axes and marks, with CSV data loading through D3’s csv function and axis labels updating based on menu selections.

JJerlineJJ

85% match

Loading thumbnail…

[withDropDown]World Economic Freedom Index

This example visualizes the World Economic Freedom Index, plotting countries by their Tax Burden and Government Integrity scores, with color encoding by region and point size by 2019 score. The vega-lite-api specification defines the circle marks, while d3.csv loads the data from a GitHub gist. React renders a dropdown menu for attribute selection, though the main visualization runs independently. The scatterplot reveals no clear correlation between tax burden and government integrity, but highlights regional clusters: European countries (red) show low tax burden with high integrity, while Sub-Saharan African countries (green) exhibit the opposite pattern, with North Korea as an outlier.

Hhotdoujiang

76% match

Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export data from 2000 to 2016, with each circle representing a country-year observation. Users select the x and y axes from dropdown menus to compare different economic indicators across countries, while a color legend toggles which country category is highlighted in the plot, dimming non-selected points. Built with D3 v5, the visualization uses an animated transition to grow circles over 2 seconds, scales axes with `d3-scaleLinear`, and renders SVG elements. A hover tooltip displays the reporter description for each point, while the legend and dropdowns filter and control the displayed data.

Vveagy

75% match

Loading thumbnail…

Polished Scatter Plot with Menus_Life Expectancy Data

This interactive scatter plot explores relationships among four attributes—life expectancy, GDP, year, and schooling—from a CSV dataset loaded via d3.csv. Two dropdown menus, built with ReactDropdown, independently control the X and Y axes, allowing users to compare any pair of variables. The visualization uses React state to manage selections and renders SVG circles with d3.scaleLinear axes. Data points are colored teal and include SVG tooltips displaying formatted X values. The layout features labeled axes and a fixed width, with styling from the Poppins font.

Aaishwarya8615

74% match

Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the Happiness Score and five selectable y-axis attributes (Economy, Social Support, Generosity, Freedom, and Perception of Corruption) using the Iris Dataset. A dropdown menu updates the y-axis scale and label dynamically, with circles rendered via React and SVG. The visualization uses d3.scaleLinear for axes, d3.csv for data loading, and d3.format for tick labels, all coordinated through React state to trigger re-renders.

NNikithakatta30

74% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

SShuyu Zheng

74% match

Loading thumbnail…

Polished Stylized Scatter Plot with Menus

This interactive scatter plot displays Fisher's Iris dataset, allowing users to select any of the five attributes for both the X and Y axes via dropdown menus. The visualization updates the axes, axis labels, and data point positions dynamically. Built with React and D3 v7, it uses `scaleLinear` for axis scaling and SVG circles for rendering data points. The chart features a polished Poppins font, styled tick lines, and a color scheme of teal and gray.

RRedSorrel

74% match