Hello VizHub

100%

✓ Published0🌍 Public

Last edited Feb 9, 2020

Created on Feb 9, 2020

A scatterplot maps the popularity of seven JavaScript frameworks, plotting years in use against GitHub stars, with circle size representing fork counts. The visualization is divided into four quadrants by reference lines, labeling categories like "In Fashion" and "Rock Stars." Built with D3 v5 and React, the code uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG elements rendered via `d3.select` and data joins. Static HTML, CSS, and a pre-bundled JavaScript file load the chart.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Sserebryanaya.n@gmail.com

80% match

Loading thumbnail…

Java Script Libraries

This example visualizes popular JavaScript libraries as circles arranged along a horizontal axis. Each circle’s area corresponds to the library’s GitHub star count, while its lightness reflects the minified file size in kilobytes, with darker colors indicating larger codebases. Hovering reveals a tooltip with the library name, star count, and size. The code uses D3’s `csv`, `scaleSqrt`, `scaleLinear`, and `max` to load and scale data from a remote CSV, then renders SVG circles with appended `title` elements for interactivity.

Sserebryanaya.n@gmail.com

78% match

Loading thumbnail…

Fork of Fork of Hello VizHub bhbj

A horizontal bar chart ranks ten countries by their population in the year 2000, using gray rectangles with blue tick lines and axis labels. The visualization loads CSV data from a GitHub URL and processes it with d3.csv, then scales the population values with d3.scaleLinear and positions the bars using d3.scaleBand. React components render the SVG axes and marks, while d3.format abbreviates tick labels (e.g., converting billions to "B"). The chart includes a "population-2000" x-axis label and provides tooltips showing the formatted population value for each bar.

Aabjalshaik02@gmail.com

77% match

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population of 20 countries in 2010, using a horizontal layout where bar lengths represent population values. Built with React and D3 v5, the visualization loads CSV data from a GitHub gist and renders SVG elements through custom ES6 modules. D3's `scaleBand`, `scaleLinear`, and `format` APIs handle axis positioning and tick labels, while interactive tooltips reveal precise population figures via SVG `<title>` elements.

IILYAS AHMED

76% match

Loading thumbnail…

Fork of Hello VizHub

A horizontal bar chart displays the population of thirty countries in 2020, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. SVG rectangles render the bars, with axes drawn from custom `AxisBottom` and `AxisLeft` components. A tooltip shows the formatted population value on hover, and the x-axis labels abbreviate large numbers (e.g., "1.2B") using D3's `format`.

Ssahaspragna6@gmail.com

76% match

Loading thumbnail…

Java Script Libraries with axis

This example visualizes JavaScript libraries as circles, mapping their GitHub Stars to the x-axis, Minified File Size to the y-axis, and using area to show star count. It uses d3.csv to load data, d3.scaleSqrt for radius, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for labeled ticks. The SVG rendering includes hover opacity changes and tooltip titles. The circles are colored using an HSL function driven by file size, creating a density-focused scatterplot.

Sserebryanaya.n@gmail.com

76% match

Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

SSeema Shrestha

76% match

Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the market share of popular JavaScript frameworks, including Vue, ReactJS, and Angular, based on values loaded from a CSV file. The chart displays each framework’s percentage via colored arcs and includes a legend with labels and values. Built with D3 v5 and React, it uses `d3.pie()` to compute arc angles, `d3.arc()` to draw SVG paths, and `scaleOrdinal` for color mapping, rendering the result as an SVG graphic.

Ggeethikal

75% match