Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Mmauryaamit
Last edited Jul 2, 2020
Created on Jul 2, 2020
Forked from 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.

AI-generated description

Horizontal and verical bar charts

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

HTML Starter

This example uses D3 v5 to render interactive bar charts from CSV data, displaying multiple series across 26 weekly categories. A custom `makeChart` function builds the visualization with scales (linear and band), axes, and SVG rectangles, while invisible overlay rectangles enable tooltip interactions that show data values for each week. The implementation demonstrates how D3 selections, event handling, and dynamic styling work together to create a coordinated multi-series chart with hover functionality.

Mmauryaamit
90% match
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
84% 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.

一一如既往
84% match
Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart comparing the populations of five countries, drawn as green SVG rectangles. The visualization uses D3 v6’s `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` to position bars and ticks, with data loaded from a local CSV file via `d3.csv`. The chart is entirely rendered through SVG elements within a React-agnostic HTML page, styled with CSS for body text and tick labels.

TTrustPaul
84% match
Loading thumbnail…

HTML Starter

This example renders a horizontal bar chart of country populations using SVG and React. The code loads population data from a CSV file with d3.csv and scales the values using d3.scaleLinear and d3.max to map population counts to pixel widths. It sets up an SVG canvas with fixed dimensions and prepares scales for the axes, though the actual chart bars and axes are not fully drawn in the shown code. The visualization uses d3.v5 within a React framework, with the HTML page linking to the D3 library via a CDN.

Mmatt-godfrey
83% match
Loading thumbnail…

Making Vertical Bar chart with D3

This example shows a vertical bar chart of monthly date-value pairs from a CSV file, with bars animating upward over two seconds to their final heights. The D3 v5 code uses `scaleLinear` for the y-axis, `scaleBand` for categorical x-axis positioning, and `axisLeft`/`axisBottom` for tick marks. The SVG rendering is driven by a custom transition on `rect` elements, which grow from the baseline to the scaled value, while the chart title and axis labels are added as SVG text.

JJuan David Bolaños Rojas
83% match
Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart displaying the number of interventions across different procedure categories, such as "CAB alone" and "Valve alone." The data comes from a CSV file loaded via `d3.csv`. The chart uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars. A logarithmic tick format using `format` converts large numbers, and the chart includes custom axis labels and a title, all styled via an external CSS file.

Ggregosaure
83% match