Skip to main content
SimilarExport ZIP
100%

Bar Chart

✓ Published0🌍 Public
CCoreyBurkhart
Last edited Mar 20, 2017
Created on Mar 19, 2017

A bar chart visualizes the frequency of Reddit post domains from a single page of r/all, sourced from a local data.json file. It displays the count of occurrences for each domain, such as i.imgur.com, using vertical bars that change color on hover. The visualization uses d3.v4's scaleBand for the x-axis, scaleLinear for the y-axis, and axisBottom/axisLeft to render axes. Data is processed with JSON.parse and a custom reduce function, with SVG rectangles positioned via margin and barScale calculations.

AI-generated description

Frequency of reddit post domains for one page of reddit.com/r/all

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Bar chart

A bar chart displays categorical values with six colored, semi-transparent rectangles. The visualization maps lettered categories (A through F) to numeric values, with axes labeled and gridlines rendered via D3's SVG axis API. It uses `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis range, while `d3.svg.axis` generates the ticks. Rectangles are appended and styled with `d3.scale.category10` colors, and the data comes from an inline array of objects with `x` and `y` properties.

DDDDDDanica
78% match
Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman
75% match
Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock
74% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes live activity from Reddit’s r/all feed, plotting posts along two quantitative axes to reveal patterns in upvote scores and engagement. Each circle encodes a post, with its position determined by score metrics and its size reflecting comment counts or other magnitude. The visualization, built with D3 v4 and rendered as SVG, uses a simple scatterplot layout to highlight outliers and clusters within the data. The chart includes axis labels and a lightweight grid to aid in reading values, while the data is pulled directly from a JSON representation of the Reddit API response.

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

Bar Chart in D3.js

This example visualizes the frequency of words extracted from news texts as a horizontal bar chart. The bars are colored orange and display their numeric quantity at the end of each bar. The chart is rendered using D3.js v6 with an SVG approach, utilizing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. The data is loaded from a CSV file using `d3.csv`.

Yyuridrcosta
74% match
Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo
74% match
Loading thumbnail…

Bar Chart

A bar chart displays data through vertical bars rendered as SVG rectangles. The chart uses D3 version 6 to select the SVG element and retrieve its width and height attributes from the HTML. The example runs within a React framework, with the SVG dimensions set to 930 by 430 pixels. The code initializes the visualization by importing the `select` function from D3, though it does not yet define the specific data or bar rendering logic.

Ccarmela-anzelmo
73% match