JoshuaBruens

Cars Scatter PLot

A scatter plot displays the relationship between horsepower (x-axis) and weight (y-axis) for a dataset of cars from the 1970s–1980s. Each circle represents a vehicle, with a transition animating its entrance over one second. The visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.axisLeft and d3.axisBottom for gridlines and labels. Data is loaded from a CSV file via d3.csv and parsed to numeric values, with SVG circles rendered in a React starter setup.

Feb 27, 2020

Area Plot World Population

This area plot visualizes world population growth from 1950 to 2015, showing a steady upward trend. Built with D3 v5 in a React framework, it uses `d3.area` with `curveBasis` to generate a smooth filled path, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. Circles animate in with a transition, and the SVG renders axis grids with tick lines and labels.

Line Plots and Area

This example shows a week of hourly temperature readings in San Francisco as a smooth area chart, with individual data points highlighted as semi-transparent circles. It uses D3 v5 to load the CSV data, and scales time and linear values with `scaleTime` and `scaleLinear`. The area and line paths are generated with `area()` and curve interpolation, while axes are drawn using `axisLeft` and `axisBottom`. Circles are rendered via SVG and animated with a `transition` for a staggered appearance.

Scatter PLot

This scatter plot visualizes the populations of the ten most populous countries using a linear scale for population and a point scale for country names. The visualization loads data from a CSV file and animates the appearance of circles over one second. Built with D3 v5 and React, it renders SVG elements, including axes with formatted tick labels and grid lines. The code uses `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart.

Custom Axes

Animated bar chart displays the top 10 most populous countries using a CSV data source. Population values are formatted in billions with a custom tick formatter, while the y-axis removes gridlines and domain lines for a cleaner look. The visualization uses React with D3 v5 features including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and transitions on SVG rectangles.

Bar Chart

This bar chart displays the populations of the ten most populous countries, with horizontal bars ordered by country name. The visualization reads population data from a CSV file and renders it as SVG using React and D3 v5. The code leverages D3’s `csv` loader, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to generate the chart’s axes.

Lets make a face!!!!!

A yellow circular face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas. The eyebrows animate vertically, moving up and down repeatedly using D3 transitions with a 1000-millisecond duration. The face is assembled from SVG primitives including `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` function. The code uses d3-selection to append elements and d3-transition to animate the eyebrow group's transform attribute.

Shapes with SVG and Css

This example demonstrates basic SVG shapes—circles and rectangles—arranged in a grid and styled with CSS. The shapes use distinct solid fills, while a separate group applies stroke properties to lines and a path, illustrating how CSS classes can style SVG elements. The visualization uses raw SVG markup within an HTML document, with styling defined in an external stylesheet. The React framework is present via a starter script, though the rendering is handled directly through SVG elements.

Cars Report Fork

This example lists three used cars with prices and highlights the 2000 Honda Accord in red. The page uses JavaScript bundled from React, as referenced in the starter code, to render the static list from the HTML. Styling is handled via CSS, with the `.highlighted` class applying the red color to the first item. The `<pre>` element is present to display a message, though no dynamic interaction is implemented in the shown code.

Cars Report

This example displays a text-based report of cars filtered by price, showing formatted entries such as "2000 Honda accord: $2600" in a large <pre> element. The page initially shows a "Loading..." message while a Promise from `getCars()` waits two seconds before resolving with a hardcoded JSON array of car objects. After resolution, the `report` function filters cars using `Array.filter`, formats each with a template literal, and joins them with newlines. The React framework is present in the starter code, though the core logic uses plain JavaScript Promises and DOM manipulation via `document.getElementById`.