Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
SSaahithi49
Last edited Jul 6, 2022
Created on Jul 6, 2022
Forked from Hello VizHub

A bar chart displays the price per head of restaurants in Hyderabad, using data loaded via `d3.csv` from a GitHub gist. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering and animated transitions via `transition.attr`. Hovering over a bar triggers a mouseover handler that enlarges the bar, changes its class from `bar` to `highlight`, and appends a dynamic price label, while mouseout restores the original state and removes the label.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes the price per head at Hyderabad restaurants using a bar chart, with an animated entrance and interactive highlighting on mouseover. Built with D3 v4 and SVG, bars transition in sequentially, while hovering enlarges a bar and displays its price in rupees. The code uses `d3.scaleBand`, `d3.scaleLinear`, and `transition` for animation, with event handlers `onMouseOver` and `onMouseOut` to toggle highlighting and show tooltip-like text.

AAshrith Kudidhi
92% match
Loading thumbnail…

Untitled

This example visualizes the average price per head at restaurants in Hyderabad, India, using a bar chart rendered as SVG with D3 v4. The chart displays restaurant names on the x-axis and prices on the y-axis, with bars animating into place. Hovering over a bar highlights it in orange and displays its price, using the `d3.select`, `d3.scaleBand`, and `d3.scaleLinear` APIs along with D3 transitions. The data is loaded from a remote CSV file, and the chart includes labeled axes and gridlines.

AAshrith Kudidhi
91% match
Loading thumbnail…

Untitled

This interactive bar chart visualizes XYZ Foods stock prices from 2011 to 2016, with dollar-valued y-axis labels and a traditional bar layout. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering with animation. Hovering over a bar triggers a `mouseover` event that highlights the bar in orange, expands its dimensions, and displays a temporary price label, while `mouseout` reverts these changes. Data is loaded from a local CSV file.

KKrishnaVamsi09
79% match
Loading thumbnail…

Untitled

This bar chart displays the stock price of XYZ Foods from 2011 to 2016, with values increasing from $45 to $78. The visualization uses D3.js v4’s `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render an SVG with animated bars that grow sequentially. Hovering over a bar triggers a mouseover event that highlights it in orange via the `highlight` class, expands its width and height, and shows a temporary `$value` label. The mouseout event reverts these changes and removes the label. Data comes from a local CSV file.

WW9183907
77% match
Loading thumbnail…

Untitled

This animated bar chart compares the number of movies available on various OTT platforms, using data from a CSV file. Rendered with D3 v4 as SVG, the chart features a transition animation where bars grow sequentially on load. Interactive mouseover events highlight a bar and append a text label showing its exact value, while mouseout removes the label and resets the bar’s appearance. Axes are scaled with `d3.scaleBand` and `d3.scaleLinear`, and the chart includes a title and axis labels.

SSaahithi49
77% match
Loading thumbnail…

Untitled

A bar chart displays monthly monetary values from 2013-01 through 2014-02, with each bar’s height encoding the value and labeled on the y-axis as "Value ($)." The chart uses an ordinal x-scale with rotated date labels and a linear y-scale, rendered as SVG rectangles. Built with D3 version 3.5, it employs `d3.svg.axis`, `d3.time.format`, and `d3.csv` to load and parse the `bar-data.csv` file. Data points are formatted as monthly timestamps, and axes include tick marks with rotated text for readability.

RRohit-2710
76% match
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices per year, reading from a CSV file and rendered as SVG. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axes labeled "Year" and "Stock Price." On mouseover, bars highlight in orange via d3.select and animate with a transition, expanding width and shifting position while a dollar-value label appears; mouseout reverses these changes and removes the label. d3.v4 handles the animations and event-driven interactions.

AAbdouEnsaj
76% match
Loading thumbnail…

Untitled

A bar chart visualizes a single quantitative column from a CSV dataset, displaying the distribution of values across adjustable bins. The chart uses d3.v4’s `d3.histogram` to compute bin counts from the `price` column and renders bars with `d3.bar`, colored in teal. An interactive input allows changing bin numbers, and a dropdown selects which column (from available CSV columns) to visualize. The chart is built in React, with d3 handling SVG rendering and the tooltip display.

AAbhishek Kumar
76% match