mauryaamit

@mauryaamit·3 public vizzes

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.

Jul 2, 2020

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.

Jul 2, 2020

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.

Jul 2, 2020