PhilRG

Circles on a Map

This visualization displays global population data for 2018 using circles positioned on a natural Earth projection map. The area of each circle encodes a country’s population, and hovering reveals exact values alongside the country name, while pan and zoom controls allow exploration. The map is rendered as SVG using d3.geoPath with TopoJSON world data, while population values are loaded from a CSV. Circle sizes derive from a d3.scaleSqrt, and a custom legend communicates scaling. The example also includes a color legend component and employs d3.zoom for interactivity.

May 31, 2020

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. Customized axes are the focus: the x-axis is formatted with tick labels like “1.41B” and grid lines, while the y-axis labels have no tick marks or domain line. The chart uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand`, and custom styling via CSS classes for the title, axis labels, and tick text.

May 18, 2020

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. Built with D3 v5, it customizes the axes by removing default domain lines, applying a tick format that converts "G" to "B" for billions, and styling tick labels and grid lines via CSS. The left axis uses `axisLeft` with scaleBand, while the bottom axis uses `axisBottom` with scaleLinear and negative tick lengths to create gridlines. Population values are multiplied by 1000 to convert from thousands.

May 18, 2020

Selecting a Year on a Line Chart

A line chart displays population over time for multiple regions, with a vertical line marking a selected year. Users can hover anywhere on the chart to update the selection, which triggers a re-render of the visualization. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw the chart, while a `mouse` event on a transparent `rect` calls `setSelectedYear` to change the year. The data comes from UN population estimates and medium-variant projections, loaded via `csv` and processed with `nest`, `descending`, and a custom `melt` function. The rendering is SVG-based, with a color legend created by `colorLegend` and axes styled via CSS.

Melting Data for Multiple Lines

This visualization displays population over time by region, with a multi-line chart that sorts regions by their final population values. The data is melted from wide-format United Nations CSV files into tidy long-form rows using a custom function that iterates over years. The code uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and a custom color legend module. Animated axis labels and a title are rendered as SVG elements.

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, with each city represented by a distinct colored line. The chart uses a time-scaled x-axis and linear temperature scale, with legend and axis labels for readability. Built with D3 v5, the code employs `d3.line` with `curveBasis` for smooth paths, `d3.nest` for grouping by city, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from Data Canvas - Sense Your City, rendered as SVG in an HTML page.

Scatter Plot with Menus

This scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset. Users can select which dataset columns to map to the X and Y axes using two dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisLeft`/`axisBottom` for ticks, and a custom `dropdownMenu` component. Circles are rendered as SVG elements. When axes change, the plot updates with a 2-second animated transition, where each circle moves to its new position with a staggered `transition.duration` and `delay`.

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses ordinal color encoding, with a legend that lets users click color swatches to filter countries by economic group. Non-matching countries dim to low opacity, and the selected legend item highlights its corresponding category on the map. The visualization is built with D3 v5, using `d3.geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas files, with SVG rendering for all elements.

May 16, 2020

Choropleth Map

This choropleth map colors countries by economic classification using a categorical ordinal scale with the spectral color scheme. The visualization includes an interactive color legend with circles and labels, and supports zooming and panning through d3.zoom. Geographic shapes are rendered via d3.geoPath with a natural Earth projection using TopoJSON data from the world-atlas dataset, with country metadata loaded from TSV. Hovering highlights individual countries in red via CSS.

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5: a color legend using an ordinal scale for categorical data (apple, lemon, lime, orange) and a size legend using a square-root scale for continuous numeric values. The color legend renders colored circles with text labels, while the size legend generates circles whose radii correspond to tick values, filtering out zero. Both legends are implemented as reusable functions that append SVG groups, using `scaleOrdinal` and `scaleSqrt` to map data domains to visual properties, with spacing and text offsets controlled by configuration props.

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. Each country appears as a text label positioned according to its depth in the hierarchy, with curved link paths connecting parent and child nodes. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute the layout, while d3.zoom enables panning and scaling of the SVG graphic. The data comes from a JSON file grouping countries under regions like Asia and subregions such as Southern Asia.

Cheap Tricks for Interaction

This interactive map displays world countries and uses an equal-earth projection to render the globe. Hovering over a country changes its fill color to red, providing immediate visual feedback. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 for map projection, while d3.zoom enables pan and zoom interactions. Country names come from a TSV file matching ISO codes, and geographic boundaries use TopoJSON data transformed via the `feature` function. The SVG output includes a styled sphere background and nation paths.

World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with text labels sized by depth. The tree layout uses D3’s `tree` layout with `linkHorizontal` paths, rendered as SVG. Zooming is enabled via `d3.zoom` on the root group, and the data is loaded from a local JSON file using `d3.json`. Country names are drawn with font size decreasing by depth, using the Playfair Display font.

World Countries Tree

Bowl of Fruit - General Update Pattern Special Cases

The example demonstrates the general update pattern in D3 by animating changes to a bowl of fruit, showing apples and lemons as colored circles with labels. It uses D3 v5's `data()` with enter, update, and exit selections to add, remove, and modify fruits over timed intervals. The code applies `selection.merge()`, ordinal scales for color and radius, and SVG rendering with `circle` and `text` elements, while the fruit data is defined in plain JavaScript arrays.

Bowl of Fruit - Click to Select

Five apples rendered as red circles sit in a row within an SVG, and clicking any of them selects it, adding a black outline. The React component uses D3’s `scaleOrdinal` for color and radius mappings, with state managed via `useState` to track the selected fruit. Rendering is direct SVG circle generation, driven by the `FruitBowl` component. The code includes commented-out D3 transitions for potential future animation.

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths on a blue spherical globe projection. It uses D3 v5’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country boundaries, with TopoJSON’s `feature` method converting the world-atlas 110m dataset into GeoJSON. The code appends a background sphere path, then loads country data from a remote URL and enters it into the SVG. Country strokes are semi-transparent black, with no interactivity or labels.

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each car represented by a semi-transparent red circle. The visualization uses d3.scaleLinear to map the data to x- and y-axes, with gridlines drawn via d3.axisBottom and d3.axisLeft. The svg rendering includes axis labels and a title, while the data is loaded from a CSV file using d3.csv.

May 14, 2020

Temperature in San Francisco Line Chart

This line chart displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` path generator to render the smooth maroon trend line over a grid of light gray ticks. The data is loaded as CSV from a remote URL and parsed into `Date` and numeric values. The chart is drawn as an SVG with margins, axis labels, and a title, based on a tutorial by PhilRG.

