JustinS1209

@JustinS1209·7 public vizzes

Customizing Axis (own)

This example shows a horizontal bar chart of country populations using D3 v5, with a custom-styled y-axis and numeric labels for each bar. The chart loads population data from a CSV file, scales the values to a linear x-axis and a banded y-axis, and renders filled steel-blue rectangles via SVG. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with margins and a translated group element to position the axes and bars.

Aug 3, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic geometric shapes—circles, rectangles, a line, and a path—rendered within a single SVG canvas. It shows how presentation varies: shapes appear both with default black fills and with explicit `fill` attributes, while a group applies a unified light-blue fill and black stroke. The example uses plain SVG markup alongside CSS to style elements, specifically targeting elements with the `.lines` class to set stroke color and width, and further styling the path within that group. A `transform` scales the entire composition.

Aug 2, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three vehicles with their prices, using plain HTML and CSS without any JavaScript libraries. It shows static text data directly embedded in the markup, with the top item, the 2012 Nissan Leaf, highlighted in red via the `.highlighted` CSS class. The page uses the `monospace` font family and a large `3em` font size, with `styles.css` controlling all visual styling. No external APIs or visualization libraries are present; the render relies solely on browser default document flow.

Aug 2, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to integrate D3.js with VizHub's modular setup. It uses D3's `select` method to target a div element and set its text content. The code imports a custom `message` variable from a local module and the `select` function from D3 v5, demonstrating both external and local module imports. The page is styled with a Google Fonts Ubuntu typeface, a dark blue background, and large centered text. The visualization is minimal, showing a single text message rather than a complex data-driven chart.

Aug 2, 2019

Loading thumbnail…

making a barchart

A yellow smiley face rendered as SVG elements centers on a black-stroked circle, with two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back down via chained `transition` calls, creating a blinking effect. The visualization uses d3.v5 selection methods and the `arc` generator to construct the mouth path, with dimensions calculated from the SVG's height and width attributes.

Aug 2, 2019

Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

Aug 2, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled directly through CSS and inline attributes, using circles, rectangles, lines, and paths within a single graphic. It shows how fill colors, stroke widths, and line joins are applied both via presentation attributes and a linked stylesheet. The code uses plain SVG elements inside a `<g>` container with transforms for scaling and translation, while the `.lines` class in CSS configures black strokes and rounded line caps. No data source is involved; the illustration focuses purely on static SVG rendering techniques.

Aug 2, 2019