ROU

@Yu-Rou-Weng·4 public vizzes

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes to plot on the x and y axes, while the SVG renders circles for each data point. Built with React, the example uses D3's `scaleLinear` for axis scaling and formatting. Hovering over a circle displays a tooltip with the corresponding measurement value. The interface includes axis labels that update dynamically based on the selected dimensions.

Sep 18, 2023

Loading thumbnail…

Fork of Fork of React & D3 Starter-2

This example displays a scatterplot of the classic Iris flower dataset, using sepal length for the x-axis and petal length for the y-axis, with each point drawn as a semi-transparent circle. The visualization is implemented using React for the component structure and D3 v7 for the rendering logic, specifically leveraging D3's `scaleLinear`, `extent`, and axis functions to map data values to pixel coordinates. The SVG output is generated within a React wrapper that uses a `useRef` hook to pass the target element to the D3 visualization function. The data is loaded asynchronously via D3's `csv` parser, and the chart scales to the full size of the browser window.

Sep 18, 2023

Loading thumbnail…

Fork of React & D3 Starter

This example renders the classic Iris flower dataset as a scatterplot, plotting sepal length against petal length across three species. It demonstrates a clean separation between React and D3, using React hooks for data loading and state management while delegating SVG rendering to D3 selection joins and scaleLinear. Axes are drawn with d3.axisLeft and d3.axisBottom. The animated enter/update/exit pattern is handled through D3’s `join` method, making the starter suitable for scaling to more complex, interactive visualizations in production projects.

Sep 18, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

Sep 18, 2023