loisasy

@loisasy·8 public vizzes

Temperature in San Fransisco Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a single vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the data, with margins and axis labels for clarity. Data is loaded asynchronously via D3’s `csv` function from a hosted CSV file, and the SVG rendering is driven by a `select` and data join.

Jan 22, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the quantitative values and render labeled axes with grid lines. Circle elements are drawn in SVG with a red, semi-transparent fill to show data density. The data is loaded from a CSV file via `d3.csv` and values are parsed as numbers before being scaled and plotted.

Jan 22, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the ten most populous countries, with each country positioned along the y-axis and its population (in thousands) along the x-axis. The visualization uses D3 v5 APIs such as `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the plot, and renders as an SVG. Data is loaded from a CSV file via D3's `csv` function, with circle marks colored steelblue and grid lines styled via CSS.

Jan 22, 2020

Loading thumbnail…

Customizing Axis

This example customizes the axes of a horizontal bar chart showing the top 10 most populous countries, using D3 v5 with an SVG rendering. It loads population data from a CSV file and scales the values with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The code formats tick labels with `d3.format`, removes axis domain lines, and adds custom labels and a title via `axisBottom`, `axisLeft`, and SVG text elements.

Jan 22, 2020

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the ten most populous countries, with each bar’s length representing population in thousands. It uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the tick marks and labels. The SVG-based visualization loads data from a local CSV file via `d3.csv`, converts the population values with a unary plus operator, and appends rectangles to a group element with explicit margins.

Jan 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a cartoon face from basic SVG shapes—circles for eyes, rectangles for eyebrows, and a path for the mouth. The face is centered within a 960x500 SVG canvas, and the code animates the eyebrows by chaining `transition()` calls over two seconds to move them up and down. It imports `select` and `arc` from D3, using the `arc` API to generate the mouth's inner and outer radius path. The result is a simple, playful demonstration of D3’s shape creation and animation capabilities.

Jan 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and CSS classes. It shows how fill colors, stroke properties, and geometric transforms like scaling and translation affect the visual output. The code uses plain SVG elements within a React-less HTML page, with the styles.css file applying stroke width and line joins to the `.lines` group. Rendering is done entirely through the browser's native SVG support, with no additional JavaScript libraries.

Jan 20, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, displaying each vehicle’s year, make, model, and price. It first shows a "Loading..." message while data is fetched asynchronously, then lists cars under a specified price threshold. The code uses JavaScript modules, promises with `setTimeout`, and array methods like `filter` and `map` to transform JSON data. Formatting is handled by a custom `formatCar` function, with output rendered into an HTML `<pre>` element.

Jan 20, 2020