smosgasbord

@smosgasbord·4 public vizzes

Scatter Plot

This scatter plot displays the top 10 most populous countries, with each country’s population plotted along the horizontal axis and its name along the vertical axis. The visualization uses D3 v6 with an SVG rendering approach, leveraging `scaleLinear` and `scalePoint` for axes, and `csv` to load population data from `data.csv`. The chart includes custom tick formatting via `format('.3s')` and styled grid lines, with circles colored steelblue on a yellow background.

Mar 9, 2021

Loading thumbnail…

Test-Barchart

A bar chart displays the ten most populous countries, with population values plotted horizontally and country names along the vertical axis. The chart uses `d3.csv` to load population data from `data.csv`, converting the strings to numbers before rendering. `d3.scaleLinear` maps the population domain to pixel width, while `d3.scaleBand` positions the categorical country labels. SVG `rect` elements are drawn with heights set by the band’s `bandwidth()`, and axis ticks are generated via `d3.axisLeft` and `d3.axisBottom`, with custom tick formatting using `d3.format`. The background is styled yellow via inline SVG styling.

Mar 9, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes using `d3.axisBottom` and `d3.axisLeft` with tick formatting that converts large numbers to abbreviated forms. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map population and country names, with grid lines and styled tick labels. Data is loaded from a CSV file using `d3.csv`, and the visualization is rendered as an SVG.

Mar 8, 2021

Loading thumbnail…

Test

This example shows a simple animated face built entirely with D3 version 6. A blue circle serves as the head, with two white eyes that blink by moving up and down via chained transition calls, each lasting 300 milliseconds. A mouth is drawn using the d3.arc function with configured inner and outer radii and specified start and end angles. All shapes are rendered as SVG elements within a 400x400 canvas, centered using a group transform.

Feb 6, 2021