Fork of Fork of Butter Macronutrients

100%

Fork of Fork of Butter Macronutrients

✓ Published0🌍 Public

Last edited Aug 14, 2025

Created on Aug 14, 2025

A reusable D3.js v7 bar chart demonstrates how a chart function can render and update between two datasets. The visualization displays categorical labels on the x-axis and numeric values on the y-axis, with color-coded bars for each category. A button click triggers a toggle between the two sample datasets, clearing the existing SVG and re-rendering with the new data. The code uses D3 scales (`scaleBand` and `scaleLinear`), axis generators (`axisLeft`, `axisBottom`), and selection methods to build the SVG chart programmatically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Butter Macronutrients

This example shows a reusable pie chart that displays two different macronutrient datasets, toggled by a button. The chart renders SVG arcs with white text labels at each slice’s centroid, using `d3.pie()` and `d3.arc()`. It demonstrates a function-based reusable chart pattern with getter/setter methods for width, height, value, label, and color scales. The `d3.schemeCategory10` ordinal scale assigns colors to slices, and the button switches between the two sample datasets.

224cs077@kpriet.ac.in

85% match

Loading thumbnail…

Fork of Fork of Blank Canvas

This example demonstrates a fork of a fork of a blank canvas, presenting two distinct bar chart visualizations. The first chart renders a simple dataset with values 4, 8, 15, 16, 23, and 42 using D3 v7's `scaleLinear` and `select`/`selectAll`/`append` APIs to draw rectangles and text labels on an SVG canvas. The second chart uses the Chart.js library to display categorical vote counts in a bar format with semi-transparent background colors and border styling. Both charts are drawn to an HTML canvas element, with the page's styles defining a fixed, full-viewport layout.

Aagopu@nd.edu

81% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This bar chart visualization uses D3 v7 to render categorical data as vertical bars. The code defines an SVG container and employs D3’s scale functions and axis generators to map data values to pixel positions, creating a simple, clean chart. The chart is initialized within an HTML page that includes a header and a dedicated chart div. While the data itself is not defined in the provided code, the structure suggests a straightforward mapping from input values to bar heights using standard D3 selection and data-join methods.

Yyashaswisanjanaaerra@my.unt.edu

80% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple bar chart visualizing a small dataset of five numeric values, rendered as sky-blue rectangles with white value labels. It uses D3.js (version 7.8.5) to create an SVG container, bind data to rectangles via `selectAll().data().enter().append()`, and set each bar’s height and position based on its value. The code also leverages method chaining with `.attr()` to configure dimensions, colors, and text properties, with all rendering occurring client-side in the browser.

PPriyank Singh

80% match

Loading thumbnail…

Fork of D3.js

A fork of D3.js renders a simple bar chart of regional values using SVG rectangles styled with a purple fill. The chart fetches data from a local JSON file via the Fetch API, while also parsing a second dataset embedded as a global variable through a script tag. It uses d3.scaleBand for the x-axis positioning and d3.scaleLinear for the y-axis, with padding applied to separate the bars. The visualization demonstrates a basic data-binding workflow with D3 v5, though the chart shows no axes or labels beyond the bar heights.

JJuanmaBV

79% match

Loading thumbnail…

Fork of Reusable Barplot

This fork of a reusable barplot shows grouped bars comparing element quantities—like Nitrogen, Oxygen, and Helium—across fruit categories (Banana, Apple, Mango, Orange). Built with D3 v7, it uses `scaleBand` for x-axis grouping, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. Animated transitions via `transition()` and `axisBottom`/`axisLeft` render the SVG. Interactive legend labels toggle bar visibility by filtering data and re-rendering the chart through the custom `toggleBars` handler.

SSubhendu Karmakar

78% match

Loading thumbnail…

Fork of 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.

VVamsiYandapalli

78% match

Loading thumbnail…

Fork of Simple Bar Chart

This fork presents three D3.js v7 bar chart visualizations positioned side by side, comparing agricultural and economic data. It shows relationships between crop production, input costs, inflation rates, and profits through merged datasets. The code uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for axes, plus `d3.axisBottom` and `d3.axisLeft` to render the chart framework. Bars are colored steelblue and turn orange on hover, with SVG rendering handling the display.

CCowan Kanga Wekesa

78% match