E

EFezerKW

@EFezerKW·23 public vizzes

Loading thumbnail…

Fork of Working with Time

This example is a scatter plot of the Data Canvas Sense Your City Dataset, showing the relationship between Reported Date and Total Dead and Missing counts from the Missing Migrants Global dataset. The visualization uses React components with D3 v5 scales and axes (`scaleTime`, `scaleLinear`, `AxisBottom`, `AxisLeft`) to render SVG circles as marks. The code also imports `histogram` and `timeMonths` for binning, though the current view displays individual data points with tooltips showing formatted dates. The chart includes labeled axes for both dimensions and loads data asynchronously via a CSV URL.

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

Loading thumbnail…

Scatter Plot Iris with Interactive Color Legend

This interactive scatter plot displays the classic Iris dataset, mapping selected measurements like petal length and sepal width onto the x- and y-axes via dropdown menus. The species of each flower is encoded through an ordinal color scale and shown in a legend. Hovering over a legend entry highlights matching data points while fading others, using mouse events and opacity transitions. The visualization is built with React, D3’s `scaleLinear` and `scaleOrdinal`, and rendered as SVG elements like circles from the `Marks` component.

Loading thumbnail…

Scatter Plot Iris with Color Legend

An interactive scatter plot of the Iris dataset with dropdown menus to select the x and y axes shows the relationship between sepal and petal measurements. The visualization uses React for the UI, d3.v7's scaleLinear, scaleOrdinal, and extent for scales, and renders as SVG with color-coded circles representing species. A color legend identifies the three Iris species, while axis labels and dropdown selectors update dynamically as users change the plotted attributes.

Loading thumbnail…

Scatter Plot Iris with Color

A scatter plot visualizes the Iris dataset, showing how flower measurements relate based on user-selected axes. The chart displays species as colored dots, with orange, teal, and purple representing the three Iris varieties. Interactive dropdown menus let viewers choose which measurement appears on the x and y axes. This React application uses D3 v7 scales (scaleLinear and scaleOrdinal) to map data values to coordinates and colors, rendering SVG circles for each observation while supporting dynamic axis and label updates.

Loading thumbnail…

Polished Scatter Plot Iris with Menus

A scatter plot of the Iris dataset lets users explore relationships between flower measurements through interactive dropdown menus that select which attribute appears on each axis. The visualization renders 150 circles as SVG elements using React components, with scales created via `d3.scaleLinear` and axes built from `xScale.ticks()`. Users switch between sepal and petal dimensions or species via a React Dropdown component, while D3's `csv` loads the remote dataset and `format` handles tick labels.

Loading thumbnail…

Scatter Plot Iris with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numeric flower measurements and species. Two dropdown menus control which attributes appear on the x- and y-axes, with axis labels updating dynamically. The visualization uses React with D3 v7 scales and SVG rendering, loading data via D3’s `csv` function. Points are drawn as circles with native SVG `<title>` tooltips, while reusable `AxisBottom` and `AxisLeft` components generate tick marks and labels using D3’s scale methods.

Loading thumbnail…

Menus with React

This example shows a React-based pet selector with a dropdown menu, where users choose from six animal options. A label and select element display the current selection, which updates in real time via React's `useState` hook. The code defines a reusable `Dropdown` component that maps over an options array to generate select elements, using `onSelectedValueChange` to handle changes and `selectedValue` to mark the active choice. The app uses `ReactDOM.render` to mount the component to the DOM, with the selected value logged to the console on each update.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” to the browser. The code imports React and ReactDOM, defines a functional component named `App`, and mounts it to the root DOM element using `ReactDOM.render`. It uses React 17.0.2 loaded from a CDN and follows the standard component-based rendering approach without any additional data sources or visualization libraries.

Loading thumbnail…

World Map

