vivekananth-code

@vivekananth-code·4 public vizzes

Fork of Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load United Nations World Population Prospects 2019 data. The d3.format function customizes axis tick labels, while native SVG `<title>` elements provide tooltips on hover.

Jan 25, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized horizontal bar chart displays the ten most populous countries, using data from the United Nations World Population Prospects 2019. The visualization employs React and D3 v5, with SVG rendering. `d3.scaleBand` positions the bars vertically, while `d3.scaleLinear` and `d3.max` scale the population values. A custom `tooltipFormat` shows the population on hover. The chart uses a Poppins font, a teal fill for the marks, and includes a customized axis with `d3.format` to abbreviate large numbers.

Jan 25, 2021

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.

Jan 25, 2021

Loading thumbnail…

Fork of VizHub User Count Over Time

This line chart shows the cumulative number of VizHub users from August 2018 to January 2021, with annotations marking key milestones such as the VizHub 1.0 release and a Kickstarter campaign. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveMonotoneY` for the path, and `d3.svg.annotation` to add contextual labels. Data comes from a CSV file with date and user count fields.

Jan 25, 2021