Fork of Stylized Bar Chart

Fork of Stylized Bar Chart

This example visualizes the Iris flower dataset as an interactive scatter plot, displaying sepal length against sepal width for individual specimens. Semi-transparent teal circles represent each data point, with hover tooltips revealing exact measurements. The visualization uses React components with D3 scales (scaleLinear) and SVG rendering, featuring styled axes with tick marks and rotated axis labels. Data is loaded asynchronously via d3.csv from a remote GitHub source, with numeric parsing applied to all measurement columns before plotting.

PPratik Raja

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as an SVG scatter plot within a React application, mapping sepal length on the x-axis and sepal width on the y-axis. It uses `d3.scaleLinear` for both axes, with `d3.extent` to compute the domains from the CSV data, and renders circles for each observation. The code includes custom React components for the axes and marks, with `d3.format` handling the x-axis tick labels in compact notation. Styling is applied through CSS classes for ticks and marks, with data loaded via `d3.csv` from a GitHub-hosted file.

Pplusbeauxjours

Fork of Stylized Bar Chart

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width, with each flower species represented by a circular mark. The chart uses React components to render SVG axes and marks, with d3.scaleLinear handling both spatial scales. D3’s csv loader parses the data, while the d3.format function applies abbreviated tick labels. The visualization demonstrates a clean, styled layout with labeled axes and a tooltip showing the sepal length value on hover.

JJi Won Yeom

Fork of Stylized Bar Chart

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length along the x-axis and sepal width along the y-axis. Each flower is rendered as a circle with a tooltip showing its sepal dimensions. The visualization uses React to generate SVG elements, with D3 v5 providing scaling, extent calculation, and tick formatting through `d3.scaleLinear` and `d3.format`. The axes and marks are constructed from reusable components, with custom styling applied via CSS classes for fonts and colors.

MMichael Bergerson

Fork of Stylized Bar Chart

This example displays the Iris dataset as a scatter plot, with sepal length and width mapped to the x- and y-axes. The visualization uses React to render SVG elements, including circular marks for each data point, styled with the Poppins font and custom colors. Axis tick marks and labels are generated using d3.scaleLinear and d3.format APIs, while d3.csv loads the data from a remote file. Tooltips reveal the precise sepal length value when hovering over a circle.

CChristian Rohrer

Fork of Stylized Bar Chart

This example displays the relationship between sepal length and sepal width for the Iris dataset, rendered as a scatter plot of circles. It uses React to manage the component structure and d3.scaleLinear scales for positioning, with d3.axisBottom and d3.axisLeft generated from reusable React components. The data is loaded via d3.csv from a GitHub gist, and each circle includes a native SVG title element for tooltips. Axes are labeled and styled using the Poppins font.

EEugenio2192

Fork of Stylized Bar Chart

This interactive scatterplot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width, with each point representing a flower specimen. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` for coordinate mapping, plus custom `AxisBottom` and `AxisLeft` components for tick rendering. The SVG chart includes axes, labels, and tooltips via SVG `<title>` elements, with data loaded asynchronously using `useData` and D3's `csv` parser. The styling uses the Poppins font, and the visualization displays the dataset without color encoding for species.

EEthan Pierce

Fork of Stylized Bar Chart

This example visualizes the iris dataset as a stylized scatter plot, displaying each flower’s sepal length and width as a circle. The chart uses D3 v5’s `scaleLinear` and `extent` to compute scales from the data, with axes rendered via custom React components (`AxisBottom`, `AxisLeft`). Tooltips show formatted tick values using `format('.2s')`. The visualization is built with React, uses SVG for rendering, and loads data via `csv` from a GitHub-hosted URL.

KKM44VW@student.aau.dk