Lucasj01UK

@Lucasj01UK·8 public vizzes

D3.js map tricks

This example demonstrates an interactive world map built with D3.js, rendered as SVG, and integrated into a React framework. It visualizes country boundaries using Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with data sourced from the World Atlas TopoJSON files. Map features include zoom and pan controls implemented with `d3.zoom`, hover effects that change country fill colors, and tooltips showing country names derived from TSV metadata. The visualization also displays a styled ocean sphere and uses `topojson.feature` to convert TopoJSON into GeoJSON for rendering.

May 28, 2020

Loading thumbnail…

Make a map with D3.js

This example visualizes world country boundaries as filled polygons on a natural Earth projection, rendered as SVG. It uses D3.js v5 with `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate the path data, and `topojson.feature` to convert TopoJSON country data from the world-atlas dataset. The ocean sphere is drawn first, followed by country shapes, with distinct fill colors for each. The map displays 110m-resolution country outlines loaded asynchronously via a JSON promise.

May 28, 2020

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize both the x- and y-axes of a bar chart, using D3 v5 within a React framework. The chart displays population data by age band, sourced from a local CSV file, and renders bars as SVG rectangles with a steelblue fill. The y-axis uses `scaleBand` for categorical age ranges, while the x-axis uses `scaleLinear` with a custom tick format that abbreviates large numbers (e.g., converting "G" to "B" for billions) via `format('.2s')`. Axes are drawn with `axisLeft` and `axisBottom`, with their domain lines removed for a cleaner look, and custom labels and titles added as SVG text elements.

May 21, 2020

Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries in 2018 using a horizontal bar chart. It demonstrates customizing axes by removing default domain lines, adding tick lines across the chart, and formatting population labels with abbreviations. The visualization uses React with D3 v5, employing `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and `format` for tick labels. Data is loaded from a CSV file and rendered as SVG rectangles with steelblue fills.

May 20, 2020

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of country populations, with bars sorted by descending population and labeled along the left axis. The visualization uses D3 v5 within a React framework, rendering to SVG. Population values from the included `data.csv` are parsed and scaled using `scaleLinear` and `scaleBand`, with axes generated via `axisLeft` and `axisBottom`. Bars are appended as SVG rectangles, and styling is applied through CSS.

May 20, 2020

Loading thumbnail…

Make a face with D3.js

This example uses D3.js v5 to draw a stylized face in an SVG canvas, consisting of a yellow circular head, two eyes, and a mouth formed by an arc path. The animation shows the eyebrows moving upward and then returning to their original position, driven by D3's transition system over a four-second duration. The code leverages D3's `select`, `arc`, and chainable `.transition()` methods, with coordinates centered via a transform group, while the SVG is set up in an HTML page alongside React-oriented starter files.

May 19, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled using CSS. It shows the default black fill, explicit fill attributes like `fill="red"`, and inherited properties from a `<g>` element with `fill="blue"` and `stroke="black"`. The `.lines` class applies stroke styling to line and path elements, with a red path using `stroke-linejoin: round`. The visual hierarchy progresses from unstyled shapes to attribute-based coloring, then to CSS class overrides, all within a scaled and translated SVG coordinate system.

May 18, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML page displaying a cars report, listing three vehicles with their prices in British pounds. It uses plain HTML with an unordered list, marking the first item as highlighted in red via a CSS class. The styling, defined in an external stylesheet, sets a large monospace font for the body. The code relies on standard HTML elements and CSS rules rather than any JavaScript libraries or data visualization APIs.

May 18, 2020