Y

yingzhe-z

@yingzhe-z·24 public vizzes

Loading thumbnail…

Fork of Rose Wind Plot

This example presents a radial bar chart, or "rose plot," that visualizes global sales data for various gaming platforms. The chart uses a circular layout with bars extending outward from a central point, with each bar representing a different platform. The visualization is built using D3.js version 6, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.arc` to construct the wedges, alongside a custom `scaleRadial` function for the radial axis. Data is loaded from a CSV file, and the resulting SVG includes circular gridlines and labels positioned around the perimeter. The plot's angle and radius scales are computed using D3's linear scale, with `d3.stack` handling the data series.

Loading thumbnail…

Fork of Pie chart RDW

This pie chart displays the distribution of four age groups—0-20, 20-40, 40-60, and 60+—with equal counts of 6, 6, 9, and 9 respectively. Using D3.js v6, the visualization builds an SVG with `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes and label positions. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) fills each slice, and text labels are placed via `label.centroid()`. The chart is centered through an SVG transform and styled with CSS.

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

A React and D3 pie chart renders four slices with a color scale interpolated from #eaaf79 to #bc3358 using d3.interpolateRgb. The chart uses d3.pie() and d3.arc() to compute and draw each SVG path, with inner and outer radii defining a donut shape. A secondary component defines a checkered color ramp from #0F8C79 to #f2f2f2, though it is commented out. Unused legend data for five named categories is declared but not rendered.

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

This example presents a React and D3-based pie chart with four slices, rendered as SVG paths. The pie segments are colored using a color gradient interpolation between warm tones, applied proportionally across the slices. The chart positions a donut-like ring with an inner radius of 180 and an outer radius of 250, centered within a 960 by 500 pixel viewport. The implementation combines React components with d3’s `pie` and `arc` functions to compute the slice geometry, alongside `d3.interpolateRgb` for color transitions. A separate, commented-out `Check` component demonstrates an alternative color interpolation approach.

Loading thumbnail…

google books pir chart

A donut chart displays the relative proportions of four numeric values, each rendered as a colored arc segment around a hollow center. The chart uses a gradient interpolated between two colors to distinguish the slices. Built with React and rendered as SVG, the visualization relies on d3.v6's pie generator and arc path constructor to compute the segment geometry, while d3.interpolateRgb assigns the fill colors. The data itself is a fixed array, not loaded from an external file.

Loading thumbnail…

page count of goole books

This visualization displays page counts for a selection of Google Books titles as a horizontal bar chart, using a blue gradient fill for each bar. The chart is built with D3 v6 in an SVG framework, reading data from a local CSV file and using `scaleLinear`, `scaleBand`, and the `axisLeft` and `axisBottom` components to position bars and ticks. Additional text labels for axes are styled with a gradient, and the Y-axis domain and tick lines are removed for a cleaner presentation.

Loading thumbnail…

Fork of Exploring survey data interactively - both axes

This interactive scatterplot lets viewers explore survey data by changing both the x- and y-axis variables through dropdown menus. The visualization uses the D3.js general update pattern to dynamically re-nest data, update scales, and redraw SVG rectangles with enter, update, and exit selections. The x-axis groups respondents by categorical preferences or gender, while the y-axis displays averages for numeric variables like height, stress, or expenses. Data loads as JSON via `d3.json`, with axes rendered using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Fork of Rose Wind Plot

This visualization displays the ratings and voter counts for the top 15 ranked items, presented as a radial stacked bar chart resembling a rose plot. The chart uses polar coordinates, with each segment representing an item and its arc length encoding the rating while the radial extent shows voter counts. Built with D3 v6 and SVG, it employs `d3.arc`, `d3.scaleBand`, `d3.stack`, and a custom `d3.scaleRadial` extension to generate the circular layout. Data originates from a CSV file, and axis labels and grid circles are rendered using D3’s axis and tick generators.

Loading thumbnail…

Fork of Rose Wind Plot

This example visualizes wind speed and direction as a radial stacked bar chart, or wind rose, with each of the 16 compass directions represented by an angular segment. The colored bars show the proportional distribution of wind speeds across eight magnitude bins, while circular gridlines and axis ticks indicate the scale. The visualization is built with D3 v6, using `d3.stack` to structure the data, `d3.arc` to generate the SVG paths, and a custom `scaleRadial` implementation from d3-scale-radial.js for the radial axis. Data is loaded from a CSV file specifying wind frequency per direction and speed class.

Loading thumbnail…

Fork of Fork of data visulization

This example shows a horizontal bar chart of country populations, using bar length to encode population values and vertical position to encode country names. The visualization renders as SVG with steel-blue bars and axes, drawing from a CSV file that is loaded asynchronously and preprocessed by multiplying population values by 1,000. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` within a React context, though the primary rendering is handled directly with D3 selections and SVG elements.

Loading thumbnail…

Fork of data visulization

This bar chart displays population data for six countries, sourced from a local CSV file, with each bar’s length proportional to the population value (scaled by 1,000). Using D3 v6, the code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisLeft`/`d3.axisBottom` to render axes. The SVG is appended and styled via CSS, with margins applied to position the chart within a 960×500 viewport.

Loading thumbnail…

Fork of Stylized bar chart

This fork of a stylized bar chart displays the top 10 countries by 2020 population using a horizontal bar layout. Population values are formatted with the `d3.format` function, abbreviating billions as “B,” and each bar includes a native SVG `<title>` tooltip showing the precise value. The chart is built with React and D3 v6, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data loads asynchronously from a CSV file via the `useData` hook, and the visualization renders entirely as SVG with custom axis components and Poppins typography.

