junge870214

@junge870214·7 public vizzes

Ordinal Scatter Plot

A horizontal dot plot displays the population of the top ten most populous countries in 2018, using data from United Nations World Population Prospects 2017. The chart maps each country to a static y-axis position via `scalePoint` and its population to the x-axis with `scaleLinear`, rendering circles of equal radius in SVG. It employs `axisLeft` and `axisBottom` for labeled axes, with tick sizes extending across the plot. The visualization uses d3.v5's `csv` loader, `format` with a `G` to `B` replacement for tick labels, and CSS-driven styling for fonts and gridlines.

Jan 21, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot visualizes the population of the top 10 most populous countries, using a linear x-axis for population values and a categorical y-axis for country names. The d3.js v5 code employs `scalePoint` for the ordinal axis, `scaleLinear` for the numeric axis, and renders the data as circles using SVG. Data is sourced from the United Nations' 2018 World Population Prospects, loaded via `csv()`. Grid lines and axis labels are styled through CSS, with population formatted in billions using `format('.3s')`.

Jan 21, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries in 2018, sourced from the United Nations World Population Prospects. The horizontal bars are ordered by country name, with a linear x-axis and a banded y-axis. The code uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to draw axes, while custom tick formatting converts large numbers into abbreviated units like “B” for billions. The x-axis gridlines extend across the chart via negative tick sizes, and the axis labels and title are styled with CSS.

Jan 21, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG shapes with D3.js v5, including two eyes, a mouth created via the `d3.arc` generator, and rectangular eyebrows. The eyebrows animate upward and back down over two sequential two-second `transition` calls on their containing group’s `transform` attribute. The code demonstrates fundamental DOM manipulation by selecting the root `svg` element, appending groups, and positioning shapes with absolute coordinates derived from the viewport dimensions.

Jan 21, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jan 21, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jan 11, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path rendered within an SVG element scaled by a factor of 1.7. The code uses inline SVG attributes like `cx`, `cy`, `r`, `x`, `y`, and `transform` to position shapes, while CSS classes define stroke properties for the line and path elements. Fill colors are applied both directly via SVG attributes and through a `<g>` group with a hexadecimal value. No data source is present; the visualization purely illustrates SVG geometric primitives.

Jan 11, 2019