Danier

酷炫tab 文字设计

This example uses React and SVG to create an interactive radial tab menu with five labeled segments. The tabs are arranged around a central circle, with each polygon wedge containing text positioned along a curved path using SVG `<textPath>` elements. Hovering or clicking a tab highlights it by changing its fill color and text color. The layout is computed with JavaScript math functions based on the D3 v7 library, though the rendering relies solely on React components and SVG elements.

Jan 13, 2022

Fork of react 视频

This example demonstrates a React-based video player streaming a live HLS (HTTP Live Streaming) feed from a public m3u8 playlist URL. It shows how to integrate the Video.js library into a React functional component using hooks, specifically initializing the player once via `useEffect` and handling its lifecycle disposal. The code relies on React 16.9, the Video.js 7.6.6 API, and the `video-react`-style wrapper pattern, configuring the player with options like height, controls, and the HLS source type.

Nov 3, 2021

react 视频

This example shows a React application that embeds a Video.js player to stream an MP4 video from a remote URL. The app wraps the player in a reusable functional component, initializing it once via `videojs` and passing options like autoplay, controls, and fluid layout. React hooks manage the player instance and cleanup on unmount, while event handlers log waiting and dispose actions. The code demonstrates integrating a third-party video library with React’s lifecycle and state management, using `React.useRef` and `React.useEffect`. The video source is a direct file link, and the layout is responsive through Video.js’s built-in fluid option.

Oct 29, 2021

酷炫tab页

This example shows a circular tab menu with five wedge-shaped sections arranged around a central pivot. Hovering over a wedge highlights it in red and turns its label white, while clicking logs the tab name to the console. The visualization uses React hooks (useState) to manage hover state and renders SVG polygons and text paths for the menu items. Text labels follow curved paths computed with trigonometry, and all geometry is defined with plain JavaScript math rather than D3 scales or layouts.

Oct 27, 2021

Hello HTML

A grid of 18 smiling faces, each with a yellow circular background, black eyes, and a curved mouth, demonstrates how React components can be reused with randomized props. The visualization uses React 16.9.0 to render SVG elements, with d3.v5’s `arc()` generator creating each mouth path and the `range()` function producing the grid layout. Each face’s eye position, radius, and mouth dimensions vary randomly, while the centered translation via `FaceContainer` positions every face identically within its own SVG canvas.

Oct 27, 2021

Missing Migrants Date Histogram

This bar chart visualizes the monthly total of dead and missing migrants from the Missing Migrants Dataset. It uses React to render SVG elements, with D3 v5 functions `scaleTime`, `scaleLinear`, `bin`, and `sum` to aggregate and scale the data. The chart displays a histogram where bars represent monthly sums, with axes and labels styled via CSS.

Sep 28, 2021

Missing Migrants Scatter Plot

A scatter plot visualizes reported migrant deaths and disappearances over time, with each circle representing a single event from the Missing Migrants Dataset. The x-axis maps dates using a time scale, while the y-axis maps death tolls with a linear scale. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to construct SVG axes and marks, with tooltips showing precise dates via `<title>` elements.

Sep 28, 2021

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width and coloring each point by species. The visualization includes axes, tick marks, a species color legend with circular swatches, and hover tooltips displaying formatted x-values. Built with React and D3 v5, it uses `scaleLinear` for positional encoding, `scaleOrdinal` for categorical colors, and `csv` for data loading. The SVG rendering includes custom axis components and circular marks, with the legend positioned to the right of the plot area.

Sep 28, 2021

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, rendered using SVG. It uses React to manage the component structure while D3’s `geoNaturalEarth1` projection and `geoPath` draw the sphere, landmasses, and interior borders. The data comes from World Atlas TopoJSON, loaded via `useData` and processed with `topojson.feature` and `topojson.mesh`. A muted color palette highlights the land and sphere, with subtle strokes for graticules and interiors, producing a polished cartographic style.

Sep 26, 2021

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with each point colored by species. A color legend identifies the three species categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for coordinate mapping and d3.scaleOrdinal for species colors, rendering SVG circles via React components. Data is loaded asynchronously using d3.csv from a GitHub gist, with axes and labels generated through custom React components.

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width as colored circles, with each species distinguished by a distinct color from a `scaleOrdinal` range. The visualization is built with React and rendered as SVG, using D3’s `csv` loader and `scaleLinear` functions to process and scale the data. Axis components (`AxisBottom`, `AxisLeft`) render tick marks and labels, while the `Marks` component generates circles with native SVG `<title>` tooltips. The chart employs a clean, modern aesthetic with Poppins typography and muted axis colors.

Fork of scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numerical measurements and species. Two dropdown menus, built with react-dropdown, control which attributes appear on the x- and y-axes. The visualization uses React for UI state management and d3.scaleLinear for positioning, rendering SVG circles and axes via custom React components. Data loads asynchronously via d3.csv and is parsed into numeric values before plotting.

scatter plot with menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders points as SVG circles, with axes labeled according to the chosen attributes. D3’s `scaleLinear`, `extent`, and `csv` functions handle data loading and scaling, while React’s `useState` manages the selected dimensions. The plot’s axes are generated through custom React components, and hovering reveals exact values via SVG `<title>` tooltips.

Menus with React

