Petter-Smit

@Petter-Smit·6 public vizzes

SanFranTemperature

This scatterplot visualizes the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual car. The visualization uses d3.csv to load the auto-mpg dataset, then applies d3.scaleLinear to map the data to x and y coordinates. It renders the chart as an SVG using d3.axisBottom and d3.axisLeft for the axes, with gridlines and axis labels. The circles are semi-transparent steelblue points, and the chart includes a title and margin-based layout.

Dec 27, 2022

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between car weight and horsepower using data from the auto-mpg dataset. Each semi-transparent steelblue circle represents a car, plotted by D3.js v5 with `scaleLinear` axes and axis labels. The code uses `csv` loading, `extent` for domains, and `axisBottom`/`axisLeft` to render gridlines and ticks. The SVG rendering includes a title and rotated y-axis label, with margins defining the inner plotting area.

Dec 27, 2022

Loading thumbnail…

Scatter plot

A scatter plot displays the ten most populous countries, with population on the x-axis and country names on the y-axis, using circles to represent each data point. The visualization loads CSV data and uses d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft to render the chart in SVG. Population values are formatted in billions using d3.format. The chart includes a title, axis labels, and grid lines created through tick sizing.

Dec 27, 2022

Loading thumbnail…

Bar Chart.js!

A horizontal bar chart displays the top 10 most populous countries from a CSV file using D3 v5. The chart uses `d3.scaleBand` for y-axis categories and `d3.scaleLinear` for population values, with formatted tick labels converting values to billions. Bars are rendered as SVG rectangles in steel blue, with axis labels and a title included. The code loads data via `d3.csv` and applies a custom tick format to abbreviate large numbers.

Dec 27, 2022

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiling face is drawn entirely with D3.js SVG shapes, including a circular head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows and left eyebrow rectangles move up and sideways in a looping 2000-millisecond transition, while the mouth uses the d3.arc generator with specified inner and outer radii and angles. The code selects the SVG element, centers a group via translation, and applies chained transitions to animate the facial features.

Dec 26, 2022

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data pipeline that fetches car records, filters them by price, and displays a formatted text report in the browser. The code uses a `Promise` with `setTimeout` to simulate a two-second delay, JavaScript’s `Array.filter` and `Array.map` for data processing, and ES module imports/exports to organize functions across multiple files. The final output is rendered into a `<pre>` element containing lines like “2012 Nissan Leaf: $1800,” showcasing clean separation of data retrieval, formatting, and report generation.

Dec 26, 2022