This example displays a world map rendered with a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. The visualization shows landmasses filled in teal, country borders as interior mesh lines, graticules, and a gray sphere outline. Data comes from the World Atlas TopoJSON dataset, loaded via d3.json and processed with topojson.feature and topojson.mesh. The React component structure uses hooks for data fetching and renders SVG paths for each geographic feature.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily temperature fluctuations in San Francisco over a week. The chart renders as an SVG, using natural curve interpolation to create a smooth, flowing line that highlights temperature trends. Built with React and D3 v7, the code leverages `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and custom SVG components for tick marks. The design features a Poppins font and a muted teal color scheme, with a hidden accompanying dataset showing the underlying temperature values.

Loading thumbnail…

Stylized Scatter Plot Iris

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, with its position determined by d3.scaleLinear scales and a tooltip showing the petal length value. The visualization uses React components for the axes and marks, with d3.csv loading the data from a remote source. Styling includes custom tick colors and Poppins typography, while the SVG rendering approach implements reusable axis components that generate tick marks and labels based on the provided scales.

Loading thumbnail…

Stylized Bar Chart

This visualization presents a stylized horizontal bar chart ranking the ten most populous countries using data from the UN Population 2019 dataset. The bars are rendered as SVG rectangles via React, with length encoding each country’s 2020 population. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels (e.g., converting billions to “B”). D3’s csv loader fetches the external CSV file, while the Marks component adds native tooltips showing the formatted population values.

Loading thumbnail…

Refactored Bar Chart

This visualization shows the top 10 countries by population for 2020 as a horizontal bar chart, with country names on the y-axis and population along the x-axis. Loading data via d3.csv from a UN population CSV, it uses React components to render SVG rects, with scales built from d3.scaleBand and d3.scaleLinear. Axis ticks and labels are generated manually with React JSX, mimicking D3’s axis pattern without d3.axisBottom or d3.axisLeft.

Loading thumbnail…

Axes with React & D3

This bar chart displays the top 10 most populous countries from a UN population dataset, with horizontal bars showing population values in 2020. React renders the SVG elements, managing the loading state and data transformation, while D3 v7 handles the data fetching via `csv()` and generates the axes using `scaleBand` and `scaleLinear`. The code manually creates tick marks for both axes, drawing lines and text labels within the transformed coordinate system.

Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with each bar’s length proportional to the country’s population. The visualization is built using React and D3’s `scaleBand` and `scaleLinear` to map country names to y-coordinates and population counts to bar widths, respectively. Data is loaded asynchronously from a CSV via D3’s `csv` utility, and bars are rendered as SVG `rect` elements within a margin-adjusted coordinate system.

Loading thumbnail…

Pathetic Bar Chart

This is a bar chart of the top ten most populous countries. The horizontal bars are drawn as SVG rectangles using React, with their widths scaled proportionally to the 2020 population data loaded from a CSV file via the D3 `csv` utility. The chart uses `scaleBand` for country categories and `scaleLinear` for population values. The visualization fills the entire browser window, with each bar's height determined by the band width. Although called "pathetic," the chart clearly displays the ranked population data without any styling beyond the default black bars.

Loading thumbnail…

Rendering Data with React & D3

This example uses React and D3 to render a radial burst visualization from a CSV of CSS named colors. The code loads data with D3’s `csv()` utility and displays it as a full-screen SVG. React’s `useState` and `useEffect` manage asynchronous data loading, while D3’s `pie()` and `arc()` compute the angular segments. Each slice is a `<path>` filled with the color’s RGB hex value. A “Loading…” placeholder appears until the data arrives, and the chart fills the browser window.

Loading thumbnail…

Rendering Data with React

This example demonstrates how React can render data loaded with D3 utilities. It fetches a CSV file containing named CSS colors and their RGB hex values using `d3.csv`, then displays each color as a horizontal strip. The React component uses the `useState` and `useEffect` hooks to manage the asynchronous data loading, showing a "Loading..." message until the data arrives. Once loaded, the app maps over the data array to generate styled `div` elements, with each row’s background color set from the CSV’s `RGB hex value` column.

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display data in a React application using D3 utilities. It fetches a CSV file containing CSS named colors and displays the file size, row count, and column count as text. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, while D3’s `csv` function parses the remote data. The resulting statistics are rendered as large text via an SVG-compatible React component, with the message formatted by the `message` utility function.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the D3.js library. It fetches a dataset of CSS named colors from a GitHub gist and uses the `d3.csv` method to parse the file. The visualization then displays summary statistics about the dataset, including its approximate size in kilobytes, the number of rows, and the number of columns. The results are presented as a large text message in an HTML `<pre>` element, with a commented-out alternative showing the same process using the `fetch` API and `d3.csvParse`.

Loading thumbnail…

Mouse Follower

A circle in an SVG canvas tracks the mouse cursor across the full browser window. The visualization uses React’s `useState` and `useCallback` to update the circle’s center coordinates on every `onMouseMove` event. The D3.js library is imported for its `arc` function, though the rendering itself relies solely on React and SVG elements. The `clientX` and `clientY` properties from the mouse event directly set the circle’s position.