TheRedUnicorn

@TheRedUnicorn·9 public vizzes

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates, with data loaded from a CSV file. The visualization focuses on customized D3 axes, including rotated y-axis labels, a modified x-axis tick format that converts values to billions (using the `replace` method after `format('.3s')`), and a removed x-axis baseline. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, while styling is applied through CSS classes for the title, axis labels, and tick marks.

Jul 22, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map from TopoJSON data loaded from the World Atlas package, using D3’s `geoMercator` projection and `geoPath` to draw each country as an SVG path. The map features green-filled countries with black strokes, and the code demonstrates the basic data join pattern with `selectAll` and `enter().append()`.

Jul 22, 2019

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates animated data binding and SVG manipulation with D3.js. Five apples appear in a rounded rectangle bowl, then one disappears, a middle apple transforms into a lemon, and another apple is removed, with each change animated over one second. The example uses D3’s `scaleOrdinal` for color and radius mapping, `selection.enter` and `selection.exit` for managing dynamic elements, and `transition().duration()` to animate position, radius, and removal.

Jul 21, 2019

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data-binding and animated transitions in D3.js, using circles to represent apples and lemons that update over time. It shows how fruits are added, removed, and have their type changed, with each fruit assigned a unique id to track enter, update, and exit selections. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.duration` to animate position and size changes over one second. Rendering uses SVG elements driven by a `fruitBowl` function that receives a fruits array and height, with JavaScript `setTimeout` calls triggering sequential updates.

Jul 21, 2019

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects, with each circle sized at a fixed radius and colored red. It uses d3.csv to load the data, d3.scalePoint for the categorical x-axis, d3.scaleLinear for the population y-axis, and d3.axisLeft with a custom tick formatter that abbreviates large numbers (e.g., converting billions to “B”). The chart also customizes axes by removing domain lines, rotating x-axis labels, and adding a titled axis label, all rendered as SVG elements within a fixed 960×500 viewport.

Jul 21, 2019

Loading thumbnail…

Vertical bar chart

A vertical bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The bars are rendered as SVG rectangles, with a linear y-scale and band x-scale. The code customizes both axes, removing default domain lines and rotating x-axis labels, while using d3.axisLeft and d3.axisBottom with tick formatting that abbreviates large numbers.

Jul 21, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates a chart that responds to browser resizing by redrawing its content to match the available space. It shows a large green X drawn across the entire viewport, with the SVG dimensions updating dynamically as the window changes. The code uses the D3 v5 library to bind an SVG element to a fixed-position container, then recalculates the width and height from the container's `clientWidth` and `clientHeight` properties on every resize event. A `redraw()` function defines two diagonal lines and updates their endpoints via D3's selection-merging API, while a window listener triggers the redraw.

Jul 18, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—with colors applied through inline attributes and CSS classes. It shows how the `<g>` element groups shapes to share fill and stroke properties, while a scale transform enlarges the entire scene and a translate moves part of it. The code uses raw SVG markup with CSS for styling, including stroke-width, stroke-linejoin, and stroke-linecap on the line and path elements. No external libraries or data are involved; rendering is purely static SVG.

Jul 18, 2019

Loading thumbnail…

Cars Report

The Cars Report demonstrates a JavaScript data-processing pipeline that fetches car listings and generates a filtered text report. It displays car details as formatted strings, reducing the initial dataset to only vehicles priced under $2,000. The code relies on native JavaScript features including `JSON.parse`, promises with `setTimeout`, array methods like `filter` and `map`, and ES6 destructuring. A `formatCar` module constructs readable output lines, while `generateReport` orchestrates the filtering and formatting, with the result rendered into an HTML `<pre>` element.

Jul 18, 2019