Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

This animated scatter plot visualizes university rankings across multiple countries, cycling through four metrics: Research Environment, Students to Staff Ratio, Research Quality, and Industry Impact. Built with D3 v3, the chart uses distinct SVG symbols (star, square, circle) to represent different data dimensions, with axes updating every two seconds as the metric changes. The visualization leverages a reusable chart pattern, where the scatter plot component is separated into its own module and accepts configurable setters for data binding and scales.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This visualization combines a scatter plot with line charts to explore university rankings, plotting countries on a shared x-axis band scale and metrics like research environment, quality, and industry impact on a y-axis from 0 to 100. It renders red circles for student-to-staff ratios alongside steelblue line paths per university, using the D3 v6 APIs `scaleBand`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`. The data comes from a CSV of University Ranks, fetched via `d3.csv` and parsed with custom numeric conversions. The reusable `scatterPlot` module demonstrates a configurable chart factory pattern with setters for width, height, and value accessors.

Vvinodreddysagam929@gmail.com

91% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through four student categories—Bachelors, Masters, PHD, and Jobs—by displaying the number of students going abroad over time. Rendered with SVG and D3 v6, it uses distinct symbol shapes for each category, with smooth transitions between views every two seconds. The chart includes labeled axes for "Years" and "No of Students Going Abroad", and dynamically updates the title and symbol style as it cycles through the dataset.

Vvinodreddysagam929@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates an animated, reusable D3 scatter plot built with the reusable chart pattern. It visualizes country-level time series data, plotting each country's values for two different years on the x and y axes, with circles positioned using linear and band scales. The chart updates every two seconds by randomizing one country's data, triggering a re-render to illustrate dynamic data binding and transitions. Rendered as SVG with axes and circles, it emphasizes the modularity of D3's data-join and the flexibility of reusable chart components.

Mmukundakrishna.r@gmail.com

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the relationship between student population and student-to-staff ratio in a scatter plot, with each circle representing a university. It loads CSV data from a GitHub URL, parses it, and maps the selected columns to x and y positions using D3’s `scaleLinear`. The chart uses `axisBottom` and `axisLeft` for axes, while circle colors come from `scaleOrdinal` (though the color mapping is static to species names not present in this dataset). The reusable `scatterPlot` function encapsulates the chart’s configuration, and SVG rendering is used throughout.

Ssagamreddy929@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, plotting student marks, study time, and course count as x and y coordinates. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and SVG `circle` elements to render points. Every five seconds, the x-axis value switches between the three numeric columns, updating the chart via a `setInterval` loop. The reusable chart pattern from Bostock’s article is implemented, with dynamic scaling of axes based on the current data extent.

KKeerthipriyaBankuru

83% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying study time and marks with animated transitions that cycle through different axes every five seconds. Users see the correlation between marks, study time, and number of courses as points reposition smoothly. Built with D3 v6, it uses scaleLinear, axisLeft, axisBottom, and a reusable chart factory pattern. SVG circles animate between states using JavaScript's setInterval, while the code imports utilities like csv and select for data loading and DOM manipulation.

NNaimisha-M

82% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, visualizing the relationship between student marks and study time, with an option to rotate through different data columns at regular intervals. The visualization uses D3.js version 6.7.0, employing scaleLinear, axisLeft, axisBottom, and a custom reusable scatterPlot function that manages the SVG rendering. Each circle’s position maps to the selected x and y values, and the axes update dynamically every five seconds as the x-value changes among Marks, time_study, and number_courses. The chart fills the viewport and applies a custom Share Tech font.

NNaimisha-M

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses D3.js to visualize global population data, cycling through life expectancy, GDP per capita, population, and year on the x-axis every two seconds. The plot leverages `scaleLinear` for axes, animated circles with `attr`, and dynamic re-rendering via the `scatterPlot` component, which updates scales and axes through `svg.call()` as the x-value changes.

Ppavan vasamsetti

82% match