Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Untitled

✓ Published0🌍 Public
VVamsiYandapalli
Last edited Dec 20, 2021
Created on Dec 20, 2021
Forked from Fork of Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, using d3.scaleBand and d3.scaleLinear. The chart renders as SVG with hover highlighting, changing bar color from steelblue to brown on mouseover. The data is loaded from an external CSV file about crimes against Indian women, though the visible dataset is hardcoded inline. Two donut charts are mentioned as new features, but the code only implements the bar chart with simple axes and bar rects.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Untitled

This visualization displays uptime data in hours for five dates in January 2017, using a bar chart rendered as SVG. The bars use a steelblue fill that turns brown on hover, with axes styled to remove the x-axis path. The code leverages d3.v4, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Data is embedded in the script, converted from seconds to hours, and plotted with a y-axis labeled “Frequency.”

HHelen-Luwei-Zhang
86% match
Loading thumbnail…

Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, with hover highlighting on each bar. The visualization uses D3 v4 to bind the dataset, scales it from seconds to hours, and renders the bars as SVG rectangles with axes. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The bars change color on mouseover via CSS, while the data comes from an embedded inline array rather than an external file.

HHelen-Luwei-Zhang
83% match
Loading thumbnail…

Fork of Fork of Fork of Fork of bar_char 5 styles

This example renders a horizontal bar chart of UN population data for 10 countries in 2020, colored teal with labeled axes. Built with React components and D3 v5 scales, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, drawing SVG rectangles per country. The code formats tick labels using D3’s `format` function, abbreviates values (e.g., “1.2B”), and supports tooltips via SVG `<title>` elements. Data is loaded asynchronously with D3’s `csv` utility.

TTanupat B.
80% match
Loading thumbnail…

Fork of Bar Chart

This example presents a bar chart of global sales data across historical periods, rendered as an SVG with D3 version 6. It shows a default view of steel-blue bars, which transition to orange on mouse hover via D3's selection and transition APIs. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and mapped to rectangles with explicit width and height attributes.

GGuilinabaoge
80% match
Loading thumbnail…

Fork of Untitled

This bar chart displays the daily earnings of individuals, with each person’s name on the x-axis and their corresponding amount on the y-axis. The visualization uses D3 v6 to load CSV data asynchronously via `d3.csv`, then binds it to SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as static purple bars within an SVG canvas, with axis labels positioned manually via HTML divs.

VVineela Reddy
79% match
Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS-- ME

This example shows a bar chart of monthly values from a CSV file, using SVG rectangles positioned along a time-based x-axis and a linear y-axis scaled to the data’s maximum. The code loads data with `csv` from D3 v7, then uses `scaleBand` and `scaleLinear` to map each row to a bar’s position and height. A data join appends `rect` elements to the SVG, relying on the coordinate system’s top-left origin. The chart is styled minimally with CSS, which sets default margins and stroke properties.

Ddiegobrivo
79% match
Loading thumbnail…

s Fork of Untitled

This example shows an interactive, animated bar chart built with React and D3 v2, where each bar is rendered as an SVG rectangle with a drop-shadow filter. The chart uses a hierarchical data structure, displaying captions as x-axis tick labels and mapping numeric values to bar heights via `d3.scale.ordinal` and `d3.scale.linear`. Data transformation and bar layout are handled by custom functions called from a jQuery document-ready handler, with axes generated using `d3.svg.axis`. The visualization updates dynamically, though the specific dataset source is not shown in the provided code.

SSaahithi49
79% match
Loading thumbnail…

Fork of Fork of data visulization

This example shows a horizontal bar chart of country populations, using bar length to encode population values and vertical position to encode country names. The visualization renders as SVG with steel-blue bars and axes, drawing from a CSV file that is loaded asynchronously and preprocessed by multiplying population values by 1,000. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` within a React context, though the primary rendering is handled directly with D3 selections and SVG elements.

Yyingzhe-z
79% match