Nadia W.

@naddooi·7 public vizzes

Temperatures in San Francisco

This scatter plot visualizes the relationship between vehicle weight and horsepower from the Auto MPG Data Set, with each car represented by a semi-transparent teal circle. The SVG rendering uses d3.scaleLinear to map data values to pixel coordinates, while d3.axisBottom and d3.axisLeft generate labeled axes with gridlines. Titles and axis labels are added as SVG text elements, and the data is loaded asynchronously via d3.csv from a remote URL. The visualization emphasizes overall density patterns rather than individual points, highlighting correlations within the dataset.

May 9, 2020

Loading thumbnail…

Scatterplots

This scatter plot visualizes the relationship between vehicle weight and horsepower using the Auto MPG dataset from the UCI Machine Learning Repository. Each semi-transparent teal circle represents a car, positioned by scaled linear axes on an SVG canvas. The D3 code uses `scaleLinear` for coordinate mapping, `axisLeft` and `axisBottom` for labeled, grid-lined axes, and `csv` to load the remote data. The chart includes a title and axis labels, with data values parsed as numeric types. The visualization focuses on the correlation between the two continuous variables.

May 9, 2020

Loading thumbnail…

Scatterplots

This scatterplot displays the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. The chart uses circular marks along a categorical y-axis and linear x-axis, with gridlines for readability. Built with D3 v5.6.0, it leverages `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the scales and axes, while CSV data is loaded via `d3.csv`.

May 9, 2020

Loading thumbnail…

Customising Axes

This bar chart displays the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects 2017. The chart customizes its axes by removing domain lines and tick marks from the left axis, and formatting the bottom axis ticks using `format()` to abbreviate large numbers (e.g., turning "1.4G" into "1.4B") and adding a label. Grid lines are created via the `axisBottom()` tick size, while the left axis is rendered with `axisLeft()` after stripping its decorative elements. The visualization is built with d3 v5, using `csv()` to load data and `scaleLinear()` and `scaleBand()` for scaling.

May 9, 2020

Loading thumbnail…

Making a bar chart

This bar chart shows the populations of the top 10 most populous countries in 2018, based on United Nations estimates. The chart uses vertical bars with a linear scale for population and a band scale for country names. The code imports specific functions from d3 v5—including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to load the data and render the SVG elements. Bars are colored steelblue via CSS, and axes are positioned using margins and transforms.

May 9, 2020

Loading thumbnail…

Lets Make a Face with D3.js

A yellow circular face with two eyes, eyebrows, and an arc-shaped mouth is drawn using SVG elements. The eyebrows and mouth animate sequentially: first the left eyebrow lifts, then the right, and finally the mouth transitions from a thin arc to a filled semicircle. The code uses D3 v5 selections and the `arc` generator to create the mouth path, with `transition().duration()` and `delay()` chaining to sequence the animations. All shapes are positioned relative to a centered `<g>` group.

May 9, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates basic SVG shapes and styling within an HTML page titled “Cars Report.” The visualization shows circles, rectangles, lines, and a path arranged in groups, with fill colors, stroke properties, and a coordinate transform applied. It uses raw SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes for stroke styling. The rendering is static, relying on SVG’s native capabilities without any external libraries.

May 7, 2020