May 14, 2020

Let's make a face with D3.js!

This example builds a smiley face with D3.js, including a yellow circle head, eyes, and a mouth, while animated eyebrows move up and down and shift side to side in a looping transition. The code demonstrates basic DOM manipulation and SVG rendering using D3 v5 selection and attribute methods, alongside the `arc` generator to create the mouth path. A timed `transition` chain, with 2000-millisecond durations, animates the eyebrow group’s transform, changing its vertical and horizontal position, while colored rectangles serve as the eyebrows. The face is centered in an SVG with a green background.

May 13, 2020

HTML test

This example demonstrates a styled HTML list alongside two SVG canvases, each containing a single circle. The visualization uses D3 v5.9.2 via `d3.select('svg')` to dynamically change the background color of all SVG elements to pink, overriding an inline blue style on one canvas. The page uses a monospace font from CSS and applies a blue color to a list item with the class `wawa`. The SVG elements include a `transform` attribute that translates them, though no interactive behavior is shown.

May 12, 2020

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled directly with CSS classes and inline attributes. The scene shows grouped elements with shared fill and stroke properties, plus a separate group for lines with custom stroke widths and rounded joins. Rendered as an SVG document within an HTML page, it uses the SVG standard and CSS for presentation, with no JavaScript libraries involved. The code sets a 960×500 viewport and scales the entire group by 1.7.

May 11, 2020

Cars Report

The Cars Report visualization displays a simple text report of car-related data, formatted as a list of coordinates and nested values. The page renders a large, pre-formatted message area above a React application root, where the report text is generated by parsing a JSON string of vehicle data. The code uses React for the main application framework, while a custom JavaScript module parses the data and formats each entry using a mapping function that extracts and concatenates the x, y, and z values into a readable string with the word “voila”. The report is displayed directly in the HTML `<pre>` element.

May 11, 2020