Parabola

100%

✓ Published0🌍 Public

Last edited Dec 28, 2015

Created on Dec 28, 2015

This visualization plots the quadratic function y = x² as a teal curve, showing its symmetric parabolic shape across x-values from -10 to 10. The chart includes labeled x and y axes with light gray ticks, and the y-axis is positioned at the center of the plot rather than the left edge. Built with D3.js version 3.5.5, the code uses `d3.scale.linear` for both axes, `d3.svg.line` with basis interpolation to draw the smooth curve, and `d3.svg.axis` to render the tick marks. Data points are generated programmatically via `d3.range` and the `Math.pow` function, rendered as an SVG path.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example plots polynomial functions as a series of red circles. The visualization calculates y-values for a given set of polynomial constants across a range from -10 to 10, then scales the resulting points to fit the screen dimensions. Using D3 v7’s `select` API and the `.join()` operation for efficient SVG element creation, each circle is positioned and rendered with a fixed radius and 70% opacity. By modifying the `polynomial_constants` array or the `range_min`/`range_max` values in the code, different curves can be displayed.

BBrian Hulbert

64% match

Loading thumbnail…

Log-Log Plot

A log-log plot displays three curves for the functions f(x) = x, x², and x³ across a range from 0.1 to 100, using logarithmic scales on both axes. The code loads data from a TSV file and renders it as SVG paths through d3.svg.line, with logarithmic scales via d3.scale.log and axes via d3.svg.axis. A legend identifies each curve by its formula, and a clipPath confines the lines to the plotting area.

Mmbostock

64% match

Loading thumbnail…

Fork of Circles with D3

This example visualizes a polynomial function as a series of fixed-size red circles plotted across a green background. The circles are positioned by evaluating the polynomial y = x² + 3x + 2 at negative increments between -10 and 10, then scaling both coordinates to fit the container dimensions. Using D3 v7, the code selects and joins circle elements via `select().selectAll().data().join()`, applying `cx`, `cy`, `r`, `fill`, and `opacity` attributes. The rendering is computed directly from polynomial constants rather than external data.

BBrian Hulbert

63% match

Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This example displays a scatter plot of seven circles positioned along a quadratic curve where each y-coordinate is the square of its x-coordinate (1, 4, 9, 16, 25, 36, 49). The visualization builds a full-viewport SVG via D3’s `select` and joined `join` operations, sizing it to the container’s dimensions, then renders the circles with `d3.r` set to 25 using the `renderCircles` function. The code separates setup and rendering into modular functions, importing data from a local `data.js` file that calculates coordinates with `Math.pow`.

Eethanrampersaud@gmail.com

63% match

Loading thumbnail…

Pseudo Visualization

This pseudo visualization demonstrates the foundational marks and channels needed to map global tree cover change, using a parabola to show how GPS-derived x and y coordinates will position data. A series of circles, distributed via d3’s `selectAll` and `join`, are placed using computed `cx` and `cy` attributes, while their fill colors apply `interpolateRdYlGn` to encode values from 0 to 2500. The example uses d3 v7 APIs, including `symbol` and `symbolsFill` for alternate shapes, and renders directly into an SVG canvas sized to the browser window.

LLauren

63% match

Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

JJoker-tr

63% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

63% match

Loading thumbnail…

Pseudo-Visualization

This example shows a pseudo-visualization: a hand-crafted line chart plotting runs versus overs for two cricket data series, rendered with hard-coded coordinates rather than a scale or data transformation. Red and blue polygonal lines represent the two datasets, drawn over a light gray plot area with black axes and axis labels. The code uses D3.js APIs including `d3.line` and selections like `selectAll(...).join(...)` to create SVG path elements, with styling applied via `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`. It also imports and uses `xAxisLabel` and `yAxisLabel` from `@curran/axis-labels` to annotate the chart.

PParth Shroff

63% match