adelgrosso

@adelgrosso·8 public vizzes

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each red, semi-transparent point representing an individual vehicle. The visualization uses D3.js v7 with the `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the axes and plot. Data is loaded from a CSV file using `csv`, and the SVG rendering is handled through D3’s selection and append methods. Axis labels and a title are added to clarify the chart’s purpose.

Aug 18, 2021

Loading thumbnail…

Scatter Plot

A scatter plot displays population sizes for the ten most populous countries, with each circle positioned along a categorical y-axis for country names and a quantitative x-axis for population. The visualization uses D3 v7, building SVG output with scales from `scaleLinear` and `scalePoint`, axes via `axisBottom` and `axisLeft`, and formatting using `format`. Data loads from a CSV file, converting population values to thousands and rendering labeled, grid-lined axes.

Aug 18, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It shows population values as horizontal bars ordered by country, with formatted axis labels (e.g., “1.41B”) and gridlines. The chart uses d3.scaleLinear and d3.scaleBand for axes, d3.axisBottom and d3.axisLeft to render ticks, and d3.format for tick labels. Data is loaded from a CSV file via d3.csv, and the chart is rendered as SVG.

Aug 18, 2021

Loading thumbnail…

Fork of Making a Bar Chart/Customizing Axis

A horizontal bar chart displays the ten most populous countries, with population values on the x-axis and country names on the y-axis. Population numbers are formatted using `d3.format`. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map data from a CSV file, with `d3.axisLeft` and `d3.axisBottom` for the axes. SVG rectangles are rendered via D3 selections, with the y-axis domain removed and grid lines drawn through `tickSize`.

Aug 18, 2021

Loading thumbnail…

Making a Bar Chart/Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. The chart customizes its axes, removing domain lines and using a D3 formatter to abbreviate large population numbers, such as converting billions to "B". The code relies on D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`. SVG rectangles are drawn to represent each bar, with the chart rendered entirely through D3’s data join and SVG manipulation.

Aug 18, 2021

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aug 13, 2021

Loading thumbnail…

Shapes with SVG

This example shows how to compose SVG shapes—circles, rectangles, lines, and a path—into a grouped, scaled illustration using plain HTML and CSS. The code directly places SVG elements with attributes for position, size, fill, and stroke, and uses nested `<g>` elements to apply `translate` and `scale` transforms. CSS classes style the line group with purple and blue strokes, while the presentation is rendered entirely via the browser’s native SVG support, with no external JavaScript libraries.

Aug 13, 2021

Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML and CSS car report listing three used vehicles with their prices, with the first entry highlighted in orange. The page uses a simple unordered list styled with a monospace font at a large size, and applies a `.highlighted` CSS class to emphasize the 2012 Nissan Leaf. The underlying code is plain HTML and CSS, with no JavaScript libraries or data visualization APIs involved. The styling is defined entirely in an external stylesheet linked from the main document, showcasing foundational web rendering without any dynamic data binding or interactive features.

Aug 13, 2021