martinbirch@outlook.dk

@marhansee·7 public vizzes

Polished scatter plot with own data

This interactive scatter plot visualizes the Boston housing dataset, allowing users to explore relationships between different housing attributes through dropdown menus that control the x and y axes. The visualization uses React hooks to manage state and D3.js v5’s `scaleLinear`, `extent`, and `csv` methods to load and scale the data. Points are rendered as SVG circles with native `<title>` tooltips, while custom axis components draw ticks and labels, and the plot includes formatted abbreviations for axis values.

Apr 30, 2024

Loading thumbnail…

Polished scatterplot with menus

This example visualizes the Iris dataset as a scatterplot, with interactive dropdown menus allowing viewers to select which flower attributes appear on the X and Y axes. Built with React and D3.js v5, it uses `d3.scaleLinear` and `d3.extent` to map data values to SVG coordinates, with axes rendered as custom React components. Data loads asynchronously via `d3.csv`, and hover tooltips display formatted values using SVG `<title>` elements. The interface is styled with the Poppins font and the react-dropdown library.

Apr 29, 2024

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on each axis, with options including sepal length, sepal width, petal length, petal width, and species. The visualization uses React to manage state for the selected axes and D3 v5’s `scaleLinear`, `extent`, and `csv` to load and scale the data. SVG circles render each data point with a tooltip, while custom React components draw tick marks, axis labels, and the dropdown controls.

Apr 29, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing viewers to explore relationships between sepal and petal measurements by swapping attributes on the x- and y-axes via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for axes, `csv` for data loading, and SVG circles rendered through React components for marks. At any moment, the graph displays one combination of the four numeric attributes, with axis labels updating dynamically to reflect the selected measures.

Apr 29, 2024

Loading thumbnail…

Stylized Scatter plot

This example visualizes the classic Iris dataset, plotting sepal length against sepal width as a scatter plot. The data is loaded as CSV using `d3.csv` and rendered as SVG circles within a React component. Linear scales via `d3.scaleLinear` and `d3.extent` map the data to the chart area, with axes generated by custom React components using `xScale.ticks()`. The visualization uses a clean, stylized design with the Poppins font, teal marks, and labeled axes, while native SVG `<title>` elements provide tooltips.

Apr 29, 2024

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the iris dataset, mapping petal length on the x-axis and petal width on the y-axis for individual flower samples. Each data point appears as a circle, with native SVG tooltips revealing the exact x-value on hover. The visualization uses React for component structure and d3.scaleLinear for both axes, which are generated via custom AxisBottom and AxisLeft components. Styling relies on the Poppins font and a muted teal color scheme, with data loaded asynchronously from a CSV file using d3.csv.

Apr 29, 2024

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the ten most populous countries as a horizontal bar chart, using the United Nations World Population Prospects 2019 dataset. Each bar’s length represents population, with a formatted x-axis converting values into billions. Built with React and D3 v5, it employs `scaleBand`, `scaleLinear`, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG elements. The chart features styled tick marks, a Poppins font, and hover tooltips via the `<title>` element.

Apr 29, 2024