HTML Starter

100%

✓ Published3🌍 Public

Last edited Aug 19, 2020

Created on Jun 25, 2020

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.

AI-generated description

Chart

MIT Licensed

Similar vizzes

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

85% 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…

D3 multi-series line chart with tooltips and legend

This interactive multi-series line chart displays four data columns over time, with a dropdown menu to switch between three value groups. Users hover over the lines to see tooltips with the series name, formatted value, and date, powered by the jQuery Tipsy plugin. The visualization uses D3.js v3 to render SVG elements, including axes and animated transitions when the selection changes, while a legend updates based on the current data subset. Data is loaded from a CSV file using `d3.csv`.

MMatthew-Weber

81% 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

80% match

Loading thumbnail…

HTML Starter

This example displays a multi-series line chart of stock data, plotting both opening and closing values over time as two distinct colored lines. The visualization uses D3 v4 with SVG rendering, employing `d3.line()` to generate the paths, `d3.scaleTime()` for the time-based x-axis, and `d3.scaleLinear()` for the y-axis. Data is loaded from a local CSV file via `d3.csv()`, with dates parsed using `d3.timeParse()`. The chart includes axes rendered through `d3.axisBottom()` and `d3.axisLeft()`, all styled with basic CSS classes.

Ttayyabanisar

80% match

Loading thumbnail…

HTML Starter

This chart displays issue ratings over time using multi-line visualizations, with each line representing a distinct category from a TSV dataset. It uses d3.v3 with SVG rendering and animation, featuring a brushing interface for time-range selection. The lines are color-coded via an ordinal scale, while axis and mouse-tracking elements support interactive exploration of the data.

SSasamanas

79% match

Loading thumbnail…

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Rremyapk

79% match

Loading thumbnail…

Line Chart multiple lines | interractive Legend

This interactive visualization displays a week of temperature data for multiple cities using multiple lines. Users can click on legend items or line paths to isolate a specific city’s data, which reduces the opacity of other lines for focused comparison. Built with D3 v5, the code utilizes `scaleOrdinal` for color mapping, `nest` and `line` for path generation, and a custom `colorLegend` component with `setSelected` and `selected` for interactive state management. The SVG render includes axes with gridlines and hover effects on paths.

Vvladvaculin

77% match