Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
NNita
Last edited May 1, 2025
Created on May 1, 2025

A grouped bar chart compares housing market metrics between March 2024 and March 2025, showing absolute values for six categories alongside color-coded percentage changes. The d3.scaleBand and d3.scaleLinear APIs position bars and axes, while value labels format prices with dollar signs and mortgage rates with percent symbols. A legend distinguishes the two years, and positive or negative trends appear as green or red arrows using SVG text elements. The chart includes title, subtitle, and source attribution within the SVG canvas.

AI-generated description

Housing Market Metrics Year-over-Year Comparison

This visualization shows housing market data comparing March 2024 vs March 2025, showing both absolute values and percent changes.

The visualization includes:

  • Grouped bar chart for easy comparison between years
  • Percentage change indicators showing year-over-year trends
  • Properly formatted values ($ for prices, % for rates)
  • Color-coded increases (green) and decreases (red) for change indicators

The data includes key housing market metrics:

  • Housing Inventory
  • New Listings
  • Closed Sales
  • Pending Sales
  • Average Mortgage Rate (30-yr fixed)
  • Median Home Price
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example visualizes a year-over-year comparison of six housing market metrics between March 2024 and March 2025, including housing inventory, new listings, closed sales, pending sales, average mortgage rate, and median home price. Grouped bar charts display absolute values for each year, with hover-revealed percentage change labels and interactive metric selection via click. Built with React and D3 v7, the code leverages `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes, with a custom `ResizeObserver` for responsive sizing.

NNita
82% match
Loading thumbnail…

Fork of Fork of Barchart with transitions, divergence Values and toolkit *changed*

This example displays U.S. housing sales volumes as a static bar chart, with regions on the x-axis and sales on the y-axis. It uses the D3.js library (specifically `d3.csv` for data loading, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes) to render SVG rectangles. The chart is populated from a remote CSV file sourced from a GitHub gist, styled with steelblue bars that turn orange on hover, and includes labeled axes for clarity.

Ssowmyakancharla01@gmail.com
78% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

An area chart displays monthly sales data from a CSV file, with a monotone-smoothed line and translucent fill. The time series x-axis uses UTC date parsing and monthly tick formatting. Built with d3 v7, the chart constructs SVG output via the `areaChart` fluent API, `d3.scaleUtc`, `d3.axisBottom`, and `d3.curveMonotoneX`, rendering the data through d3.select and the charting function.

Ssuddala2001@gmail.com
77% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This timeline visualization plots seven events from 2020 to 2026 along a linear time axis, with event names on the y-axis and categories shown as colored dots using D3’s `scaleLinear`, `scalePoint`, and `scaleOrdinal` APIs. The chart uses a configured `config.js` with sample event data rendered via `renderTimeline`, which calls `axisBottom`, `axisLeft`, and `renderLegend`. Hovering over legend items fades non-matching points and raises matching ones, driven by `setHoveredColorValue`. Point styling and colors follow IBM Plex Sans and Roboto typography with a BBC-inspired color theme.

GGabriel Dantas
75% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sales data loaded from a cleaned CSV file hosted on GitHub. It provides a dataset summary, a full HTML table of all rows, and an SVG bar chart showing total sales by region. Built with D3 v7, it uses `d3.csv` and `d3.autoType` for parsing, `d3.rollup` and `d3.sum` for aggregations, and `scaleBand`/`scaleLinear` with SVG `rect` elements for the chart.

Ssrinathkarumuru@my.unt.edu
74% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This page displays country-level trends in Population, GDP, and Internet Users over time for a selected country (China), shown in two charts. The first is a multi-series line chart, and the second combines bar and line mark types for comparison. Both are rendered as SVG. The example uses d3.tsv to load the data, and defines scales, axes, and marks via the d3.v7 API, including `scaleLinear`, `scaleBand`, `axisBottom`, and `line`. A legend is drawn manually with SVG elements.

AAnurup Reddy
73% match
Loading thumbnail…

Fork of test

This gallery example presents an interactive stacked bar chart that visualizes financial data over time from 2021 to 2044, with bars divided into six categories such as spent income, spent return, and retained capital. The chart uses negative and positive value ranges to show spending versus retained amounts, with mouseover highlighting to emphasize individual bars. Built with D3 v4, the visualization employs `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and SVG rendering with CSS-based highlighting triggered by mouse events. The data originates from a custom `FinancialPlan` class containing hardcoded arrays.

HHarsh Patel
73% match
Loading thumbnail…

Fork of D3 Bar Chart

This fork of a D3 bar chart displays a static dataset of 20 numeric values as vertical bars, with each bar’s height and color intensity proportional to its value and labeled with its number. Built with D3.js version 4.5.0, the SVG is created via `d3.select('body').append('svg')`, and bars and text are added using `selectAll('rect').data(dataset).enter().append('rect')` and a similar text chain, with `attr` calls setting positions, dimensions, and fill colors. The chart uses a simple linear mapping from data to pixel coordinates, with no animation or interaction.

TTony Mai
72% match