VinceVerspeek

@VinceVerspeek·6 public vizzes

Fork of Temperature in San Fransisco Line Chart

A fork of the Temperature in San Francisco Line Chart displays a single week of temperature readings in San Francisco, plotted over time. The visualization uses a smooth curve to connect data points, with axis labels and gridlines rendered via SVG. The code leverages d3.scaleTime and d3.scaleLinear for the scales, d3.axisBottom and d3.axisLeft for the axes, and a d3.line generator with a curveBasis interpolator for the path. Data is loaded from a CSV file using d3.csv, with timestamps parsed and temperatures converted to numbers.

Feb 1, 2021

Loading thumbnail…

Making a bar chart!

This bar chart displays the populations of ten countries using horizontal bars ordered by name. The visualization loads data from a CSV file, converts population values to numbers, and renders an SVG with D3 v6. It uses `d3.csv`, `scaleLinear` and `scaleBand` for scales, plus `axisLeft` and `axisBottom` for the chart axes. Bars are styled steelblue via CSS.

Dec 27, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example uses D3.js v6 to construct the face from circles, rectangles, and an arc-generated mouth, centered within an SVG canvas. D3 transitions drive the eyebrow animation by repeatedly updating the transform attribute of the eyebrow group. The code imports `select` and `arc` from D3, with hardcoded dimensions for the facial features.

Dec 22, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes—circles and rectangles—rendered in a web page through SVG elements, with CSS controlling their styling. A group of shapes uses default black fills, another uses explicit `fill` attributes, and a third demonstrates CSS classes to apply strokes and colors. The visualization also includes lines and a path drawn with stroke styling. The code uses plain SVG markup, CSS selectors, and hypertext markup, with all shapes placed inside an SVG canvas scaled by a factor of 1.5.

Dec 21, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple cars report rendered as an HTML page with CSS styling. It displays three car listings in a bulleted list, with the first item highlighted in red. The code uses plain HTML elements (`<h1>`, `<ul>`, `<li>`) and a linked CSS stylesheet (`styles.css`) to set the font size, family, and the `.highlighted` class that changes text color. No JavaScript or external libraries are present; the report is static markup with inline data values for each car’s year, model, and price.

Dec 21, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading and report-generation workflow. It uses a static JSON array of five cars, each with a year, make, model, and price, loaded via a promise-based `getCars` function that simulates a two-second delay. After loading, the `generateReport` function filters cars under $2,000 and formats each as a text line using `formatCar`, with the result displayed in a `<pre>` element. The code highlights ES6 module imports, including local modules and Promise handling, without any visualization library.

Dec 21, 2020