Gist 95392bf4a37344793786

100%

Gist 95392bf4a37344793786

✓ Published0🌍 Public

Last edited Nov 26, 2015

Created on Nov 26, 2015

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

AI-generated description

Similar vizzes

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

79% match

Loading thumbnail…

svg & d3 - example

This example demonstrates a simple bar chart built with D3.js v4, using an SVG-based rendering approach. It displays a small dataset of four numeric values as horizontal bars, with a separate checklist interface above the chart that lists the same data points as labeled checkboxes. The visualization pairs categorical data with an interactive checklist, though the chart itself is static and does not respond to checkbox state. The code uses D3 selections and data binding (`d3.select`, `selectAll`, `data`, `enter`, `append`) to create both the label inputs and the bar elements, while CSS styles define the bar colors and text alignment. The chart is rendered as a series of `div` elements within a container, with widths proportional to the data values.

BBharath4259

79% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44

79% match

Loading thumbnail…

Fork of Barchart with transitions, divergence Values and toolkit changed

This example shows a horizontal bar chart of absolute frequencies for six categories, with an interactive tooltip on hover that also highlights and expands the selected bar. The chart includes styled axes, gridlines, and a title. Rendering is SVG with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`/`d3.axisBottom`. The code uses `d3.transition` for bar enlargement on mouseenter, and a tooltip element is managed via plain DOM events. Data is hardcoded in the script.

NNathelen

78% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays four categories (A through D) as solid black rectangles of varying widths, with the largest bar spanning 800 pixels and the smallest 414 pixels. The visualization uses static SVG rectangles and text elements within an HTML document, with labels positioned along the left margin. The chart is built with hardcoded SVG coordinates and inline styling, including 64-pixel text for the category labels. This example demonstrates how simple SVG markup can create a categorical comparison without JavaScript libraries or data-binding frameworks.

Ttverdone

78% match

Loading thumbnail…

Gist 6568151

A histogram displays a randomly generated Irwin–Hall distribution of 50 values, showing the count of scores binned into twenty uniform intervals. The chart uses D3’s histogram layout and linear scales to position bars, with axis ticks placed between bars to clarify bin boundaries. Bar counts are labeled above each rectangle, and mouseover events log the original data objects and associated names filtered from the source array. Rendered as SVG using d3.v2, the example demonstrates binning and interactive data binding.

11wheel

78% match

Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

深深度碎片

78% match

Loading thumbnail…

D3 bar chart without data-binding

A static SVG bar chart displays twenty purple rectangles of varying heights, representing an inline array of numeric values. The code uses D3 v4 scales, `d3.scaleLinear`, to map data values to pixel heights and positions, though it does not use the data join's update or exit selections. Bars are appended via `selectAll("rect").data(data).enter()`, with each rectangle’s height and y-coordinate computed from the scale; the x-position is calculated manually from the index. No interaction or animation is present, and the chart is rendered with fixed SVG dimensions.

AAlsaxian

78% match