vesnaj

@vesnaj·6 public vizzes

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as sepal width on the y-axis against city names on the x-axis. A dropdown menu allows users to switch between different measurement attributes for the y-axis. The visualization is built with React and D3 v5, using scaleLinear for axes and SVG rendering. Data loads asynchronously via d3.csv, with axes and marks defined as reusable components.

Oct 4, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, showcasing relationships between flower measurements. Users can dynamically select which attributes to plot on the X and Y axes using dropdown menus, with the chart updating instantly. The visualization uses React for component-based UI, d3.v5 for data processing and linear scaling, and SVG for rendering. Axis ticks are styled with Poppins font, and data points are colored teal with hover tooltips displaying exact values.

Oct 4, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This polished scatter plot of the Iris Dataset lets users explore relationships between four flower measurements via interactive dropdown menus for the X and Y axes. The visualization, rendered as SVG through React, uses D3 v5 scale functions to map data to coordinates and axis components. A D3 CSV loader fetches the dataset, while React state management handles axis selection. Points are drawn as circles with simple tooltips showing the x-axis value. The Poppins font and muted color palette give the chart a clean, modern look.

Oct 4, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Sep 28, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, with a dropdown menu to select the y-axis attribute (sepal length, sepal width, petal length, petal width, or species) and a fixed x-axis representing the numeric "Gradovi" attribute. The visualization updates dynamically when the user changes the dropdown selection, using React state and D3 scales (scaleLinear, extent) to map data to SVG coordinates. The code leverages d3.csv for data loading, the .ticks() method for axis generation, and reusable React components for rendering axes and marks, with tooltips provided by SVG title elements.

Sep 27, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which attribute appears on each axis via dropdown menus. The chart renders as an SVG using React components for the axes and marks, with D3 scales and extent functions handling the data domain. The visualization updates dynamically on selection, showing the relationship between any two measured flower attributes, with hover tooltips displaying the x-value in abbreviated format.

Sep 24, 2020