E

Eugenio2192

@Eugenio2192·21 public vizzes

Loading thumbnail…

Interactive cl

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Dropdown menus control which numerical attributes appear on the x and y axes, while a color legend indicates species via a categorical D3 scale. Built with React and D3 v5, the SVG visualization renders axes via custom components and data points as circles with tooltips. The chart uses D3's `scaleLinear` for positional encodings, `scaleOrdinal` for color, and `csv` for data loading.

Loading thumbnail…

Color Legend

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between four measurements: sepal length, sepal width, petal length, and petal width. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes the three iris species using an ordinal color scale. Built with React and D3 v5, the visualization uses svg circles with tooltips showing the x-axis value on hover, and employs `scaleLinear`, `scaleOrdinal`, and the `csv` data loader from d3.

Loading thumbnail…

Color

This interactive scatter plot visualizes the Iris dataset, comparing two user-selected measurements of iris flowers. The chart encodes flower species with a color scale using d3.scaleOrdinal and displays the data as circles rendered in SVG by React components. Dropdown menus built with the React-Dropdown library allow switching between sepal and petal measurements for the x and y axes, using d3.scaleLinear for scales and d3.extent for domains. The axes are drawn with custom SVG components using d3.ticks for tick marks.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris Dataset, allowing users to compare any two measured attributes by selecting them from dropdown menus for the X and Y axes. Built with React and D3 v5, the visualization renders data points as SVG circles with native tooltips. The charts axes are generated using custom React components that leverage D3 scales. The interface is implemented using the `react-dropdown` library, while data loading and parsing are handled by D3's `csv` function.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes through dropdown menus that dynamically reassign the x and y axes. The visualization uses React for component management and state, d3.v5 for scales and CSV parsing, and renders SVG circles with tooltips showing formatted values. Users can switch between sepal and petal measurements, with axis labels updating accordingly to reflect the selected variables.

Loading thumbnail…

Menus with react

This example demonstrates a React-based dropdown menu for selecting a pet, with the chosen value displayed in the browser console. The `Dropdown` component renders a `<select>` element from a static array of pet options, and its selected state is managed via React’s `useState` hook, updating through the `onSelectedValueChange` callback. The interface uses React 16.13.1 and ReactDOM to mount the app, with inline CSS styling providing a large, readable font size. The code shows a straightforward implementation of controlled form inputs in React without additional data sources or visualization libraries.

Loading thumbnail…

Fork of Smiley Face Part III

This visualization renders a classic yellow smiley face using React and D3. The face is drawn with SVG circles for the head and eyes, and a D3 arc generator for the mouth. The `arc()` function creates a smile-shaped path by specifying inner and outer radii, mouth width, and start and end angles in radians. All elements are positioned relative to a center point using translate, with the React component managing the SVG markup and D3 handling the path geometry.

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, rendered as an SVG using React. The map uses a Natural Earth projection and shows land areas in green, a light blue sphere, and dark green interior borders. The data comes from the World Atlas TopoJSON file, loaded with d3.json and converted using topojson’s feature and mesh functions. Styling is applied through CSS classes, and d3.geoPath and d3.geoGraticule generate the geographic shapes and grid lines.

Loading thumbnail…

Fork of Working with Time

This fork of the Working with Time example displays a San Francisco temperature time series as a smooth curved line chart in SVG. The visualization uses React components for axes and marks, with D3 scales (scaleTime, scaleLinear) and the curveNatural line generator to render the data path. The data comes from the Data Canvas Sense Your City Dataset’s weekly temperature measurements, loaded via d3.csv.

Loading thumbnail…

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.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example displays a scatter plot of the Iris Dataset, mapping petal length against sepal width with circles of a fixed radius. The visualization uses React components to render SVG elements, with axes and marks built through reusable functional components. D3’s `scaleLinear`, `extent`, and `max` functions handle scaling and domain calculations, while the `csv` loader in `useData` parses the dataset asynchronously. A native SVG `<title>` element provides tooltips for each point, and the styling uses the Poppins font with custom tick and label colors.

Loading thumbnail…

Styled barchart

