HTML Starter

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

HTML Starter

HTML Starter

HTML Starter

This example presents a scatter plot of the auto-mpg dataset, using red semi-transparent circles to show the relationship between vehicle attributes. The code imports specific D3 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart within an SVG, while CSS styles the circles and text. The data is loaded as CSV and parsed into numeric values, though the rendering logic itself is left as an empty function, leaving the visualization incomplete.

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

HTML Starter

This example demonstrates how to build a scatterplot in React using D3 v4, displaying the relationship between city and highway fuel economy from a CSV file. The code creates linear scales for both axes, appends SVG circles with opacity and color encoding, and calls `d3.axisBottom` and `d3.axisLeft` to render the axes. The page also includes a basic SVG canvas with circles positioned via `selectAll`, `data`, and `join`, showing a simple data-binding pattern in plain HTML.

AArthur Kozhevnik

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

HTML Starter

This example demonstrates a stacked bar chart built with D3.js v5 and rendered as SVG within a React application. The chart visualizes five data points, each with three numeric keys (p, d, e), using `d3.stack()` to compute layer offsets and `d3.scaleBand()` and `d3.scaleLinear()` for positioning. Rectangles are appended via data joins inside groups, with each layer’s fill color assigned sequentially. The code includes placeholder divs for map and sankey visualizations, though only the bar chart is implemented.

SSophia Murage