Skip to main content
Log in
J

Jingxuan Yang

@RenoBlitz·23 public vizzes

Loading thumbnail…

FP: Scatter Plot

FP: Scatter Plot is an interactive scatter plot of house sale data, rendered as an animated SVG visualization. Users can independently select which variable (price, bedrooms, bathrooms, or living area) is mapped to the x- and y-axes using two dropdown menus. The chart uses D3’s data join with a staggered 1-second transition to animate circles to their new positions when the axis mapping changes, and circles grow into view when first rendered. Both axes animate smoothly alongside the data, providing immediate visual feedback as the user changes the plot’s dimensions.

Apr 17, 2024
Loading thumbnail…

FP: Parallel Coordinates

This interactive parallel coordinates plot visualizes a dataset of housing records, encoding five attributes—price, bedrooms, living area, land area, and region—as parallel axes. Each item is represented by a polyline whose color encodes species via an ordinal scale, and strokes use screen blending for visual density. The visualization supports interactive brushing on any axis to filter the data, with smooth opacity transitions animating the marks in and out of the filtered subset.

Apr 17, 2024
Loading thumbnail…

FP: Bar Chart

This bar chart visualizes house sale prices across different regions, with each bar colored by region using an ordinal color scale. The interactive color legend allows users to hover over a region to highlight matching bars and fade the rest, implemented with D3.js enter/update/exit selections and hover state management. The chart is built from house sales data (houseRocket.csv) and uses a clean, minimal design with bars representing price values. Hovering over the legend highlights corresponding bars in the chart while dimming others, and hovering over bars emphasizes their legend entry. The visualization uses a sans-serif font, square color swatches, and a pointer cursor for interactive elements, with smooth opacity transitions for the hover effects.

Mar 27, 2024
Loading thumbnail…

Data of Final Project Proposal

This visualization shows a scatter plot of residential property data from the House_Rocket dataset, displaying the relationship between living area and price. Each point represents a house, with data loaded from a CSV file containing 30 property records. The plot encodes the price on the y-axis and living area on the x-axis, with points colored by season of sale (Spring, Summer, Fall, Winter). The author, RenoBlitz, uses this chart to explore potential patterns between home size and price across different selling seasons. The dataset includes additional attributes such as number of bedrooms, bathrooms, and location coordinates, but the visualization focuses primarily on the price-versus-living-area relationship. The chart is generated under the MIT license and is part of a House_Rocket data analysis project.

Mar 20, 2024
Loading thumbnail…

Fork of Bar Chart with Basic Hover

A horizontal bar chart displays the top 10 house IDs by living area in square feet, sourced from the dataset01 module. The visualization uses d3.scaleBand and d3.scaleLinear to map categories and values, with axes rendered via the responsive-axes library. Hovering over a bar triggers a mouseenter event that appends a text label showing the exact data value and dims the bar, while mouseleave removes the label and restores opacity, using D3’s selection and state management for interaction.

Feb 28, 2024
Loading thumbnail…

Fork of World Map Simple

This example visualizes the contiguous United States with a geographical projection, showing both country outlines and a graticule grid. It uses the `geoAlbersUsa` projection and `geoPath` from d3-geo to render the shapes, while topojson-client converts the TopoJSON data from the us-atlas package into GeoJSON features. The visualization loads state data asynchronously, displaying the map once the fetch completes, and redraws it whenever new data arrives. The code highlights a simple pattern for integrating D3 with React through a state-driven update cycle.

Feb 28, 2024
Loading thumbnail…

Fork of World Cities

This example visualizes the distribution of U.S. cities and their populations as small dots overlaid on a map of the United States, with state boundaries outlined in white. It first renders the country outline and graticule, then projects each city’s longitude and latitude using `d3.geoAlbersUsa` and draws them as circles. The visualization fetches TopoJSON state boundaries from `us-atlas` and CSV city data from a GitHub-hosted dataset, parsing populations with D3’s `csvParse`. A subtle graticule grid and black outline frame the map, while city dot radius remains fixed at 0.2 pixels.

