Untitled

100%

✓ Published0🌍 Public

Last edited Apr 30, 2020

Created on Mar 30, 2020

This example shows a dataset of ten groups labeled A through J, each with two numeric variables, rendered as a horizontal bar chart. The visualization uses the D3.js library, with `d3.scaleBand` mapping the categorical groups to the x-axis and `d3.scaleLinear` mapping the numeric `var1` values to the bar lengths (the `var2` column is loaded but not displayed). The SVG-based chart is generated by `index.html` and styled with `style.css`, with chart dimensions and margins defined inline; the bars are drawn using `d3.shape` rectangles, and axis ticks are labeled via `d3.axisBottom`. The data is read from the `data.csv` file asynchronously.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a grouped bar chart comparing values across three categories for multiple groups, with each category represented by a colored bar. The visualization uses D3.js v4 to load data from a remote CSV file, which is parsed with `d3.csv`. Bars are rendered as SVG rectangles, with an ordinal color scale mapping categories to red, blue, and green. The X-axis uses `d3.scaleBand` for group positioning, while a nested subgroup scale positions bars within each group, and a linear scale maps values to the Y-axis.

CCo10

82% match

Loading thumbnail…

Untitled

This grouped bar chart displays monthly values for three categories (Orange, XPC, and ABC) from a local CSV file. The visualization uses `d3.scaleBand` for the categorical x-axis and subgroup positioning, with `d3.scaleOrdinal` assigning a distinct color to each series. A manual legend is drawn using SVG circles and text elements. The chart renders as an SVG via the `d3.csv` load, with axes generated by `d3.axisBottom` and `d3.axisLeft` on a fixed 20-unit y-domain.

SSeanisgod1994

79% match

Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105

79% match

Loading thumbnail…

Untitled

This example shows a stacked bar chart comparing values across three groups, with each bar subdivided into three colored segments representing different subgroups. The chart reads data from a CSV file hosted on GitHub, parsing it with `d3.csv` and mapping groups to the x-axis and numeric values to the y-axis. It uses `d3.scaleBand` for both group and subgroup positioning, `d3.scaleOrdinal` for the categorical color palette, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output is built via D3's selection and append methods, with each group translated into position and rectangles drawn per subgroup.

Vvveewwee

79% match

Loading thumbnail…

Untitled

This example shows a small multiple chart with one line chart per data group, where each group represents a category from a CSV file and displays its numeric trend over time. The visualization is built with D3.js v4 and renders SVG graphics. The code uses `d3.nest()` to group data by category, `d3.line()` to draw each line, and `d3.axisBottom` and `d3.axisLeft` for axes. Colors are assigned via `d3.scaleOrdinal`, and each small chart is labeled with its group name.

AAmr Eldemerdash

78% match

Loading thumbnail…

Untitled

This example presents a bar chart that visualizes a dataset by mapping values to the height of vertical bars. The rendering uses the D3.js library, specifically leveraging its `d3.scale` for mapping data to screen coordinates and `d3.selectAll` to bind the data to rectangular SVG elements. The chart’s bars are drawn with SVG `rect` elements, with their dimensions and positions calculated through D3’s linear scaling functions. The visualization greets viewers with a static, aggregated view of the underlying data, without interactive or animated features.

YY-oringe

78% match

Loading thumbnail…

Untitled

This stacked bar chart displays the composition of groups across three subgroups, with each group’s total broken into color-coded segments. The visualization uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.stack to compute the stacked values from CSV data. Groups are plotted as rectangles filled with a d3.scaleOrdinal palette, rendered as SVG elements within a fixed-width canvas. The chart is built using d3.v4, reading data from a remote raw GitHub URL.

Nnkrpyate

78% match

Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3 v4, displaying categorical data grouped on the x-axis with subgroups stacked by color. It loads data from a remote CSV file using `d3.csv`, then uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. The chart applies `d3.stack` to compute cumulative bar segments, assigns colors via `d3.scaleOrdinal`, and renders the result as SVG rectangles with bar widths from `x.bandwidth()`.

BBaptisteJarry

78% match