Nigel Quinlan

@nigelquinlan·6 public vizzes

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries using a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The React app loads data from the UN World Population Prospects 2019 CSV via d3.csv, then renders SVG bars using d3.scaleBand and d3.scaleLinear. The code uses d3.format to abbreviate tick labels, replacing 'G' with 'B' for billions. The chart includes styled axis labels and tooltips showing population values when hovering over each bar.

Mar 14, 2021

Loading thumbnail…

Make a face with D3

A smiling cartoon face rendered in SVG uses D3.js to draw a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth. The code imports `select` and `arc` from the D3 library, appends SVG shapes directly, and positions them using hardcoded coordinates and spacing values. The example demonstrates basic SVG shape creation and path generation with D3’s arc generator.

Mar 14, 2021

Loading thumbnail…

My Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling, including circles, rectangles, lines, and paths, arranged with CSS classes and inline attributes. It shows how group elements apply shared transformations and fill/stroke properties to multiple shapes, while specific elements override these defaults with individual colors like red and blue. The rendering uses plain SVG markup within an HTML document, with CSS selectors like `.lines` controlling stroke properties for the entire group and `.lines path` setting line joins and caps for the polyline. The visualization relies solely on native SVG and CSS, with no JavaScript libraries involved.

Mar 14, 2021

Loading thumbnail…

Perfect cars report

A report lists used cars under a $2,000 price cap from a hardcoded JSON array of five vehicle records. The interface shows an initial "Loading..." message, then renders formatted lines like "2009 Ford F150: $1950" after a simulated two-second delay. JavaScript modules `getCars` return a promise, `formatCar` structures output, and `generateReport` filters and maps data, all without external visualization libraries.

Mar 14, 2021

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, displaying each vehicle as a formatted line of year, make, model, and price. The page renders the final report in a large, centered `<pre>` element, showing only cars under $3,000 from a hardcoded JSON dataset. The code uses D3 v6 to load and display the data, while custom ES6 modules `formatCar.js` and `generateReport.js` handle data transformation and filtering. The report is generated by chaining array methods, specifically `filter` and `map`, before joining the results into a single string.

Mar 14, 2021

Loading thumbnail…

Test D3

This example shows a minimal D3 version 6 setup where the text “hello world” is displayed in the center of a webpage. The code uses plain JavaScript to select an HTML `<pre>` element and set its text content directly, with no data binding or scales involved. It relies on the D3 library only for loading the script from the CDN, while the core rendering is handled by the browser’s DOM. The page is styled with large font size and centered alignment, demonstrating a basic integration of D3 in an HTML document.

Mar 14, 2021