ruubi0807@gmail.com

Fork of HTML Starter

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `extent` to set the domain. Circles represent individual data points, colored red with partial opacity, while grid lines are generated via `axisBottom` and `axisLeft` with custom tick sizing. Axis labels and a title are appended as SVG text elements, and the data is loaded asynchronously using `csv` and parsed with numeric coercion.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries. A circle’s vertical position corresponds to the country name, while its horizontal position maps to the population value on a linear scale, with the x-axis formatted in billions. The visualization is rendered as an SVG using D3 v5, employing `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and the population values are multiplied by 1000.

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, with population values transformed from raw numbers into abbreviated labels like "1.42B" using d3.format. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with custom tick formatting and axis labels applied via d3.axisBottom and d3.axisLeft. Data comes from a CSV file, rendered as SVG rectangles with gridlines and a title, all styled through external CSS.

Making a Bar Chart

This example shows a horizontal bar chart of population data for ten countries, with bars rendered in steel blue and axes labeled with country names and population values. It imports data from a CSV file using `d3.csv` and renders SVG rectangles scaled with `scaleLinear` and `scaleBand`. The chart uses `axisLeft` and `axisBottom` to display tick marks, and applies margins via a group transform. Population values are converted from thousands to absolute numbers before rendering.

Let's make a face with D3.js!

This example builds a cartoon face out of simple SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth. The code uses D3.js v5’s `select` and `arc` functions, with the mouth generated via an arc generator based on specified inner and outer radii and angles. The eyebrow group animates up and down using chained `transition()` calls with a two-second duration, moving the transform attribute. All elements are centered within a yellow, black-stroked head on a 960×500 SVG canvas.

Shapes with SVG and CSS

A sample of SVG shapes—circles, rectangles, a line, and a path—demonstrates how CSS classes and inline presentation attributes control fill, stroke, and stroke-width. The graphic is authored in raw SVG within an HTML document, with a CSS external stylesheet applying custom styling to the `.lines` group and its path child. Shapes are arranged using SVG `g` elements with `transform` scaling and translation, showing static vector primitives without JavaScript or charting library.

HTML Cars Report

This example displays a simple car report as a bulleted list of three vehicle listings with prices, highlighting the first item in red. The page uses plain HTML and CSS, with a monospace font and large 3em text size for readability. The data appears directly in the markup rather than fetched dynamically, and styling is applied via a linked `styles.css` file using a `.highlighted` class selector.

Fork of Cars Report

This example demonstrates a text-based report that lists used cars under a $2,000 price threshold. It fetches car data asynchronously via a Promise in `getCars` and formats entries with the `formatCar` function. The `generateReport` module filters and maps the data, and the result is displayed in a `<pre>` element by updating its `textContent`. The code uses ES module imports and exports, `setTimeout` for a simulated delay, and `JSON.parse` to parse inline car data.