This bar chart displays the populations of the ten most populous countries in 2020, using a horizontal layout with a log scale for the x-axis. The visualization is rendered as SVG elements, with axes and marks created through reusable React components. It leverages d3.scaleBand and d3.scaleLinear to map data, d3.csv to load the UN population dataset, and d3.format for tick labels. The styling uses custom CSS classes with the Poppins font and a teal color scheme for the bars.

Loading thumbnail…

Refactor barchart

This bar chart displays the top 10 countries by population for 2020, using data from a CSV file loaded with D3's `csv` utility. React renders axis ticks and bars as SVG elements, with `scaleBand` and `scaleLinear` from D3 computing positions and lengths. The code modularizes axes and marks into separate React components, passing down scale objects as props to generate the visualization declaratively.

Loading thumbnail…

Bar with axis

This example displays the top 10 most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Using React hooks to manage data loading, it fetches CSV data via D3’s `csv` utility and renders SVG bars with `rect` elements. D3’s `scaleBand` and `scaleLinear` position the bars, while custom tick marks and labels are generated from `xScale.ticks()` and the y-scale domain, all within a React component tree.

Loading thumbnail…

Bar

This example renders a bar chart showing the populations of the ten most populous countries in 2020, based on UN population data loaded via `d3.csv`. The visualization uses React to manage state and render SVG `<rect>` elements, with `d3.scaleBand` mapping country names to vertical bands and `d3.scaleLinear` mapping population values to bar widths. The code specifically imports and uses `csv`, `scaleBand`, `scaleLinear`, and `max` from D3 v5, while React handles the declarative component structure and the `useState`/`useEffect` hooks for data fetching.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color occupying an equal-width slice arranged around a central point. The code loads the CSS color dataset using D3’s `csv` utility, then uses React hooks like `useState` and `useEffect` to manage the asynchronous data fetching and rendering. It leverages D3’s `pie` and `arc` generators to compute the slice geometry, drawing the result as SVG paths with colors taken from the `RGB hex value` column. React 16.9 and D3 v5 run together, with the d3 shape calculations feeding React’s declarative SVG output.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates asynchronous data loading in a React component using D3 utilities, fetching a CSV of CSS named colors from a gist URL via `d3.csv`. While the data loads, a "Loading..." message displays; once resolved, the app maps each row to a colored horizontal `<div>` strip whose background corresponds to the color’s RGB hex value. React hooks (`useState`, `useEffect`) manage the asynchronous state, with D3 as the data-handling library and React 16.9 rendering the result.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle attributes from the auto-mpg dataset, plotting weight against horsepower while using the size and color of circles to encode miles per gallon and country of origin. The visualization is constructed using the Vega-Lite API, which builds a declarative specification rendered through D3 and Vega-Lite libraries. It draws scatterplot circles with custom styling, reads CSV data asynchronously via D3’s csv loader, and includes interactive tooltips that display car names when hovered.

Loading thumbnail…

Loading data with React and D3

This example demonstrates loading a remote CSV dataset with React and D3, displaying the file size, row count, and column count as text. The `useState` and `useEffect` hooks manage asynchronous data loading, while D3’s `csv` fetches the CSS named colors data from a GitHub gist. The message is generated with `d3.csvFormat` to calculate byte size, and rendered as large text in an SVG-free `<pre>` element. React 16.9 and D3 v5 handle the data pipeline and rendering.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the loading and parsing of CSV data by fetching a file from a GitHub gist and displaying summary statistics—file size in kilobytes, row count, and column count—in large text within an HTML `<pre>` element. It uses the Fetch API with async/await to retrieve the raw text, then parses it with `d3.csvParse` from D3 v7. The resulting data structure’s length and `columns` array are accessed to report the metrics, showcasing a minimal workflow for handling tabular data in a browser.

Loading thumbnail…

Smiley Face Part 1

This visualization shows a grid of fifteen smiley faces, each with randomized eye size, mouth radius, and mouth width, rendered using React components and SVG. The code constructs each face from separate components, including `BackgroundCircle`, `Eyes`, and `Mouth`, where the mouth uses `d3.arc` to generate a path. The faces are drawn with a brown background circle and black stroke, and are arranged using `d3.range` to create the array of faces. The rendering occurs via React's `ReactDOM.render` into an HTML page.