Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jan 13, 2023

Created on Jan 10, 2023

This example creates a titled scatterplot with axes, gridlines, and a connecting line, using raw data points encoded in `{x, y}` pairs. It demonstrates coordinate system construction with D3 v5’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendered as SVG elements. The code also uses `d3.line` to draw the path, appends circles for the dots, and adds axis labels and a title. The visualization is computed dynamically in a single `createAxes()` function, with styling defined in an embedded CSS stylesheet.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Create a face with d3.js!

This example shows a simple line chart of four data points using D3.js. The chart maps time to value, with an SVG path drawn in steel blue to connect the points. The code explicitly sets up linear scales for both axes, uses `d3.axisBottom` and `d3.axisLeft` to render tick marks, and creates the line with `d3.line()`. The data is hardcoded as an array of objects, and the visualization is rendered as SVG inside a dedicated container, following the classic margin convention for layout.

Nnagasai.mandalapu@gmail.com

81% match

Loading thumbnail…

Fork of Hello HTML

This example shows an interactive scatterplot of the Iris dataset, plotting sepal width against sepal length. The visualization uses React to render SVG elements and d3.scaleLinear for both axes. Data is loaded asynchronously via d3.csv from a GitHub gist, with custom React components like AxisBottom, AxisLeftScatterChart, and CircleMarks composing the chart. The axes display tick marks and labels, while circles represent individual data points, all styled with CSS classes for a clean, readable layout.

IIgor T.

80% match

Loading thumbnail…

Fork of Axes with Hover_drb

This example displays a simple scatterplot with a gray plotting area, using D3 v7 to render an SVG visualization. Linear scales map data from 0 to 100 to pixel coordinates, with axes and labels added via d3.axisBottom, d3.axisLeft, and custom label functions. The chart responds to container resizing through a ResizeObserver, recalculating dimensions and redrawing the visualization when the viewport changes. No data points are plotted, showcasing only the axes, labels, and background region.

KKondreddy Saikiran reddy

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic D3.js chart construction, including SVG creation, linear and logarithmic scales, and band scales for categorical data. It renders rect elements as a bar chart with axis generation using `d3.axisLeft` and `d3.axisBottom`. The code also shows data binding with arrays and JSON objects, plus animated text transitions using `transition().duration()`. Styling includes CSS classes and inline SVG attributes with a yellow background.

KkazGuido

80% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

80% match

Loading thumbnail…

Fork of HTML Starter

This interactive line chart renders an SVG visualization of data points connected by a smooth curve, with a title and chart container styled via CSS. Built with D3 v5 and React, the visualization uses an SVG `<path>` element to draw the line, while JavaScript handles the data binding and coordinate scaling. The chart is presented on a fixed 960x500 canvas, demonstrating a minimal HTML, CSS, and JavaScript integration for a basic line chart display.

NNandini Maddula

79% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com

79% match

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example displays a scatter plot of data points as rotated, scaled hexagonal shapes. It shows the distribution of xvalue and yvalue coordinates, with the option to color the points either white or a rainbow gradient based on the selected attribute. The visualization uses React with D3.js v7, employing `scaleLinear` for axes and `scaleOrdinal` for color mapping. Polygons are rendered via SVG, rotated and scaled using transform attributes, with a dark background and interactive dropdown for color selection.

Ssahildesignzz@gmail.com

79% match