phdiamantino

@phdiamantino·7 public vizzes

Cars Scatter Plot

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping weight on the y-axis against a user-selectable x-axis column via a dropdown menu. A dropdownMenu module updates the x-axis label and scales on selection. Using D3 v5 with SVG rendering, the code employs scaleLinear, extent, axisLeft, axisBottom, and selectable circle elements to display each car as a semi-transparent point.

Sep 19, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map uses a natural Earth projection with a color scale to display world economies, with country names and economic classifications shown as tooltips on hover. The visualization implements zoom and pan functionality through D3's zoom behavior, while a hover effect turns countries red via CSS. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON's feature method, and rendered as SVG paths using d3.geoPath with d3.geoNaturalEarth1.

Sep 19, 2020

Loading thumbnail…

Arvore

This visualization shows a hierarchical tree of world regions and countries, with each node labeled textually. The tree layout is computed using `d3.tree` and `d3.hierarchy`, with links rendered as horizontal paths via `d3.linkHorizontal`. Users can pan and zoom through the SVG using d3.zoom. Node label size scales inversely with depth, and the data is loaded from data.json, which contains a nested structure of geographic classifications.

Sep 19, 2020

Loading thumbnail…

Frutas

This example shows a row of five red apples rendered as circles in an SVG canvas, using D3.js to bind data to SVG elements. The visualization demonstrates fundamental DOM manipulation by adding circles to the SVG with the `.enter()` method and removing them with the `.exit()` method after a fruit is popped from the data array. The code uses D3 v5's `select`, `range`, and data-binding APIs to manage the lifecycle of the circles, with each circle positioned horizontally based on its index and vertically centered. The apples are initially created and then one is removed, illustrating how D3 handles dynamic data updates.

Sep 18, 2020

Loading thumbnail…

Fruta

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red, semi-transparent circles mark each car, with axes labeled clearly. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data and render the SVG chart, while the data is loaded via `csv` and processed with numeric type conversions.

Sep 18, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart showcases customized D3 axes: a horizontal axis with tick labels formatted to abbreviate millions and billions, while the vertical axis removes its domain line and tick marks. D3's `scaleBand` and `scaleLinear` position the bars, with `axisLeft` and `axisBottom` generating the axes. The SVG rendering includes styled tick lines, a title, and an axis label, demonstrating how to tailor axes for a cleaner presentation.

Sep 18, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The example demonstrates how to customize D3 axes, including formatting tick labels to abbreviate numbers (e.g., turning billions into "B") and removing default axis lines and domain marks. It uses D3 v5 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with styled tick text, gridlines, and labels. The SVG rendering includes margins, a title, and an x‑axis label.

Sep 18, 2020