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 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.

AI-generated description

Horizontal and verical bar charts

MIT Licensed

Similar vizzes

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

HTML Starter

This visualization demonstrates multi-axis line charts with interactive selection and tooltips, allowing users to compare multiple data series across weeks. The chart renders a per-rectangle interaction area that highlights all chart lines associated with a given week on hover, displaying a tooltip with each series name and value. The code uses D3.js v5 with SVG’s `select`, `attr`, and `style` APIs to build the chart, and custom selection rectangles trigger mouseover and mouseout events to control tooltip visibility. The data is loaded from a CSV file containing numerical values for nine columns (A–I). Animation is present in the rendering of the chart layout.

TTaustus
85% match
Loading thumbnail…

HTML Starter

This example presents a static bar chart built with D3.js, displaying a hardcoded array of twelve numeric values. The SVG output renders green bars on a light background, with each bar’s height directly proportional to its data value. The code uses D3’s selection API and `selectAll` with chained `attr` methods to position bars, explicitly setting the SVG dimensions, bar width, and vertical offset. The data is a simple local JavaScript array, not fetched from an external source.

Eemmaoudmaijer
81% match
Loading thumbnail…

HTML Starter

This example presents a static bar chart built with D3.js, displaying a hardcoded array of twelve numeric values. The SVG output renders green bars on a light background, with each bar’s height directly proportional to its data value. The code uses D3’s selection API and `selectAll` with chained `attr` methods to position bars, explicitly setting the SVG dimensions, bar width, and vertical offset. The data is a simple local JavaScript array, not fetched from an external source.

Eemmaoudmaijer
81% 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
80% 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
80% match
Loading thumbnail…

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.

CCeline Margaux Bernard
80% match