This example demonstrates interactive dropdown menus built with React, showing a pet selection interface where users choose from options like goldfish, spider, and hamster. The React component `Dropdown` manages the menu, while `useState` tracks the selected value and updates it through an `onSelectedValueChange` callback. The code uses React 16.9.0 and ReactDOM to render the interface, with options defined in a static array in `index.js`. The example highlights how React handles form state and event-driven UI updates in a visualization context.

World Map

This world map visualization displays global landmasses and country boundaries using a natural Earth projection. The map renders land areas in teal, country interiors in a lighter stroke, and graticules as thin gray lines over a light sphere background. Built with React and d3-geo, the visualization uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `topojson.feature` and `topojson.mesh` for land polygons and country borders.

Fork of Working with time

This example visualizes the weekly temperature variation in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The React-based application loads CSV data from a GitHub gist (United Nations World Population Prospects 2019) using d3.csv in a custom useData hook. d3.scaleTime and d3.scaleLinear map the data to SVG coordinates, while d3.line with curveNatural draws the path. Custom AxisBottom and AxisLeft components render the ticks and labels, and the chart includes axis titles for both dimensions.

Working with time

This example visualizes temperature readings over a week in San Francisco, plotting each observation as a circle on a time-scaled x-axis and a linear temperature y-axis. React renders the SVG scene, while D3 v5’s `scaleTime`, `scaleLinear`, and `extent` handle scaling and domains; `timeFormat` labels days. The CSV data is loaded via `d3.csv`, and custom AxisBottom, AxisLeft, and Marks components generate ticks and circles with tooltips showing the day.

styling a Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The React-based visualization uses D3's `scaleLinear` and `extent` functions to map data to SVG coordinates, with custom React components for axes and circular marks. The styling applies a Poppins font, teal-colored circles, and light gray axis lines, with tooltips showing formatted values on hover.

Styling a Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart features horizontal bars ordered by country, with a clean, styled aesthetic using the Poppins font and a teal color scheme. Axes are customized with D3's `scaleLinear` and `scaleBand` for positioned ticks, and tooltips using SVG `<title>` elements. Built with React and D3 v5, the visualization highlights the power of reusable components for crafting polished, readable charts.

Refactoring a Bar Chart

This example shows a bar chart of the top 10 most populous countries, with population values from the United Nations World Population Prospects 2019 dataset. The visualization refactors a basic bar chart by adding axes using React components. It uses d3.v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements directly through React. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while the `Marks` component draws the bars.

Axes width react & d3

This example displays the top 10 most populous countries as a horizontal bar chart with axes, using React and D3 v5. It renders SVG elements to draw gridlines, tick labels for the linear population scale, and country names on the band scale. The data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. React manages the component state and lifecycle, while d3.scaleBand, d3.scaleLinear, and d3.max compute the chart geometry.

Sep 17, 2021

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as pie slices of equal size, using each color’s own hex value to fill its corresponding arc. The code loads color data from a CSV via `d3.csv`, computes slice angles with `d3.pie`, and draws the paths with `d3.arc`. React manages the component state and rendering, updating the SVG once the asynchronous data fetch completes.

Sep 15, 2021

Fork of Temperature in San Francisco Area Chart

This visualization presents a week of temperature data in San Francisco as an area chart, using a maroon filled path to emphasize the variation in degrees Celsius over time. It employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG. The data is loaded from a CSV via `d3.csv` and parsed into date and numeric values. The chart includes labeled axes and a title, with grid lines and a smooth curve connecting the temperature readings.

Sep 15, 2021

Fork of Vega-Lite API Template

This example displays a scatter plot of car models, with the country of origin on the x-axis and horsepower on the y-axis. Each point is rendered as a large, semi-transparent circle, and hovering reveals the car's name via a tooltip. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and is rendered as an SVG. Data originates from the UCI Auto MPG dataset, loaded via D3's CSV parser. The code customizes axis labels and tick colors through a configuration object and uses the Vega Tooltip handler for interactive details.

Sep 15, 2021

loading data with React & d3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches CSS named color data from a GitHub gist via `d3.csv`, then displays the file size (in KB), row count, and column count as text. The React component uses `useState` and `useEffect` to manage the asynchronous data loading, while the `message.js` module formats the statistics using `d3.csvFormat`. The interface presents a simple loading state before showing the computed metrics, with D3 v5 and React 16 providing the core functionality.

Sep 14, 2021

Loading Data and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js version 5.11.0. It fetches a CSS named colors dataset from a GitHub gist and displays the file size in kilobytes, the total number of rows, and the number of columns in a large text element. The code uses the `d3.csv()` method to retrieve and parse the data, then accesses the resulting array's `length` and `columns` properties to generate the summary message.

Sep 14, 2021

interaction with react

A React component renders an SVG circle that tracks the mouse position across the full viewport. The circle’s center coordinates update via React state, with the `onMouseMove` event handler feeding client coordinates into a `useState` hook. D3 v5 provides the `arc` import, though the visible geometry relies on plain SVG circle elements. The example demonstrates bidirectional integration of D3’s ecosystem with React’s declarative state management, using the `useCallback` hook to optimize event handling. No data source is involved; the visualization is purely interactive, responding to user input in real time.

Sep 14, 2021