YR2388

@YR2388·4 public vizzes

Happiness Score for Top five Countries

This bar chart displays the happiness scores for six countries, with Finland and Denmark leading at scores of 7.769 and 7.600 respectively. The visualization uses a black bar for each country, arranged categorically along the x-axis, with the happiness score plotted on the y-axis. Built with React and D3 v5, the example renders through a custom `VizContainer` component that follows the margin convention. The chart is generated using the C3 library, which wraps D3 functionality, and the data is loaded via `chart.load` with hardcoded column values. The React framework handles the component structure while C3 manages the SVG rendering.

Apr 12, 2021

Loading thumbnail…

JS Bin

This example generates a bar chart of happiness scores for six countries using the c3 library, which is built on D3.js v5. The chart is bound to a DOM element with the class "chart" via the `c3.generate` method, and it displays categorical country labels on the x-axis and numerical happiness scores on the y-axis. Bars are rendered in black with a legend, and the data is explicitly loaded again through the `chart.load` API. The visualization demonstrates how to quickly create a static bar chart with custom colors, axes labels, and multiple data-binding steps using c3’s high-level interface.

Apr 12, 2021

Loading thumbnail…

Fork of A Bar Chart(Platform)

The visualization shows total video game sales across platforms, with a bar chart for each platform and a dropdown menu to switch between global, EU, JP, NA, and other regional sales. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis. The data is loaded from a CSV via D3’s `csv` parser, with axes and marks generated as React components.

Apr 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of average fuel efficiency values across several countries, with bars colored on a blue gradient and mouseover interactions that highlight bars in yellow. It uses the Vega-Lite API to generate a scatter plot of auto MPG data from the UCI Machine Learning Repository, encoding horsepower, weight, and origin. The visualization is rendered with D3.js v5, using SVG elements and scales, with animated transitions on mouseout events.

Apr 12, 2021