Feb 28, 2024
Loading thumbnail…

Bar Chart with Basic Hover

The chart displays the top 10 houses by living area in square feet, sorted descending using D3's `descending` comparator. When a user hovers over a bar, it turns black while others gray, implemented via D3's `on('mouseenter')` and `on('mouseleave')` events that update the state. Using `observeResize` for responsive dimensions and `scaleBand`/`scaleLinear` from D3, the data comes from the `@RenoBlitz/dataset01` source with `sqft_living` as the plotted column.

Feb 21, 2024
Loading thumbnail…

Simple Bar Chart with Hover

This example displays the top 10 houses by living area in square feet, using a simple bar chart. Each bar represents a house ID, with height encoding its living area. The visualization is built with D3, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisLeft` for the axis ticks. It includes labeled axes and an inner rectangle fill, with bars rendered as SVG rectangles. The data is sourced from the `@RenoBlitz/dataset01` package, sorted in descending order via `d3.descending`.

Feb 21, 2024
Loading thumbnail…

Add Interaction OR Iterate Your Work

This interactive scatterplot shows the relationship between number of bedrooms and living area (sqft) for homes in a dataset. Hovering over the plot draws crosshair lines from the cursor to the chart’s margins, while the current mouse coordinates are tracked in state. The visualization uses D3’s `pointer` event handling and `ResizeObserver` to adapt to container size, with axes rendered via `axisBottom` and `axisLeft` from D3. The code structure emphasizes modular, iterable components for axes, labels, and rendering.

Feb 13, 2024
Loading thumbnail…

Add Interaction OR Iterate Your Work

This example shows a scatter plot of King County house prices from the kc_house_data CSV, plotting living area in square feet against the number of bedrooms. Hovering over the plot draws crosshair lines that track the mouse position, with the chart updating via a state-based pattern in D3 v7. The visualization uses `scaleLinear` axes from the `@RenoBlitz/responsive-axes` library, along with `selectAll` and `data` joins for rendering circles and lines. The entry point imports `select` from D3 and custom modules, while `observeResize` handles responsive dimensions. The dataset is imported from `@RenoBlitz/dataset01`.

Feb 13, 2024
Loading thumbnail…

Hovers

A hoverable scatterplot maps bedroom count to living area square footage, with each point rendered as a semi-transparent circle against a light gray plot background. As the pointer moves over the chart, the code updates the state with the current cursor coordinates and draws two black crosshair lines extending from the hover point to the axes. The visualization uses D3 7.8.5 with a ResizeObserver to adapt the SVG to the container dimensions, and it applies linear scales for positioning.

Feb 13, 2024
Loading thumbnail…

Responsive Axes

This example demonstrates how to build a responsive scatter plot visualization with labeled axes using D3.js. It renders a gray inner rectangle with linear scales for the x and y axes, both of which dynamically adjust their tick count based on the chart's dimensions. The code uses a ResizeObserver to monitor the container size and automatically update the SVG’s width and height on resize. Axes are drawn with `axisBottom` and `axisLeft`, while labels are added as rotated text elements, showcasing a modular structure split into separate axis and label modules.

Feb 13, 2024
Loading thumbnail…

Add Interaction OR Iterate Your Work

This scatter plot visualizes the relationship between the number of bedrooms and living area square footage in the kc_house_data dataset. The visualization uses d3.scaleLinear for both axes and d3.extent to compute the y-domain from the data. Interactive elements track the mouse position using d3.pointer, drawing hover lines across the plot to highlight coordinates. The code imports shared visualization utilities from @curran for axis rendering and resize observation, while circles are rendered with fixed radius and opacity.

Feb 13, 2024
Loading thumbnail…

Fork of Simple Bar Chart

This visualization displays a bar chart of the top 10 houses by living area (sqft) from a dataset, with house IDs on the x-axis and square footage on the y-axis. The main entry point (`index.js`) sorts the data in descending order, slices the first 10 entries, and passes them to a reusable `viz` function. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and axis labels from the `@curran/axis-labels` library, with bars rendered as `rect` elements.

Feb 13, 2024
Loading thumbnail…

Make a Viz Responsive

This example demonstrates a responsive D3.js scatter plot that maps house sale data from the kc_house_data dataset, showing the relationship between the number of bedrooms and living area in square feet. The visualization uses D3's `scaleLinear` and `extent` functions to scale the axes and renders data points as circles with configurable radius and opacity. It leverages the custom `@RenoBlitz/responsive-axes` library and `observeResize` function to dynamically adjust the plot’s dimensions and axis labels based on the container’s size. The axes, labels, and inner rectangle background are all redrawn automatically when the viewport resizes, ensuring the chart remains legible at any screen width.

Feb 13, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

This fork of a simple scatter plot visualizes housing data from the kc_house_data dataset, plotting bedrooms against living area in square feet. Each circle represents a house, with opacity and radius set to fixed values. Using D3’s `scaleLinear`, `axisLeft`, and selection methods, the visualization renders axes, labels, and points within a gray inner rectangle. The code imports data from a custom module and leverages helper functions like `xAxis` and `yAxisLabel` from the axis-labels library to assemble the chart.

Feb 13, 2024
Loading thumbnail…

Fork of Axis Labels

This fork demonstrates how to add labeled axes to a scatterplot-style visualization using D3 v7. It renders a gray inner rectangle as the plotting area, with a linear x-axis and y-axis scaled from 0 to 100, and places the labels “X Axis Label” and “Y Axis Label” at configurable offsets. The code uses `scaleLinear`, `axisBottom`, and `axisLeft` to create the axes, while custom functions `xAxisLabel` and `yAxisLabel` position the text elements with SVG transforms.

Feb 6, 2024
Loading thumbnail…

3 datasets 03

The visualization explores Boston housing data by comparing living environments preferred by different age groups and examining the relationship between business climate and crime rates. The example displays the first parsed data entry as JSON, showing all 14 quantitative attributes including crime rate (CRIM), property tax (TAX), and median value (MV). It uses the Fetch API to load a CSV file, parses each column into numbers, and renders the result in a styled preformatted block. The data comes from the Boston housing dataset.

Jan 24, 2024
Loading thumbnail…

3 datasets 02

This visualization displays house price data from the House Prices dataset, showing the first record in a JSON-formatted pre tag. It answers a question about distinguishing houses by state and city by parsing quantitative attributes into numbers. The code imports data from CSV using a native import statement, converts all numeric fields with the unary plus operator, and exports both the main container function and the parsed data. The main function uses template literals to render a single data object as readable JSON text with a 30-pixel font size.

Jan 24, 2024
Loading thumbnail…

3 datasets 01

This visualization uses Observable Plot to show the first row of the kc_house_data CSV, parsed into numeric types. It displays the raw JSON structure of the dataset, revealing the meaning of columns like `waterfront` (a boolean indicating whether a house is on a waterfront) and `view` (a rating from 0 to 4 representing quality of view). The example loads data from a CSV file and renders it as formatted text, illustrating how the dataset is structured. It does not depict any relationships or characteristics of expensive houses beyond the initial data inspection.

Jan 24, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with relative sizes to scale, while distances are compressed for visual clarity. Each planet is rendered as a circle with SVG gradient fills—including linear and radial gradients—to give them a more dimensional, planet-like appearance against a black background. The data comes from Wikipedia’s list of gravitationally rounded objects. The code uses D3’s `select`, `transition`, and `easeLinear` to animate the planetary motion, with the Sun and its orbiting bodies depicted as static or moving graphical elements.

Jan 23, 2024
Loading thumbnail…

Fork of Circles with D3

This example draws two rotated rectangles and a triangle on a light blue background using D3.js, forming a simple fork-like geometric composition centered on the display. The code imports the `select` function from D3 and binds an array of rectangle and polygon data objects to SVG `rect` and `polygon` elements, setting their positions and fill color via `.attr()`. A fixed rotation transform is applied to both shape groups relative to the canvas center. The shape data is defined manually within the script, and the visualization adapts to the container’s width and height.

Jan 15, 2024