Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
JJefferson Abreu
Last edited Jul 24, 2019
Created on Jul 10, 2019
Forked from Hello VizHub

This example displays a horizontal bar chart of Overwatch team match times, with each bar’s length proportional to its numeric difficulty value. Hovering a bar highlights it with a black stroke and logs the team name to the console. It uses d3.scaleLinear and d3.scaleBand for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.csv to load the dataset. The SVG renders through d3 selections, with mouseover and mouseout events triggering an onHover callback that updates the chart state.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This bar chart displays monthly quantities from a CSV file hosted on VizHub, rendered as an SVG using D3.js v5. The code loads the data with `d3.csv`, processes the numeric values, and draws the axes with `d3.axisBottom` and `d3.axisLeft`. Bars are created via `d3.scaleBand` and `d3.scaleLinear` mappings, with rotated x-axis labels for readability. The visualization, styled by an external CSS file, appears on a dark background within a framed container.

Mmwisniewski1991
78% match
Loading thumbnail…

Hello VizHub

This example displays a horizontal bar chart ranking countries by population, with bars rendered as SVG rectangles and axes labeled using d3.axisBottom and d3.axisLeft. The data is loaded from a CSV file via d3.csv, and populations are formatted with d3.format to convert raw numbers into abbreviated strings like “B” for billions. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with margins and tick marks styled via CSS. It demonstrates VizHub’s workflow of combining D3 v5 with ES6 modules.

Vvkanotra
78% match
Loading thumbnail…

Hello VizHub

This example displays two synchronized visualizations of borehole water-depth data: a bar chart and a scatter plot. Both graphs use color to distinguish data points marked as "Old" or "New," and hovering over a bar highlights the corresponding circle in the other chart with a green stroke. Both views are rendered as SVGs using D3 v5. The bar chart creates rectangles with `d3.scaleLinear` for the y-axis and `d3.axisRight` for tick marks, while the scatter plot uses circles with a left-aligned axis. Data is loaded from a CSV file and parsed with `d3.timeParse`.

SShane Carey
77% match
Loading thumbnail…

new

This bar chart displays the number of hours required to beat each game from a dataset loaded via a CSV file. The visualization uses D3.js v7 to render SVG rectangles, with bars colored steel blue that turn orange on hover. It employs d3.csv to fetch data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the numeric y-axis. Rotated axis labels and custom fonts style the chart, with axes formatted using d3.axisBottom and d3.axisLeft. The chart’s title and axis labels are added as SVG text elements.

Rranjithkmr598@gmail.com
76% match
Loading thumbnail…

Hello VizHub

This example displays a simple bar chart of four numeric values rendered as SVG rectangles with red value labels. The visualization demonstrates basic D3 data joins using `selectAll`, `data`, and `enter` to bind an array of numbers to shapes. It also illustrates the use of ES6 modules through an imported `message` constant that sets the page heading, while the chart itself uses D3’s selection and attribute methods to position and size elements dynamically. The styling comes from the included CSS file with the Ubuntu font.

NNarong
76% match
Loading thumbnail…

Vedio Games Bar Chart

This example visualizes video game data as a bar chart, with bars rendered in blue that highlight yellow on hover. The SVG chart is built using D3 version 6, with data loaded from a CSV file via `d3.csvParse`. The code defines scales and axes in the script, though the specific axis and bar positioning setup is incomplete. The implementation uses `d3.select` and `svg.append` to create the chart structure, and includes tooltip and axis placeholders. The static bar sizing is set to 500 by 100 pixels.

RRED98310
75% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart uses SVG rectangles to display final power scores for ten teams, with team names on the y-axis and score values on the x-axis. The chart, built with d3.scaleBand and d3.scaleLinear, includes axis labels, gridlines, and a title. Underlying data is loaded from a CSV file via d3.csv, with numerical fields coerced to numbers. Formatting is applied through CSS, and axes are customized using d3.axisLeft and d3.axisBottom with tick lines removed and manually appended labels.

HHirsh Gupta
75% match
Loading thumbnail…

Grouped Horizontal Bar Chart with D3 V4

This example shows a grouped horizontal bar chart comparing two teams’ runs across ten overs, with each group’s bars colored distinctly and a legend identifying the teams. Built with D3 v4 and jQuery, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendering SVG rectangles that update on window resize. Tooltips are attached via a custom `horBarTooltip` module to reveal exact values on hover.

CChandrakantThakkarDigiCorp
75% match