Skip to main content
Log in
C

ckp8

@ckp8·8 public vizzes

Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bar heights representing the number of days within each humidity range. A dashed maroon line marks the mean humidity, and each bar displays its count value. Built with React and D3 v5, the chart uses `d3.histogram` with twelve thresholds to bin the data, `d3.scaleLinear` for both axes, and SVG elements for rendering. Accessibility features include ARIA roles on the figure, bars, and text elements, while the data loads asynchronously from a remote JSON file.

Feb 2, 2023
Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bar heights representing the number of days within each humidity range. A dashed maroon line marks the mean humidity, and each bar displays its count value. Built with React and D3 v5, the chart uses `d3.histogram` with twelve thresholds to bin the data, `d3.scaleLinear` for both axes, and SVG elements for rendering. Accessibility features include ARIA roles on the figure, bars, and text elements, while the data loads asynchronously from a remote JSON file.

Feb 1, 2023
Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bars showing the number of days in each humidity bin. The mean humidity is marked by a dashed line. The chart uses D3 v5’s `d3.histogram` and `d3.scaleLinear` to generate bins and scales, rendering SVG elements with React. It includes interactive accessibility features like ARIA roles and labels for the bars and figure.

Feb 1, 2023
Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the year's progress, using three different chart types: a progress bar, a donut chart, and a gauge. The data is derived from the current date, calculated with `d3.timeFormat`, and the visualization is rendered as an SVG within a React framework. The code defines custom components for each chart type, leveraging D3's `arc` API to generate the donut and gauge paths, while the bar uses simple SVG rectangles.

Jan 27, 2023
Loading thumbnail…

Fork of Donut

This example displays the current day of the year as a percentage, shown simultaneously in a progress bar, a donut chart, and a semicircular gauge. The three components are rendered as SVG using React, with the `d3.arc` API generating the donut and gauge paths. The progress value is computed from the date using `timeFormat` from d3, and each visualization updates dynamically based on that calculated fraction.

Jan 19, 2023
Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the total year, derived from JavaScript's `Date` object and D3's `timeFormat`. It displays this value through three distinct SVG components: a rounded progress bar, a donut chart, and a semicircular gauge. The code uses D3's `arc` generator to construct the donut and gauge paths, while React components manage the rendering. Margins and layout are handled by a custom `VizContainer` component that wraps the SVG output.

Jan 19, 2023
Loading thumbnail…

Fork of Visualizing Percentages

This visualization shows the current day of the year as a percentage using three different progress indicators: a horizontal bar, a donut, and a gauge. The percentage is computed from today’s date using `d3.timeFormat` to compare the day-of-year against the total days in the year. Each indicator is built with React components and SVG paths generated by `d3.arc`, with progress values driving the bar width, donut arc end angle, and gauge sweep. The layout is arranged using SVG groups with transforms, and the background container is toggled via a margin rect.

Jan 18, 2023
Loading thumbnail…

Fork of Visualizing Percentages

Three alternative views of the current date's progress through the year appear side by side: a rounded progress bar, a donut chart, and a semicircular gauge. Each chart displays the same percentage value, computed from the current day of year divided by the total days in the year. The code uses D3 v6 arc generators for the donut and gauge paths, along with SVG rectangles for the bar, and renders the percentage labels as SVG text elements within a React application.

Jan 18, 2023