Yiyi Wu

@wyy-47·16 public vizzes

Scatter Plot for Climate Data - v3

This interactive scatter plot visualizes the impact of climate on agriculture, plotting pesticide usage against fertilizer usage. Circle size encodes soil health, while color depth represents crop yield, using `d3.scaleSqrt` and `d3.scaleSequential` with `interpolateBlues`. Hovering reveals detailed metrics via a tooltip. Dropdown menus, built with `d3.select`, filter the displayed data by year and region, allowing exploration of the Climate Change Impact on Agriculture dataset.

Dec 6, 2024

Loading thumbnail…

Scatter Plot for Climate Data - v2

This interactive scatter plot visualizes climate change impacts on agriculture, showing pesticide use against fertilizer use for a selected year. Circle size encodes soil health index, while color depth represents crop yield, with hover tooltips revealing exact values. The visualization uses D3.js scales, including `scaleLinear`, `scaleSqrt`, and `scaleSequential`, alongside an SVG-based rendering with a dropdown for year selection. Data comes from a preloaded Climate Dataset, and each circle maps to a data point filtered by the selected year.

Dec 4, 2024

Loading thumbnail…

Scatter Plot for Climate Data - v1

This scatter plot visualizes climate impacts on agriculture for a selected year, showing pesticide usage on the x-axis and fertilizer usage on the y-axis. Circle radius encodes soil health index, while color depth represents crop yield, with a dropdown menu filtering data by year. The visualization uses D3 scales like `scaleLinear`, `scaleSqrt`, and `scaleSequential` with an `interpolateBlues` color scheme, plus interactive tooltips. Data comes from the Climate Change Impact on Agriculture dataset, rendered using D3’s `select`, `join`, and axis label utilities.

Nov 20, 2024

Loading thumbnail…

dataset 1 - Climate Change Impact on Agriculture

This example presents a dataset summary by displaying the first record from the Climate Change and Agriculture dataset as formatted JSON using the browser’s built-in `JSON.stringify` function. It loads the CSV data with the `data.csv` import and converts all numeric fields to numbers. The visualization is a static, text-based overview, showing raw data structure rather than graphical analysis, and uses no external charting libraries.

Nov 20, 2024

Loading thumbnail…

Scatter Plot for Climate Data

This scatter plot visualizes the relationship between year and average temperature for China using the Climate Dataset, with each circle representing a data point. A dropdown menu lets users select a specific year, although the current rendering only displays China’s full time series. The visualization uses D3’s `scaleLinear` and `axisLeft` to construct axes, while custom label helpers from `@wyy-47/axislabels` add axis titles. The `viz` function draws a gray inner rectangle and semi-transparent circles with `selectAll` and `join`, updating the SVG directly.

Nov 20, 2024

Loading thumbnail…

Climate World Map Cities - fixed tooltip

This interactive globe visualizes agricultural crop yields across key cities worldwide, using data from the Climate Change Impact on Agriculture dataset. Users can filter by crop type using the color legend and select a year via a dropdown menu. The visualization uses `d3.geoOrthographic` projection and `d3.geoPath` to render the globe, with city circles positioned by latitude and longitude. Tooltips display city details, and interactions include panning, zooming, and clicking legend items. The tooltip is implemented with custom `EventTarget` events to hide during map interactions.

Nov 20, 2024

Loading thumbnail…

Climate World Map Cities - Color Legend

This interactive globe visualizes agricultural crop yields across key cities worldwide, with color-coded circles representing crop types and size indicating yield per hectare. Users can pan and zoom the orthographic projection using d3.drag and d3.zoom, while a dropdown filters data by year. An interactive color legend toggles visibility of specific crops, and hovering reveals detailed tooltips with year, region, and yield data. The visualization uses d3.geoPath with GeoJSON country outlines from the world-atlas TopoJSON source, with data derived from the Climate Change Impact on Agriculture dataset, including ChatGPT-determined agricultural cities.

Nov 7, 2024

Loading thumbnail…

Climate World Map Cities

This interactive globe visualizes how climate change affects agricultural crop yields across global cities from 1990 to 2024. A dropdown menu filters the data by year, while drag-and-zoom controls enable panning and scaling of the orthographic projection. Circle radii encode crop yield values, with spiral offsets separating overlapping cities. Built with D3.js, it uses `d3.geoOrthographic`, `geoPath`, and `geoGraticule` to render the map, and `d3.drag` and `d3.zoom` for interaction. The data comes from a modified Kaggle dataset of climate change impacts on agriculture.

