W

wzhang88

@wzhang88·21 public vizzes

Loading thumbnail…

pokemon summary

The visualization shows a dropdown interface for exploring Pokémon battle statistics, allowing users to select a Pokémon attribute from options like attack, defense, and speed. It uses React hooks (useState, useEffect) to manage the selected value, while D3 (d3.csv) fetches the dataset from a remote GitHub CSV file. The react-select library renders the styled dropdown menu, providing an interactive way to filter and display Pokémon data based on user input. The code also incorporates d3 v7 and ReactDOM for rendering the component tree.

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot displays Pokémon statistics from the UCI Machine Learning Repository Auto MPG dataset, though the code actually loads Pokémon stats. Users select which attributes to compare using dropdown menus for both the X and Y axes, with options including attack, defense, speed, and other stats. The visualization uses d3.v5 with SVG rendering and transitions that animate circles from the center to their computed positions over two seconds. Generic dropdown menu and scatter plot modules handle the UI and rendering, with axes labeled and circles colored red with partial opacity.

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Pokemon stats dataset, displaying two selectable attributes on the x and y axes. Users can choose any combination of statistical columns via dropdown menus, with the visualization automatically updating through D3’s join pattern and smooth 1000ms transitions. The chart distinguishes between continuous and categorical data, using `scaleLinear` for numeric values and `scalePoint` for categorical ones. D3 v6 powers the axis rendering, while circle elements feature hover effects that add a stroke highlight.

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Loading thumbnail…

Fork of Vega-Lite API Template

An interactive scatter plot visualizes the relationship between the weight and height of Pokémon, with each point colored by type and rendered as an SVG circle. The visualization uses the D3.js v4 library’s `scaleLinear`, `axisBottom`, `axisLeft`, and `brushX` APIs to support panning and zooming via brush selection, with transitions animating axis and circle updates. Data is loaded from a CSV file hosted on GitHub, styled with a custom configuration for clearer labels, and built within a React framework.

Loading thumbnail…

making bar chart with react ad d3

This example shows a horizontal bar chart of UN population data for 2000, loading the top 10 countries from a CSV file. The chart uses React state management to fetch and store the data, then renders SVG rectangles positioned with `d3.scaleBand` and sized with `d3.scaleLinear`. The `d3.csv` function parses the remote dataset, and React's `useEffect` and `useState` hooks handle asynchronous loading and display a loading message before the chart appears.

Loading thumbnail…

zoom comparson

This visualization displays a scatter plot of Nike manufacturing factories, with each circle representing a factory, colored by product type, and positioned by total workers versus line workers. Users can brush-select a horizontal region on the plot to zoom the x-axis domain, with a double-click resetting the view. The chart uses d3.brush for interactive selection, d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors, all rendered as SVG with animated transitions on the x-axis and circle positions. Data comes from a CSV file of Nike’s global manufacturing statistics.

Loading thumbnail…

explor vegalite

This visualization explores the Auto MPG dataset from the UCI Machine Learning Repository. It renders a scatter plot with circles encoding miles per gallon on the x-axis, horsepower on the y-axis, origin as color, and vehicle weight as point size, with tooltips showing model names. Built using the vega-lite-api, it registers Vega and Vega-Lite to generate an SVG view with a custom dark-themed configuration. The code loads CSV data via `d3.csv` and renders the chart at full window size with a tooltip handler.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for three species of iris flowers. Users can hover over a species in the color legend to highlight only those corresponding data points while fading the others. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles rendered via React components. The legend interactions manage hover state to dynamically adjust opacity, providing a clear comparison between species.

Loading thumbnail…

Pokemon Radar with select

This example visualizes Pokémon base statistics—HP, Attack, Defense, Special Attack, Special Defense, and Speed—using a radar chart built with Chart.js. It fetches data from the PokéAPI for a single Pokémon, showing its stat profile. The page also includes a scatter plot of all first 251 Pokémon’s height and weight, rendered on a Canvas. The code uses the `fetch` API to retrieve JSON data and Chart.js’s `Chart` and `Chart.Scatter` constructors to draw both visualizations.

Loading thumbnail…

select and radar

This example shows a dropdown menu listing Pokémon names from the PokéAPI, which users can select to see their choice displayed. The React app fetches data from `https://pokeapi.co/api/v2/pokemon?limit=200` using `d3.json`, then passes the names to a `ReactDropdown` component. The selected value updates component state via `useState`, while the charting capabilities of Chart.js are loaded but not actively used in the displayed visualization.