Loading thumbnail…

Fork of Rose Wind Plot

This example visualizes wind speed and direction as a radial stacked bar chart, or wind rose, with each of the 16 compass directions represented by an angular segment. The colored bars show the proportional distribution of wind speeds across eight magnitude bins, while circular gridlines and axis ticks indicate the scale. The visualization is built with D3 v6, using `d3.stack` to structure the data, `d3.arc` to generate the SVG paths, and a custom `scaleRadial` implementation from d3-scale-radial.js for the radial axis. Data is loaded from a CSV file specifying wind frequency per direction and speed class.

Loading thumbnail…

Fork of Rose Wind Plot

A radial bar chart, or rose plot, displays categorical data as concentric, colored arcs. The length of each arc segment encodes the magnitude of the values for two series—View Counts and Bullet Counts—across categories like Carton, Life, and Game. Rendered as SVG, the visualization uses a custom `d3-scale-radial` scale to map magnitudes to radii, with the `d3.arc` function drawing each segment. The chart’s axes and circular grid lines are generated using `d3.scaleLinear` and `d3.scaleBand`, with labels and a legend for each series.

Loading thumbnail…

Fork of Monoliths Delaunay Triangulation

A global orthographic projection maps the locations of reported monoliths as black site points, connected by a network of white Delaunay triangulation links and overlaid on gray country outlines. The visualization uses `d3.geoOrthographic`, `d3.geoVoronoi`, `d3.geoPath`, and `d3.hexbin` to compute and render the triangulation, while `d3.drag` and `d3.zoom` enable interactive rotation and scaling. Data comes from a local `monoliths.csv` file.

Loading thumbnail…

Fork of Let's make a face with D3.js

A friendly face built from SVG shapes—yellow circle head, black eyes, eyebrows, and an arc mouth—is centered in a 960×500 viewport. Using D3 v6, the visualization animates the eyebrows downward and back upward over two seconds via chained `transition()` calls on a `<g>` group. The code constructs shapes with primitive SVG elements and a D3 arc generator for the mouth, demonstrating basic selection, attribute binding, and transform animation without external data.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization presents the top 10 most populous countries as horizontal bars without any axes, making the chart intentionally minimal. The bars are drawn using SVG rectangles whose lengths correspond to each country's 2020 population from the United Nations World Population Prospects 2019 dataset. The code uses React for state management and rendering, alongside D3 v5 functions like `scaleBand` for y-axis positioning and `scaleLinear` for width scaling, loading data via `d3.csv`.

Loading thumbnail…

Making a Bar Chark

This example shows a horizontal bar chart of country populations using D3.js v5. The SVG canvas displays bars whose lengths correspond to each nation’s population value from a CSV file, with country names listed along the vertical axis. The code uses `d3.csv`, `d3.scalelinear`, `d3.scaleBand`, and `d3.max` to map data to coordinates, appending `rect` elements to the SVG. Populations are parsed as numbers before rendering, and the chart loads asynchronously via the `csv` function.

Loading thumbnail…

Making a Bar Chark

This example shows a simple bar chart of country populations using a dataset loaded from a CSV file. It renders rectangles to an SVG canvas, scaling the width and height attributes with d3.scaleLinear, though the scale domain and value bindings are only partially defined in the provided code. The visualization uses D3 v5, selecting the SVG element and appending rect elements to it, with data fetched asynchronously via d3.csv. The chart demonstrates the basic structure of a bar chart but does not yet include axes, labels, or fully computed bar dimensions.

Loading thumbnail…

Fork of Smiley Face Part III

This interactive visualization presents a smiling face as an SVG graphic assembled with React's JavaScript API. The code uses D3's `arc` generator to create the mouth path, while static elements like the yellow head, black outline, and eyes are defined as React SVG components. Eyebrows are constructed as SVG `rect` elements, with one eyebrow featuring a D3 transition animation. The graphic is rendered using ReactDOM into an HTML root element.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. The code uses static SVG elements rendered directly in the browser, with explicit pixel coordinates and radius values for each circle. No JavaScript or external libraries are used—the face is defined entirely in markup within the `index.html` file, and the page displays it without any interactive or animated behavior.

Loading thumbnail…

Fork of Let's make a face with D3.js!

Built with D3 v5, this example builds a smiling face from SVG primitives, including a yellow circle head, eyes, a mouth drawn with the `arc` generator, and rectangular eyebrows. The `transition` API animates the eyebrows' vertical position over four seconds, moving them up and then back down. All elements are positioned relative to a centered `g` container using hand-coded offsets.

Loading thumbnail…

LEt's make a face with D3.js!

A yellow smiley face built with SVG shows animated eyebrows that shift upward and downward over two-second intervals. The example demonstrates fundamental D3.js DOM manipulation using `d3.select` and `d3.append` to construct circles, rectangles, and a path generated with the `arc` helper. A `transition` with a specified duration animates the eyebrow group's transform attribute. The code sets the background to red via inline style and uses D3 v5 with native browser SVG elements.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, listing each vehicle’s year, make, model, and price. It imports car data from a local ES6 module, parses it with `JSON.parse`, and filters the array before formatting each entry with a custom `formatCar` function. The final message is rendered into a `pre` element using `document.getElementById` and `textContent`. It demonstrates modular JavaScript imports and template literal string construction.