Skip to main content
100%

Gist 7474904

✓ Published0🌍 Public
Aalanmclean
Last edited Nov 14, 2013
Created on Nov 14, 2013

This example shows a simple bar chart where each bar links to the D3.js website and changes color when a button is clicked. The chart is rendered with SVG, using d3.tsv to load data from a tab-separated file and d3.scale.linear to map values to bar widths. The color transition relies on CSS `transition` and the `classed` method to toggle a `.new-color` class on all rectangles. The README notes that this fill transition fails in Chrome when the target rect is inside an `<a>` tag with `xlink:href`.

AI-generated description

The fill transition does not work in Chrome when the target of the transition is within an <a> tag with the xlink:href attribute set.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Bbrunotrindademachado
76% match
Loading thumbnail…

BarChart Transitions

A bar chart displays a fixed dataset of twenty values, rendered as blue SVG rectangles with white numeric labels. Clicking the text triggers a transition that replaces the data with random values between 0 and 100, recalibrating the linear y-scale domain to the new maximum. Using d3.v4, the chart updates all rectangles and labels with a one-second animated transition and a bounce-out easing function (`d3.easeBounceOut`), smoothly adjusting bar heights, positions, and fill colors based on the new values.

TTollyCoburn
76% match
Loading thumbnail…

D3 Colors

This example demonstrates how D3’s color utilities can define and manipulate colors, then apply them to a simple bar chart. It first creates a color value using d3.rgb, d3.hsl, d3.hcl, and d3.lab, and uses it to set the page’s background. The main visualization renders 20 vertical bars across the full window width, with each bar’s fill assigned from the built-in d3.scale.category20c color palette. The code relies on D3 v3’s SVG selection and data-join methods, mapping a d3.range dataset to rect elements.

WWilliamQLiu
76% match
Loading thumbnail…

simple bar chat with interaction

A simple bar chart displays ten numeric values as black-outlined white rectangles, with each bar’s value labeled above it. On mouseover, the hovered bar turns red and its label enlarges; on mouseout, the bar smoothly transitions to green and the label shrinks. The chart is built with d3.v4, using `d3.scaleLinear` for positioning and `d3.line` to draw an overlaid path. SVG elements handle rendering, while `transition().duration(500)` animates the color and font-size changes.

EEssohanamKouyou
76% match
Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr
76% match
Loading thumbnail…

Bar Chart

This animated bar chart displays 31 random data points across a linear x-scale and a 0-to-10 y-scale, updating with new values on each button click. Built with D3 v4, it renders SVG axes and bars, using a clip path to contain the body and a merge pattern with transitions to smoothly animate bar positions and heights as data refreshes. The chart is constructed via a reusable `barChart` function that configures margins, scales, and ordinal colors for potential customization.

MMTClass
76% 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
76% 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.

深深度碎片
76% match