Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
Aaudreyfr
Last edited Nov 25, 2019
Created on Nov 25, 2019

This doughnut chart visualizes the number of donors across ten distinct years, from 1973 to 2016, using data embedded directly in the script. Each segment’s size and color represent the count for that year, with labels displayed outside the chart via the ChartDataLabels plugin. The visualization is rendered on a Canvas using Chart.js 2.x, configured with a legend on the right and hidden axes to emphasize the proportional data. The code also includes a separate D3.js line chart example with time-based scales and axes, though it is not displayed in this view.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Canvas Donut

A donut chart displays the population distribution across seven age groups, with each segment labeled by its age range. The visualization renders to a Canvas element using d3-shape’s `d3.arc` for the donut and label arcs, and `d3.pie` to compute the angles from tab-separated data loaded via `d3.requestTsv`. Each slice is filled with a distinct color, separated by white strokes, and age labels are positioned using `labelArc.centroid`. Data comes from the included `data.tsv` file.

Mmbostock
73% match
Loading thumbnail…

VizHub User Count Over Time

This visualization tracks the growth of VizHub’s user base from its August 2018 launch through December 2019, using a time-series line chart with green circular markers for each recorded data point. The chart encodes date on the x-axis and cumulative user count on the y-axis, revealing a steady upward trend with more pronounced growth spikes in mid-2019. Built with D3 v4, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` with `d3.curveMonotoneY` for the smoothed line. Data is loaded from a local CSV file via `d3.csv`, with each row parsed into a `Date` object and numeric user count, then rendered as SVG paths and circles.

NNita
73% match
Loading thumbnail…

Donor type

A horizontal diverging bar chart displays donor contributions divided into total actions and amounts, further segmented by COVID-19 and other purposes. Users toggle between these three aggregate views via an interactive menu. The chart uses React with D3 v6, rendering SVG via `scaleBand` and `scaleLinear`. Data loaded from a CSV file is processed in `useData`, with `Marks` drawing proportional rectangles and `ColorLegend` providing dynamic labels.

Kkragovic
73% match
Loading thumbnail…

VizHub Users Scatterplot B&W

This scatterplot displays the growth of VizHub’s user base over time, with each circle representing a recorded date and corresponding user count. The data originates from a CSV file containing dates and cumulative user totals. The visualization uses D3 v6’s `scaleLinear` for both axes, `extent` to set domains, and `axisBottom` and `axisLeft` for ticks. Circles are rendered via SVG, and the chart fills the browser window with fixed margins, using a black-and-white design for clarity.

AAndre J Denais
72% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
72% 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
72% match
Loading thumbnail…

Fork of VizHub User Count Over Time

This visualization shows the growth of VizHub's user base over time, from its launch in August 2018 to March 2021, using a line chart with circular data points. The chart incorporates annotated labels marking key milestones, such as the VizHub 1.0 release, a Kickstarter campaign, and the launch of a Datavis 2020 course, which correlate with visible upticks in users. The code builds an SVG using d3.v4, with d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3-svg-annotation for the callout labels. Data comes from a CSV file parsed with d3.csv.

Aape-ape-ape
72% match
Loading thumbnail…

linechart

This line chart tracks the growth in cumulative unique logged-in VizHub users over time, from the platform’s launch in August 2018 through early 2023. It shows the overall upward trend, with annotations highlighting notable events such as a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 course launch. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for the chart, and `d3.axisBottom` and `d3.axisLeft` for axes. It also uses the d3-svg-annotation library to add explanatory labels directly on the chart.

Yyoonsun lee
72% match