nobbak

@nobbak·5 public vizzes

Happy face :)

A cheerful, hand-drawn-style face rendered as a yellow circle with black outlines, two eyes, and a curved smile, all built with D3 v5. The eyebrows blink repeatedly via chained `transition().duration()` calls that move them up and down every two seconds. The smile is drawn using the `d3.arc` path generator with specified inner and outer radii and angles. This static SVG animation demonstrates basic shape composition and timed attribute transitions in D3.

Oct 13, 2019

Loading thumbnail…

HTML CSS SVG

This example shows a simple, static car brand report as an HTML page with a bulleted list of makes, highlighting Honda in red via CSS. It does not visualize data with charts or graphs. The visualization relies on basic HTML structure, an external stylesheet (style.css) with monospace font styling, and a CSS class selector for emphasis. The page is defined in index.html.

Oct 13, 2019

Loading thumbnail…

Bar chart: Customize axis

This bar chart displays the population of the ten most populated countries using UN 2018 data, with population values scaled by thousands. Horizontal bars are sorted by country name, with axis labels customized through the `axisLeft` and `axisBottom` APIs from d3. The visualization uses `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. All elements are rendered as SVG, with the data loaded asynchronously via `d3.csv`.

Oct 13, 2019

Loading thumbnail…

Bar chart!

This bar chart displays the population of the ten most populated countries, with data from the UN’s 2018 World Population Prospects. Horizontal bars are sorted by country name along the y-axis, while x-axis lengths encode population values. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map values, and render SVG axes. Population figures are multiplied by 1,000 during preprocessing, and steel-blue rectangles represent each country’s population.

Oct 13, 2019

Loading thumbnail…

HTML CSS SVG

This example demonstrates how SVG shapes and CSS styling combine within an HTML document. It shows circles, rectangles, lines, and a path, with some shapes grouped together and styled with attributes like fill, stroke, and stroke-width. The rendering uses raw SVG elements, while CSS classes such as `.lines` apply strokes and line joins to grouped paths. The code uses basic SVG APIs and CSS selectors to control visual properties.

Sep 24, 2019