Fork of Fork of Hello VizHub

100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public

Last edited May 1, 2021

Created on May 1, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Fork of Hello VizHub

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.

Mmegshe

83% 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

80% 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

79% 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 Fork of Hello VizHub : Making circles 1

This example displays a scattered field of semi-transparent, randomly colored circles over a dark background, with each circle’s position and radius derived from random numbers. The visualization uses D3 v5 to generate the SVG elements, employing `scaleLinear` for the x and y axes, `scaleOrdinal` with `schemeCategory10` for potential color mapping, and manually computed `rgb()` strings for fill and stroke. The code also includes a large embedded SVG path, though it is not rendered in the visible output.

NNita

78% match

Loading thumbnail…

Fork of VizHub User Count Over Time

A line chart shows the cumulative number of VizHub users from August 2018 to July 2021, with circular markers at each data point. The chart uses D3 v4's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes and grid, while `d3.line` draws the path. Annotations via the `d3-svg-annotation` library highlight key events such as the VizHub 1.0 release, a Kickstarter campaign, and the launch of a Datavis 2020 course. The SVG renders the full chart and grid, with data loaded from `users.csv`.

Aarjun-lab663

78% match

Loading thumbnail…

Fork of Line Graph Figma input

This example visualizes a single bold black line winding across a white 960×500 SVG canvas, with coordinates that trace a pronounced curve from the upper-right down to the lower-left. The rendering uses raw SVG elements defined directly in the HTML, including a `clipPath` to confine the stroke, while the JavaScript entry point imports `select` from `d3` and a custom `message` from a local ES6 module to display "Hello VizHub!" on the page. The code demonstrates how to combine D3 utility functions with modular imports, though the line itself is static and not generated by D3's data-driven methods.

Aastrologyhesitant

78% match