broomc

@broomc·4 public vizzes

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart plots temperature over time with a smooth natural curve, rendered as an SVG path using d3.line and curveNatural. Axes are generated with d3.scaleTime and d3.scaleLinear, while React components structure the visualization. The teal stroke, Poppins font, and labeled axes give the chart a modern, polished appearance. Data loading relies on d3.csv within a custom useData hook.

Mar 13, 2020

Loading thumbnail…

Lets Make a face

This example demonstrates basic SVG rendering by displaying a static, empty canvas with a single paragraph of placeholder text. The page loads D3 version 5.15.0 from a CDN and logs the library object to the console, while the SVG element is defined with a width of 960 and height of 500 pixels. The code relies on standard HTML, CSS for margin removal, and raw SVG markup without invoking any D3-specific functions or data processing.

Mar 12, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic SVG shape creation and animated DOM manipulation. The face consists of yellow circle for the head, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows that move up and down using chained `transition().duration()` calls. The code uses D3 v5 selections, `append`, and attribute setters to construct the static elements, while the eyebrow animation shows how transitions can alter the `transform` attribute over time. This example highlights fundamental data-driven document manipulation without any external dataset.

Mar 7, 2020

Loading thumbnail…

Cars Report

This example demonstrates how JavaScript modules and asynchronous data fetching can generate a text-based report of cars under a given price threshold. It loads car data from a hardcoded JSON array via the `getCars()` promise, filters and formats entries using `generateReport()` and `formatCar()`, then displays the result in an HTML `<pre>` element. The code uses native ES6 features like object destructuring, `Array.filter`, `Array.map`, and template literals, with `setTimeout` simulating a delayed API response.

Mar 7, 2020