Trial

100%

✓ Published1🌍 Public

Last edited Feb 16, 2020

Created on Feb 16, 2020

Forked from Scales

This example visualizes monthly revenue and profit from a JSON dataset as grouped bar charts, with revenue in tomato-colored bars and profit in green. It uses D3 v5 scales (scaleBand, scaleLinear) to position and size rectangles within an SVG. Axis labels and a legend are manually added. Data is loaded asynchronously and parsed from strings to numbers.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Update Pattern Trial

A bar chart displays monthly revenue and profit data from a JSON file, toggling between the two metrics every two seconds. Built with React and D3 v5, the visualization uses a band scale for months and linear scales for values, with axis transitions via `d3.transition()`. The update pattern joins data to SVG rectangles, animating height, position, and fill color as bars swap between tomato (revenue) and green (profit), while newly entered bars grow from the baseline.

DdeafMother

83% match

Loading thumbnail…

Scatter Trial

This animated scatter plot compares monthly revenue and profit figures from a small JSON dataset. Two overlapping SVG circle groups represent the same months, with a toggle switching the y-axis between revenue and profit every two seconds. The visualization uses D3.js v5 scales, axes, and transitions with enter/exit animations as data points shrink or disappear. React serves as the framework, with SVG elements and animation handling via D3's transition API.

DdeafMother

82% match

Loading thumbnail…

Merge Trial

This example demonstrates animated bar charts comparing monthly revenue and profit data, toggling between the two metrics every two seconds. The visualization uses D3 v5’s data join with `merge` to smoothly transition bars when data updates, including entry and exit animations. Built with React, SVG, and D3 transitions, it reads from a local `buildings.json` file and uses scales, axes, and color-coded legends for revenue (red) and profit (green).

DdeafMother

80% match

Loading thumbnail…

Tooltip And Events Trial

This example demonstrates animated bar charts comparing monthly revenue and profit data from a JSON file. The visualization toggles between the two metrics every two seconds, with bars smoothly transitioning their heights and colors using D3 transitions. It implements interactive tooltips using d3-tip, triggered by mouseover and mouseout events. The SVG is rendered using D3 v5 within a React framework, featuring axes, labels, and a legend that updates dynamically based on the displayed metric.

DdeafMother

79% match

Loading thumbnail…

Tooltip And Events Trial

This interactive visualization displays monthly revenue and profit data as animated bar charts, toggling between the two metrics every two seconds. Built with React and D3.js (v5), it uses SVG rendering with transitions to animate bar height changes and data updates. The chart includes a legend, axis labels, and an interactive tooltip powered by d3-tip that displays the current value on mouseover. The bars animate smooth transitions using d3-transition, with new elements growing from the baseline and removed elements shrinking away in blue.

KKeerthiKandadai

77% match

Loading thumbnail…

LAB5FINAL

This interactive visualization displays grouped bar charts comparing profit and revenue across seven months, with each month split into colored bars representing revenue categories. Users can drag the top of any bar vertically to modify its value, which immediately updates the displayed profit number and bar height. Built with D3 v5, the example uses `scaleBand`, `scaleOrdinal`, and `scaleLinear` to position and color the bars, while `d3.drag()` handles the interactive manipulation. A color legend, generated by a custom `colorLegend` function, identifies the revenue series, and data comes from a local JSON file rendered as SVG with smooth transitions.

Llimeroc

76% match

Loading thumbnail…

Untitled

A bar chart displays monthly revenue from a JSON dataset, with each bar representing one month from January to July. The visualization uses D3 v6 to draw SVG rectangles scaled by a linear y-axis and a band x-axis, with axis labels for "Month" and "Revenue." The code loads data via `d3.json`, formats revenue values as numbers, and renders the chart using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs.

EEmanuel Alvarado Perez

75% match

Loading thumbnail…

SVG

This example visualizes monthly sales data as a bar chart, with bars colored dark gray or red depending on whether sales exceed 20. It loads data from a local `sales.json` file and renders both bars and labels using SVG. The chart includes a linear y-axis for sales and a band-scaled x-axis for months, both created with `d3.scaleLinear` and `d3.scaleBand`, and formatted via `d3.axisLeft` and `d3.axisBottom`. The code is written for D3 v5 within a React-ready HTML page.

Jjarvis

74% match