Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

This bar chart displays the number of flowers per Iris species, using an SVG rendering with D3 v5. The visualization loads data from a local CSV file and maps each flower type to a horizontal bar scaled by its numeric count. It customizes both axes, removing default domain lines and using `d3.axisBottom` with a comma-formatted tick label, while `d3.scaleBand` positions the categorical species labels. The chart also adds a title and axis label via appended SVG text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart visualizes the Iris dataset as a scatterplot, plotting petal length against sepal width as circles with tooltips on hover. The React and D3 v5 code uses `scaleLinear`, `extent`, and `format` from d3 to handle scales and tick labels, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG axes and data points. Data is loaded asynchronously via `csv` from a GitHub gist, with styling applied through Poppins fonts and CSS classes.

Ssb15jr@student.aau.dk

81% match

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width as circular marks. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.extent` to set scales, while custom Axis components render tick lines and labels in SVG. The visualization includes hover tooltips via SVG `<title>` elements, styled with Poppins typography and teal marks, with data loaded asynchronously from a CSV source.

IIlyas Filali

81% match

Loading thumbnail…

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

81% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the Iris dataset as a scatter plot of petal length against sepal width, with circular marks colored teal and axes with tick labels. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains, and SVG for rendering. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders circles with HTML tooltips showing petal length values. Data loads asynchronously via `csv` from a GitHub-hosted Iris dataset.

GGregS1290

81% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as a scatter plot of sepal length against sepal width, with each flower represented by a circle. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and `d3.extent` to set domains, while `d3.csv` loads data from a GitHub-hosted CSV. The SVG rendering includes custom axis components and circle marks with tooltips showing the sepal length value.

KKonJoDot

81% match

Loading thumbnail…

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

80% match

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other as colored circles. Users can change which quantitative field appears on each axis through dropdown menus, allowing exploration of relationships between all four flower dimensions. The visualization uses React components to render SVG marks and axes, with D3.js v5 providing scales, CSV data loading, and extent calculations. A Poppins font and muted color palette give the chart a clean, modern appearance.

NNika

80% match

Loading thumbnail…

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

80% match