Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Aug 6, 2021

Created on Aug 6, 2021

This visualization displays the number of messages and shares over time as a grouped bar chart. The data, spanning from July 2020 to July 2021, is rendered as SVG with D3.js v5. It leverages `d3.scaleBand` for the axes and `d3.scaleOrdinal` for colors, with interactive tooltips on mouseover. The chart includes rotated x-axis labels and a legend, while the code imports `select` from D3 and uses local modules and a CDN-loaded D3 library.

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…

Fork of Fork of Hello VizHub

A line chart tracks daily message counts over one week, with each day marked by a black-outlined circle and a blue "note" label. The visualization uses d3.line with curveMonotoneX to smooth the path, d3.scaleTime for the x-axis, and d3.scaleLinear for the y-axis. Data is generated randomly from category arrays and parsed dates, rendered as an SVG with styled axes and grid lines. The code imports custom axis classes to build the chart.

MMarcelo

83% match

Loading thumbnail…

Fork of Hello VizHub

A line chart displays weekly message totals across four service categories, with individual data points for sent messages overlaid as circles and text labels. The visualization uses D3 v5 with SVG rendering, constructing scales via `d3.scaleTime` and `d3.scaleLinear`, drawing the line with `d3.line` and `d3.curveMonotoneX`, and generating axes through `d3.axisBottom` and `d3.axisLeft`. Data is randomly generated from predefined category ranges in the `useData.js` module.

MMarcelo

83% match

Loading thumbnail…

Fork of VizHub User Count Over Time

A line chart tracks VizHub's cumulative user count from its August 2018 launch through March 2021. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.line` to draw the path. Data points are marked with circles, and each includes a tooltip via SVG `title` elements. The chart also incorporates the `d3-svg-annotation` library, though no annotations are configured in the visible code, and the data comes from `users.csv`.

MMarcelo

80% match

Loading thumbnail…

Fork of Untitled

This example tracks the cumulative number of VizHub users since the platform’s launch on August 14, 2018. It displays a streamgraph where stacked, colored areas represent user growth over time, with a moving vertical cursor that highlights the current date. The visualization uses D3’s `d3.stack()` and `d3.area()` to construct the layered paths, while `d3.brushX()` and a custom `d3.scaleTime()` axis enable interactive time-window selection. Data is loaded from a local CSV file and rendered as an SVG with smooth transitions between brushed states.

CChristian

79% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a foundational D3.js bar chart using a hardcoded array of five values. It builds vertical bars by binding the dataset to `div` elements and setting each bar’s height dynamically with a custom scale factor. The code imports the `select` function from D3 via ES6 modules and uses `d3.select`, `.data`, `.enter`, and `.style` to create the visualization. A separate local module exports a text message, while the HTML file includes D3 v5 from UNPKG.

CCrystal Lee

79% match

Loading thumbnail…

Fork of Fork of VizHub User Count Over Time

An annotated SVG line chart tracks cumulative VizHub user growth from launch in August 2018 through January 2021. The visualization highlights specific events linked to user spikes, including the VizHub 1.0 announcement, a Kickstarter campaign, and the Datavis 2020 course launch. The code builds scales, axes, and the line using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with curveMonotoneY. D3 annotation adds contextual notes. Circles mark individual data points, with d3-svg-annotation providing the event labels.

Vvivekananth-code

78% match

Loading thumbnail…

Fork of VizHub User Count Over Time

This line chart shows the growth of VizHub user accounts from its August 2018 launch through July 2021. The SVG visualization uses d3.line and d3.scaleTime/scaleLinear to plot user counts over time, with annotated milestones including a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 launch. Data from users.csv is loaded and rendered with d3.axisBottom and d3.axisLeft, while d3-svg-annotation adds contextual notes highlighting notable growth periods.

OOmar Hamad

78% match

Loading thumbnail…

Fork of VizHub Count Over Time

This line chart shows the cumulative growth of registered VizHub users from August 2018 to March 2022. The visualization uses d3.v4 with SVG rendering, a time-scaled x-axis and linear y-axis, and includes annotated notes marking significant events like the VizHub 1.0 launch and a Kickstarter campaign. Data comes from a CSV file with date and user count columns, and the chart employs d3.line and d3.axisBottom/axisLeft for the plot and axes.

Eeravellisaimeghana

78% match