ryandebattista

@ryandebattista·6 public vizzes

Cutomizing Axes

A horizontal bar chart displays population figures for ten countries, using a linear scale for bar lengths and a band scale for country labels. The code customizes the x-axis tick format with `d3.format` to abbreviate large numbers, converting 'G' to 'B' for billions. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`.

Jun 6, 2020

Loading thumbnail…

Making a Barchart

This example shows a horizontal bar chart of population counts for ten countries, using data loaded from a CSV file. The visualization maps population values to bar widths via a linear scale and country names to vertical band positions with a band scale. The code relies on D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering the bars and axes as SVG elements. Styling is applied through CSS, with bars filled in steel blue and axis text enlarged.

Jun 1, 2020

Loading thumbnail…

Let's Make a Face

A smiling face built from basic SVG shapes appears on a yellow circle, with eyebrows that bob up and down through a looping transition. The example uses d3-selection and d3-shape to construct the face, positioning eyes, eyebrows, and a mouth with coordinate offsets. An arc generator creates the mouth, while chained transition calls animate the eyebrow group’s vertical position over two-second intervals, producing a playful expression. The code renders entirely in SVG within a 960 by 500 viewport.

Jun 1, 2020

Loading thumbnail…

HTML Cars Report

This visualization demonstrates a collection of basic SVG shapes, including circles, rectangles, a line, and a path, arranged within a single SVG canvas. The graphic shows how CSS classes and inline presentation attributes control shape properties like fill color, stroke, and stroke-width. The entire SVG is scaled up by a factor of 1.5, while a translated group positions shapes in a lower row and applies a cyan fill with a black outline. The visualization uses standard SVG elements and CSS styling, with the `stroke-linejoin` property applied to the path element.

Jun 1, 2020

Loading thumbnail…

HTML Cars Report

This example presents a static HTML page titled “Cars Report” that lists three car entries with model, year, and price, highlighting the first item in red. The visualization relies on plain HTML markup with an unordered list, styled by an external CSS stylesheet that sets a monospace font at 2em and applies a `.highlighted` class for the red color. No JavaScript libraries or data-processing APIs are involved; the page is purely declarative, using only `index.html` and `styles.css` to render the report.

Jun 1, 2020

Loading thumbnail…

Untitled

This chart compares daily temperature patterns between Rome and Milan, using the "vscore" metric recorded at each hour, to visualize how heat varies across an average day in each city. The data comes from Data Canvas - Sense Your City. Two smooth basis-curve lines are drawn with d3.line, using margin and axis specifications from d3.scaleLinear, with axes generated and styled through d3.axisBottom and d3.axisLeft. The SVG canvas is positioned using D3's chained append and transform methods.

Jun 1, 2020