A D3 chart

100%

✓ Published0🌍 Public

Last edited Sep 24, 2019

Created on Sep 24, 2019

This example uses the vega-lite-api to construct a visualization and demonstrates the aggregation data transformation. The rendered chart is a simple SVG bar chart built with D3 v4, displaying four bars with values from the `ratData` array. The chart uses the aggregation transformation to summarize the underlying data before rendering. The visualization is embedded directly in an HTML page with inline JavaScript and SVG elements, showing how vega-lite-api can be combined with framework-level D3 code.

AI-generated description

A visualization constructed using the vega-lite-api.

This demonstrates use of the aggregation data transformation.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Page Template

This example uses D3 v5 to render a simple bar chart. It creates an SVG canvas of 300 by 300 pixels, then defines a dataset of six numeric values. The code selects the SVG element, binds the data to it, and appends rectangles with widths proportional to the data values. Each rectangle’s height is fixed at 30 pixels minus a small gap, and its y-position is offset by index. The bars are uniformly colored steel blue. The rendering is purely SVG-based, using `d3.select`, `.append`, `.data`, and `.enter` to construct and position the bars.

AAn Jingyi

77% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

77% match

Loading thumbnail…

D3 bar chart with data-binding

This example demonstrates a simple D3 bar chart that binds an array of numeric values to SVG rectangles, with each bar’s height proportional to its data point. It uses D3 v4’s `scaleLinear` to map the data domain to a fixed pixel range, then applies the `data()` and `enter()` methods to create and position the rectangles. The chart renders with a minimal style—unfilled bars with black outlines—and the data is hardcoded as a static array. The code relies on standard D3 selection and scale APIs, with the SVG container set to 960 by 500 pixels.

4456lumen

77% match

Loading thumbnail…

D3 Chart

This example shows a static bar chart built with React and D3.js v4, displaying a simple dataset of nine numeric values as vertical bars. The bars are rendered as SVG rectangles, with heights proportional to the data values and positioned horizontally using a translate transform. The code selects the pre-existing `<svg>` element with the class `bar-chart`, sets its dimensions, and appends rectangles via D3's data join (`enter()` and `append()`). The chart uses `d3.select` and `d3.min` APIs to map values to pixel coordinates.

Aacervantesc

76% match

Loading thumbnail…

D3: Drawing a Bar Chart

This example demonstrates a basic bar chart built with D3 v7 in an SVG container, visualizing an array of 20 numeric values. The bars grow downward from the top of a 500×100 pixel canvas, with each bar’s height proportional to its data value multiplied by 4, and its fill color transitioning from dark to lighter blue based on the data. The chart also overlays each bar with white, 11px sans-serif text labels showing the exact data values, centered horizontally within each bar. The code uses `d3.select` to append SVG elements and the data-join pattern with `.enter()` to create rectangles and text nodes.

MMarisa Tania

76% match

Loading thumbnail…

Vega-Lite API Stacked Bar Chart Template

This example demonstrates a stacked bar chart generated using the Vega-Lite API, with data loaded from a CSV of religious demographics by country. The code imports the vega, vega-lite, and vega-lite-api libraries, registers them together, and configures a custom tooltip handler. The visualization renders as an SVG that fills the entire viewport, using the `autosize` fit option and custom axis and label styling defined in a separate configuration module. The data is fetched asynchronously via D3's `csv` function.

Ppjdhungana@gmail.com

76% match

Loading thumbnail…

Learn D3.js

A simple bar chart built with D3.js v5 demonstrates how to create an SVG visualization from a static array of data. The page displays a single titled bar chart rendered inside an SVG element, using D3’s selection and scale methods to map data values to pixel heights. The code also includes a separate Hello World message written to a DOM element, but the chart itself does not reference external data files or interactive features. The example serves as a minimal introduction to D3’s core SVG rendering workflow.

PPulakRaj

75% match

Loading thumbnail…

Vega-Lite API Template

This example presents a horizontal bar chart of population by country, with bars colored by religion and tooltips displaying the religion attribute. It is built using the Vega-Lite API along with Vega, Vega-Lite, and D3’s CSV loader, rendering to SVG via Vega’s view system. The chart fetches data from a GitHub-hosted CSV file and configures axes and label styling through a shared configuration object.

Aazharahmad0

75% match