Martin Casey

@MartinCasey·6 public vizzes

Fork of Making a barchart

This example demonstrates a horizontal bar chart ranking the populations of ten countries. It uses D3 v5’s `csv` to load data from a CSV file, then employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes within an SVG. The chart is rendered by appending `rect` elements to a group, with a steelblue fill and population values scaled by 1000.

Feb 22, 2021

Loading thumbnail…

Making a barchart

This example builds a horizontal bar chart comparing the populations of the ten most populous countries, using data loaded from a CSV file. The page renders SVG bars and axes with D3.js, employing `d3.scaleLinear` for the population values, `d3.scaleBand` for country categories, and the `axisLeft` and `axisBottom` components for tick marks. The chart uses a fixed SVG canvas of 960 by 500 pixels, with margins defined around the plotting area.

Feb 22, 2021

Loading thumbnail…

make a face in d3

This example shows a simple yellow face built from SVG shapes, with eyebrows that animate up and down in a looping transition. The code uses d3-selection to append a circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned relative to a centered group. The eyebrow animation is driven by chained `transition().duration()` calls that move the group’s transform attribute. The visualization renders entirely in SVG within a static 960×500 viewport.

Feb 13, 2021

Loading thumbnail…

svg shapes

This example shows a static collection of SVG shapes, including circles, rectangles, lines, and a path, arranged on a 960-by-500 canvas. The rendering uses plain SVG within an HTML page, with CSS controlling stroke and fill colors, including grouped elements via the `<g>` tag and a transform. Shapes are styled individually and through a `.lines` class, demonstrating how SVG attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheets for visual composition.

Feb 12, 2021

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset as a large text message on a web page. The data, defined in a local `cars.js` ES6 module, contains three car records with year, make, and price fields. The visualization imports this data using the `import` statement and uses standard JavaScript DOM manipulation to set the text content of the `#message-element` HTML element. The page loads D3 version 5 from a CDN, though the visible code does not call any D3 functions.

Feb 11, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page displaying the text "Hello HTML" in the browser, styled with CSS to center the content and enlarge the font size. It demonstrates the basic structure of an HTML document, including a `<style>` block and a `<script>` tag. The JavaScript code logs "Hello JavaScript!" to the browser’s console. The page uses no external libraries, relying instead on plain HTML, CSS, and the built-in `console.log` API.

Feb 11, 2021