ihatelearning

@ihatelearning·8 public vizzes

Cars Scatter Plot

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 v6's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG circles with a fixed radius. Data is loaded from a CSV file via `csv()` and parsed into numeric values. Axes include grid lines and rotated labels, while the title and axis labels are styled using custom CSS classes.

Feb 12, 2021

Loading thumbnail…

Scatter Plot

This example visualizes the top 10 most populous countries using a scatter plot, where each circle represents a country positioned along a linear population axis and a categorical country axis. The population data is loaded from a CSV file and rendered as SVG circles. The visualization uses D3 version 6 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, with tick formatting that abbreviates large numbers and grid lines extending across the plot.

Feb 12, 2021

Loading thumbnail…

Customizing Axes

This bar chart shows the ten most populous countries, ordered by population with a linear x-axis and a categorical y-axis. The visualization customizes both axes by removing their domain lines and tick marks, adding a text label for population, and formatting tick labels to abbreviate millions as “B”. Built with D3 v6, it loads data from a CSV, scales values by 1,000 for display, and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG.

Feb 12, 2021

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart ranking the populations of ten countries, with population values scaled to thousands. It uses D3 version 6 APIs such as `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the chart as an SVG. The data is loaded from a CSV file, and the bars are drawn as SVG rectangles with a steelblue fill.

Feb 12, 2021

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn in SVG using D3.js v6. The face’s eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on an SVG group’s `transform` attribute. The mouth is created with the `d3.arc()` helper, while circles and rectangles compose the eyes and brows, all centered within an SVG canvas using a translated group.

Feb 12, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to construct simple geometric shapes—circles, rectangles, lines, and paths—using inline SVG elements within an HTML page. The visualization shows how SVG properties like `fill`, `stroke`, and `stroke-width` can be applied directly or through CSS classes, with the first row using default black fills and the second applying explicit red and green colors. A group with `translate` and `stroke` attributes renders white shapes with black outlines, while a separate `.lines` class sets a thick black stroke on line and path elements, with the path receiving a distinct teal color and rounded joins via CSS. The scene is scaled up by a factor of 1.5 using an SVG transform.

Feb 12, 2021

Loading thumbnail…

HTML Cars Report

This example shows a simple cars report listing three vehicles with their model years and prices, with the first item—the 2012 Nissan Leaf at $1800—highlighted in red. The visualization is a static HTML page styled with monospace text at a large font size. It uses plain HTML markup with a `<ul>` element and a CSS class called `.highlighted` to apply the red color, with no JavaScript libraries or data-fetching mechanisms involved.

Feb 12, 2021

Loading thumbnail…

Cars Report

This example demonstrates how to build a simple HTML page using D3.js and ES6 modules. It loads D3 version 5 from UNPKG and uses `document.getElementById` to set text content inside a `<pre>` element, displaying the message "Hello World" from `index.js`. The page also imports a second message from a local ES6 module (`myMessage.js`) and renders it. The `styles.css` file applies large, centered typography to the message container, creating a visually clean display.

Feb 12, 2021