claire1801

@claire1801·4 public vizzes

Bowl of Fruit

A bowl of fruit visualization renders five identical red apples as circles arranged horizontally across an SVG canvas. The code uses d3.select and d3.range from D3 v5 to generate the dataset, then appends SVG circle elements with fixed positioning and a uniform fill color. Each circle is placed at increasing x-coordinates, creating a simple linear layout without interaction or animation. The visualization demonstrates basic data binding with d3's enter/append pattern in a React framework context.

Feb 7, 2020

Loading thumbnail…

Cars Scatter

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5 to render an SVG, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` to generate tick marks and grid lines. Data from the auto-mpg.csv file is loaded via `csv`, and circles are appended with a fixed radius of 18 pixels, styled red with partial opacity. Axis labels and a title are positioned manually within the chart's margins.

Feb 7, 2020

Loading thumbnail…

Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, using a horizontal layout with circular markers instead of traditional bars. The visualization is rendered as an SVG using D3 v5, with `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for ticks. Data is loaded from a CSV via `d3.csv`, with population values multiplied by 1,000. Axis tick labels are formatted with `format` to abbreviate large numbers using suffixes like “B” for billions.

Feb 3, 2020

Loading thumbnail…

Cars Report

This example shows a text-based car report listing vehicles priced under $2,000, formatted with year, make, model, and price. It uses a simulated asynchronous data source via a `Promise` with a 2-second `setTimeout` delay. The React-free implementation relies on `getCars` to load JSON data, `generateReport` to filter and map entries, and `formatCar` for string formatting. The report is rendered into a `<pre>` element using vanilla JavaScript DOM manipulation.

Jan 24, 2020