Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
CCeline Margaux Bernard
Last edited Jun 9, 2020
Created on Jun 9, 2020
Forked from HTML Starter

A bar chart displays the daily amount of a continuous resource over June 2020. The visualization loads data from a semicolon-delimited CSV file and renders horizontal bars using SVG. It employs D3 v5 functions including `csv`, `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` to map values. The layout positions bars vertically by date with lengths proportional to amounts, though axes are not yet drawn. The code includes a minimal HTML skeleton with a placeholder paragraph.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

Nnouralkhoury
82% match
Loading thumbnail…

HTML Starter

This example uses D3 v5 to render a horizontal bar chart of population data from a CSV file. The SVG canvas displays each country as a bar, with bar width proportional to population using a linear scale and bar position determined by a band scale. Data is loaded via D3’s `csv` function, and the chart is drawn by appending `rect` elements to the SVG. The code uses `scaleLinear`, `scaleBand`, and `max` from D3 to map values.

一一如既往
82% match
Loading thumbnail…

HTML Starter

This example generates a multi-series bar chart with rows from a CSV file, displaying up to 11 columns of data as vertical bars. The visualization uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `axisRight` to render axes and bars. Invisible overlay rectangles detect mouse movements and trigger tooltips that show corresponding values from each series, while interactive hover states highlight the bars. The implementation uses SVG for rendering and includes animated transitions for chart updates.

Mmauryaamit
82% match
Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of country populations using D3 v5. It loads data from a CSV file and appends SVG rectangles scaled by population values. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` to render the country labels. A margin-based layout shifts the bars via an SVG `<g>` transform, with a 1000-person offset added to each population value before rendering.

Ttheodasilva
82% match
Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of country populations using D3 v5. It loads data from a CSV file and appends SVG rectangles scaled by population values. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` to render the country labels. A margin-based layout shifts the bars via an SVG `<g>` transform, with a 1000-person offset added to each population value before rendering.

Ttheodasilva
82% match
Loading thumbnail…

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit
82% match
Loading thumbnail…

HTML Starter

This example displays a bar chart of population data for several countries, loaded from a CSV file. The bars are rendered as SVG rectangles, with a linear scale mapping population values to widths and a band scale mapping country names to vertical positions. The code uses D3 v6 methods such as `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to construct the visualization. The HTML page includes inline CSS and JavaScript, with the chart drawn entirely through D3’s selection and data-join pattern.

TTrustPaul
81% match
Loading thumbnail…

HTML Starter

A bar chart displays fixed-width rectangles for the values 1, 3, and 4, plotted against a linear scale whose domain is computed with `d3.max` and whose range is 0–300 pixels. The bars are drawn as SVG `rect` elements with a constant fill of red, positioned horizontally at 120-pixel intervals from the left edge. The chart is generated using D3 v5 within a minimal HTML page, with the Y-axis rendered via `d3.axisLeft` and appended as a `g` element. The underlying data is hard-coded as a JavaScript array and object literal.

Ggitmethis
81% match