Nov 6, 2024

Loading thumbnail…

Pan and Zoom World Map Cities

This example presents an interactive orthographic world map displaying major cities as points. Users can pan by dragging and zoom with the mouse wheel, manipulating the map’s rotation and scale in real time. The visualization loads country boundaries from the visionscarto-world-atlas TopoJSON and city coordinates and populations from a reduced World Cities CSV. Built with D3’s `geoOrthographic`, `geoPath`, `drag`, and `zoom` APIs, the map renders graticules and updates city positions via the projection each frame.

Nov 6, 2024

Loading thumbnail…

Climate World Map Cities - fixing tooltip

An interactive 3D globe visualizes agricultural crop yields across cities worldwide, with each city represented by colored, size-scaled circles that spiral outward from their geographic coordinates. A dropdown menu filters the data by year, while tooltips display detailed information about the selected city, region, crop type, and yield. The visualization uses d3-geoOrthographic and d3-geoPath to render the globe and projection, with d3-zoom and d3-drag enabling panning and zooming. Data comes from the modified Climate Change and Agriculture dataset.

Oct 30, 2024

Loading thumbnail…

pseudo viz for climate & crop yield over time

This pseudo visualization displays trends in crop yield, temperature, and precipitation over time using three overlaid line series colored green, red, and blue. It uses D3’s `scaleLinear` for both axes, the `line` generator for each series, and `select` to manage the SVG container. Data comes from a static array of six annual records, with axis labels and a legend added via custom helper functions from the `@wyy-47/axislabels` package. The chart demonstrates how multiple quantitative variables can be compared on a shared time scale.

Sep 25, 2024

Loading thumbnail…

Axis Labels

This example demonstrates how to add descriptive labels to the X and Y axes of a D3 chart. The visualization displays a simple scatterplot area with a gray inner rectangle, using linear scales positioned within configurable margins. The code creates x-axis and y-axis labels using `text` elements, with the x-axis label centered horizontally and the y-axis label rotated 90 degrees. Built with the D3 library, it uses functions like `scaleLinear`, `axisBottom`, and `axisLeft`, and separates axis and label logic into modular files for clarity.

Sep 18, 2024

Loading thumbnail…

Dataviz 2 Solar System

An animated solar system visualization displays the Sun and planets with radial-gradient shading to create a more dimensional, planet-like appearance. Planetary positions are driven by astronomical distance ratios, with each body and its label animating into place through staggered transitions. The implementation uses D3 v7, employing `select`, `transition`, and `easeLinear` to coordinate circle radii, coordinates, and label opacity changes, while SVG `radialGradient` definitions supply the visual depth.

Sep 11, 2024

Loading thumbnail…

Dataset 3 - Auto-mpg

This example loads the Auto-mpg dataset from a CSV file and displays the first record as a JSON object in a preformatted block. The code uses the native `JSON.stringify` method and template literals to render the data, setting a large font size for readability. The dataset includes car specifications such as mpg, cylinders, horsepower, weight, and origin, sourced from the UCI Machine Learning Repository. The visualization provides a simple, raw preview of the data structure rather than an interactive chart.

Sep 11, 2024

Loading thumbnail…

dataset 2 - Sleep and Health Metrics

This example visualizes the first row of a synthetic sleep and health metrics dataset from Kaggle, displaying its raw JSON structure in a large monospaced font. The code loads the CSV data, converts string values to numbers for all nine numeric fields, and then renders the first record’s key-value pairs inside a preformatted HTML block. It uses the `data.csv` import and the `container.innerHTML` assignment to present the data as-is, offering a minimal, non-interactive preview of the dataset before deeper analysis.

Sep 11, 2024

Loading thumbnail…

Dataviz 1 Circles with D3

This example renders two layered SVG scenes on top of each other, each filling the container. The first scene draws seven semi-transparent circles with varying radii and positions, while the second places seven rectangles at matching coordinates, creating a mixed geometric composition. Both layers use a pastel green background and encode data through position, size, and color. The visualization is built with D3 v7, using `select`, `selectAll`, `data`, and `join` to bind static arrays of circle and rectangle objects to SVG elements. It demonstrates a simple declarative approach to generative art without interactivity or animation.

Sep 9, 2024