Skip to main content
SimilarExport ZIP
100%

simple bar chat with interaction

✓ Published0🌍 Public
EEssohanamKouyou
Last edited Nov 10, 2017
Created on Nov 9, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/c607174fc6fd5c7bfaa804d46ca70eab'>simple bar chat with interaction</a>

mit Licensed

Similar vizzes

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
94% match
Loading thumbnail…

simple bar chat dataset

A simple bar chart displays a static dataset of eleven named values, rendered as outlined rectangles with monospaced labels below each bar. The visualization loads a semicolon-delimited CSV file containing name-value pairs and maps the values to bar heights using linear scales. Built with D3 v4, the code parses the dataset with `d3.dsvFormat`, computes the maximum value to set the y-domain, and appends SVG `text` and `rect` elements to the document body. The bars are positioned with translated groups, and both axes are implicit rather than explicitly drawn.

EElisaDnr
83% match
Loading thumbnail…

simple bar chat dataset

This example shows a simple bar chart of categorical data from a CSV file, with letters A through J plotted on the x-axis and their associated numeric values represented by bar heights. The visualization updates continuously: every half-second, the values are replaced with random numbers, and the bars animate smoothly to their new heights. The code loads the dataset with `d3.text` and parses it using `d3.dsvFormat` with a semicolon delimiter. It uses `d3.scaleLinear` for both axes, SVG `rect` elements for the bars, and `transition().duration(100).delay()` to stagger the update animation, while the y-axis domain is recalculated with `d3.max` after each data change.

EEssohanamKouyou
83% match
Loading thumbnail…

Simple Bar Chart

This simple bar chart displays nine data values as vertical green bars on an SVG canvas. Each bar responds to mouseover and mouseout events, smoothly transitioning its fill color to blue and back to green using D3 transitions. The visualization is built entirely with D3 v7 APIs, including `scaleBand`, `scaleLinear`, `selectAll`, and `join` to bind data and render rectangles. Axes are omitted, keeping the chart focused on the raw data values, which are also exposed as tooltips via appended `title` elements.

PPeter Cordone
82% match
Loading thumbnail…

simple bar chat dataset

This example shows a set of categorical bars colored black and white, with each bar labeled by a letter from A to J. It uses D3 v4 to load semicolon-delimited data from a CSV file via `d3.dsvFormat` and `d3.text`, then renders the chart as SVG rectangles and text elements. The x and y scales are created with `d3.scaleLinear`, with domains set after the data is parsed. The chart itself does not display bars; it only shows the text labels positioned along the x-axis, as the code appends text elements but no rect elements.

EEnzoTheBrown
81% match
Loading thumbnail…

simple bar chat dataset

This example shows a set of categorical bars colored black and white, with each bar labeled by a letter from A to J. It uses D3 v4 to load semicolon-delimited data from a CSV file via `d3.dsvFormat` and `d3.text`, then renders the chart as SVG rectangles and text elements. The x and y scales are created with `d3.scaleLinear`, with domains set after the data is parsed. The chart itself does not display bars; it only shows the text labels positioned along the x-axis, as the code appends text elements but no rect elements.

EEnzoTheBrown
81% match
Loading thumbnail…

simple bar chat dataset

This simple bar chart visualizes a small dataset of categorical values loaded from a semicolon-delimited CSV file. The chart uses SVG rectangles, with each bar’s height proportional to its numeric value, while the category names are displayed as text labels above the bars. The code relies on `d3.text` to fetch the dataset, `d3.dsvFormat(';')` to parse the semicolon-separated values, and `d3.scaleLinear` for the x- and y-axes’ positioning and scaling. Rectangles and text are appended using D3’s data-join pattern, with styling applied via CSS.

HHectorDt
81% match
Loading thumbnail…

A simple Bar Chart

A simple bar chart displays a dataset of numeric values as vertical bars, with each bar labeled by its value. The chart updates dynamically when the user clicks text prompts to add or remove a data point, animating the bars and labels to reflect the new data. Built with D3 v6, the visualization uses `scaleBand` and `scaleLinear` for scaling, `transition` for smooth animations, and SVG `rect` and `text` elements for rendering. The initial data is hardcoded in the script, and new values are randomly generated.

KKaustav Sen
81% match