Loading thumbnail…

dropdown

This example displays a dropdown menu populated with Pokémon names fetched from the PokéAPI, with the selection state tracked and logged. The app loads 649 results via `d3.json` and maps them into options for the `ReactDropdown` component from `react-dropdown-browser`. Once a user picks a name, the selected value is stored in React state and printed to the console. The interface uses SVG rendering and React's `useState` and `useEffect` hooks to manage asynchronous data loading and UI updates.

Loading thumbnail…

pokemon test

This example shows a dropdown menu listing the names of the first 649 Pokémon, fetched from the PokeAPI. It displays the data as selectable options within a simple interface. The code uses React hooks such as `useState` and `useEffect` to load the JSON data via `d3.json`, and then renders the selection list using a React `<select>` element generated by a custom `SelectionButton` component. The visualization is minimal, focusing solely on data retrieval and list presentation.

Loading thumbnail…

axis -making bar chart with react ad d3

This example shows a horizontal bar chart of population data for the ten most populous countries in the year 2000, loaded from a CSV file hosted on GitHub. The visualization uses React hooks, specifically `useState` and `useEffect`, to fetch and store the data, while rendering SVG elements for the bars. D3 v5’s `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates, and custom tick marks for both axes are generated by iterating over `xScale.ticks()` and `yScale.domain()` rather than using d3.axis.

Loading thumbnail…

margin making bar chart with react ad d3

The example shows a horizontal bar chart displaying the top 10 countries by population in the year 2000, using a clean margin-based layout. It loads CSV data from a GitHub gist via `d3.csv`. The chart uses React hooks (`useState`, `useEffect`) for state management and D3 v5's `scaleBand` and `scaleLinear` to map countries to y-positions and population values to bar widths, rendered as SVG `<rect>` elements within a translated `<g>` container.

Loading thumbnail…

d3arc to draw

This example displays a pie chart of CSS named colors, using data loaded from a CSV file hosted on GitHub. Built with React and D3 v5, the visualization maps each color name to a slice of the pie, filling each path with its corresponding RGB hex value. The code uses D3's `arc` and `pie` functions to generate the chart geometry.

Loading thumbnail…

rendering data with react and d3, and draw?

This example demonstrates how React and D3 can work together to render a dataset as a simple visual bar chart. It loads a CSV file of CSS named colors and their corresponding RGB hex values from a GitHub gist, then displays each color as a horizontal bar whose background color matches the data. The visualization uses React’s `useState` and `useEffect` hooks to fetch and manage the data, while the `d3.csv` method handles the parsing. All elements are rendered as plain HTML `div` components rather than SVG, showing a straightforward React-only approach to data visualization.

Loading thumbnail…

Load data d3

A React app loads a CSV file from a remote URL using `d3.csv` inside a `useEffect` hook, then displays a text summary of the loaded data. The summary reports the data size in kilobytes, the number of rows, and the number of columns, formatted via `d3.csvFormat`. Before the data arrives, the interface shows a "loading" message. The example demonstrates asynchronous data fetching and state management with React hooks, with the rendered output as plain text in a `<pre>` element.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight, horsepower, and fuel efficiency in a scatter plot, using a dataset of automobile specifications. The plot encodes weight on both the x-axis and color scale, while horsepower appears on the y-axis and miles per gallon determines point size. Built with the Vega-Lite API wrapped in D3.js, it renders as an SVG and includes interactive tooltips showing each car’s name. The code demonstrates programmatic chart construction through `vl.markCircle` and encoding methods, with a custom configuration adjusting axis styling and label fonts.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v5, fetching a remote dataset of CSS named colors. The visualization displays summary statistics about the dataset, including its size in kilobytes, row count, and number of columns, rendered as large text. The code specifically uses `d3.csv` with a Promise-based `.then()` method to fetch and parse the data, alongside `d3.csvFormat` and `d3.csvParse` for formatting and parsing operations. It also includes commented-out alternatives using the Fetch API with `async`/`await` and a nested callback approach.

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor on an SVG canvas, with a yellow circle acting as the face and a smaller circle representing its mouth. Built with React and ReactDOM, the component tracks the cursor’s position via the `onMouseMove` event and updates state with the `useState` and `useCallback` hooks, re-rendering the SVG circle’s `cx` and `cy` coordinates accordingly.