TrashBoatDora

@TrashBoatDora·7 public vizzes

109550048

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal length and width for three flower species. Users can select any data column for the x-axis and y-axis via dropdown menus, and the plot updates accordingly, with colored circles representing each species. The visualization uses D3 v5, employing `select` and `csv` for data loading and transformation, `scaleLinear` for axes, and `scaleOrdinal` for color mapping. The chart includes labeled axes, axis ticks, and a legend for the three Iris species.

Oct 21, 2022

Loading thumbnail…

scatter plot form chart

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationship between two user-selected measurements (such as sepal length and petal width) for 150 flowers across three species. Points are color-coded by species, with a legend and labeled axes included. The visualization uses D3 v5 with SVG rendering, employing scales like `d3.scaleLinear` and `d3.scaleOrdinal`, along with `d3.axisBottom` and `d3.axisLeft` for the axes. Dropdown menus allow users to dynamically change which data columns are plotted.

Sep 30, 2022

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with color encoding species and a legend for reference. The visualization uses React with D3 v5, employing `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `extent` to set domains. Marks are drawn as SVG circles with tooltips showing formatted values. The code defines reusable axis and legend components, and loads data via `d3.csv` from a remote URL.

Sep 26, 2022

Loading thumbnail…

Fork of Color and Size Legends

Two reusable custom legends are rendered in an SVG. A color legend maps the ordinal fruit categories to distinct colors, while a size legend uses a square-root scale to encode the numeric values 2, 4, 6, 8, and 10 with varying circle radii. Both legends are built using D3 v5’s selection API with `selectAll`, `enter`, `merge`, and `exit`, and rely on `scaleOrdinal` and `scaleSqrt`. The size legend’s circles use a semi-transparent black fill and black outlines.

Sep 26, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population in billions on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning and `format('.2s')` to abbreviate tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Rects render as SVG marks, with axis components drawing tick lines and labels, and a tooltip showing the formatted population value on hover.

Sep 26, 2022

Loading thumbnail…

sctter plot iris

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between numeric car attributes. Users select which columns map to the X and Y axes through dropdown menus generated by the custom `dropdownMenu` function. The visualization uses d3.v5 with `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to render axes, while circles animate from the chart center to their final positions over two seconds using `transition().duration(2000).delay()`. SVG rendering and styled tick labels complete the interface.

Sep 26, 2022

Loading thumbnail…

109550048-lris scatter plot

This scatter plot shows the relationship between engine displacement and horsepower for a dataset of cars, with color encoding the country of origin and tooltips revealing the model name. Data is loaded from a remote CSV file, while the visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite to render the chart as an SVG. The plot is configured with circles of fixed size and opacity, and axes are styled with custom colors and font sizes.

Sep 26, 2022