Skip to main content
SimilarExport ZIP
100%

Playground ApexCharts

✓ Published0🌍 Public
IIan
Last edited Mar 10, 2023
Created on Mar 10, 2023
Forked from Hello VizHub

This example displays a horizontal range bar chart comparing the timelines of two individuals, Bob and Joe, across Design, Code, and Test phases. It uses the ApexCharts library to render the visualization, with moment.js formatting the duration labels on each bar, such as “4 days.” The chart features gradient-filled bars, a datetime x-axis, and a top-positioned legend, demonstrating how ApexCharts handles time-based categorical data.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
64% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
64% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
64% match
Loading thumbnail…

Overlapped Barchart3

This visualization displays five time periods as overlapping horizontal bars on a timeline, with each bar's width representing the date range and height reflecting the data value (a percentage). The chart uses React to manage state and D3 v6 APIs (`d3.json`, `d3.scaleTime`, `d3.scaleLinear`) to parse dates from a JSON file (`timeperiodv2.json`) and map them to SVG rectangles. The bars, drawn in semi-transparent green, overlap to highlight how different survey periods (e.g., NFHS3, RSOC, CNNS) compare chronologically and by value, while axes and grid lines are generated from D3’s tick functions.

AAnimesh Nautiyal
63% match
Loading thumbnail…

Timelines Chart

This timelines chart shows multiple parallel time-series, grouped into distinct sections, with each segment colored to represent a value. The visualization supports both heatmap-style continuous coloring and categorical qualitative coloring. Users can explore the data by zooming and panning, or scrubbing through a timeline brush at the bottom. The example uses the `timelines-chart` D3 component, populating it with randomly generated data via the `getRandomData` function, which constructs groups, labels, and time ranges.

MMNoichl
63% match
Loading thumbnail…

Bar chart

This example shows a horizontal bar chart with a time-based x-axis and categorical y-axis, displaying progress along a timeline for crew groups. The bars are rendered with a fixed green fill, and the x-axis includes a custom tick format with negative tick sizes. The code uses D3 v5 APIs including `scaleTime`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and loads data from a local CSV file via `d3.csv`. An SVG container with specific width and height dimensions is selected using `d3.select`.

Eelaine-xiao
63% match
Loading thumbnail…

Overlapped Barchart7

This example combines a timeline bar chart with an overlaid line graph to show changes in percentage values across five survey periods from 2005 to 2020. Each green bar spans its corresponding date range, with labels above and hover tooltips revealing exact start and end dates. A green path, generated using `d3.line`, connects the bar midpoints to emphasize the downward trend. Built with React and `d3.scaleTime` and `d3.scaleLinear`, the SVG renders axes, ticks, and bars from the timeperiodv2.json data, with `d3.timeParse` handling date conversion and CSS transitions animating tooltip opacity.

AAnimesh Nautiyal
63% match
Loading thumbnail…

D3 Playground

This visualization shows the duration of a software build over time, with each point representing a one-hour timestamp from March 2015. The y-axis displays duration in minutes, while the x-axis shows the date. The visualization uses D3 v5, loading data from a CSV file and rendering as an SVG with circles for each data point. It uses D3 scales (`scaleTime`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and the `extent` function to compute domains. Grid lines, axis labels, and a title are drawn within the SVG, with styling provided by an external CSS file.

JJoseph Burns
63% match