cheeson

@cheeson·13 public vizzes

Circles on a Map

This visualization displays global population data for the year 2018, using sized circles positioned on a natural Earth projection map. Countries are colored green or red to indicate whether they have available data. The circles are scaled using `scaleSqrt()` to map population values to radii. The code uses `geoPath` with `geoNaturalEarth1()` for the map projection, and loads data from a CSV file merged with TopoJSON world atlas features.

Aug 10, 2020

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries by economic type, with a color legend and zoomable navigation. Built with D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and TopoJSON data from the world-atlas package to render SVG country paths. A categorical `scaleOrdinal` color scale maps economic classifications to the Spectral palette. Hovering a country reveals its name and economy in a tooltip, while `d3.zoom` enables pan and zoom. The legend is generated by a custom `colorLegend` component.

Aug 10, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map visualizes global economic classifications using a color-coded world map, with a legend that filters countries by economy type. Users can click a legend category to highlight matching countries and dim others, and can click again to clear the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country boundaries from World Atlas TopoJSON and TSV data. Color assignments use d3.scaleOrdinal with the schemeSpectral palette, while d3.zoom enables panning and scaling. The SVG rendering includes hover effects that change country fill to white.

Aug 10, 2020

Loading thumbnail…

World Countries Tree

This example presents a hierarchical tree of world countries, organized by continent and region, using a horizontal layout with curved links. It visualizes geographic groupings from a local `data.json` file, with depth-based font sizing for region names versus country names. The implementation leverages D3 v5’s `tree()` layout, `hierarchy()`, and `linkHorizontal()` path generator, rendering as SVG. Pan and zoom interactions are enabled via `d3.zoom()`, while text styling uses CSS text-shadow for legibility.

Aug 9, 2020

Loading thumbnail…

Blank Canvas

This example presents a blank, rounded-corner rectangular canvas that fills the entire browser viewport. The visualization uses D3 v5 to create a single SVG `rect` element, with dimensions dynamically calculated from the `document.body.clientWidth` and `clientHeight` properties. The canvas is styled with a fixed, full-screen layout, and the D3 `select` function targets the SVG element to set its width and height, demonstrating a minimal setup for responsive SVG rendering.

Aug 2, 2020

Loading thumbnail…

Let's make a map with d3.js!

This example displays a world map rendered as SVG paths, with countries filled in pale yellow against a dark blue ocean. The code loads geographic data from the world-atlas package and uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw both the spherical background and country boundaries. It relies on the `topojson` library’s `feature` function to convert TopoJSON into GeoJSON features, which are then appended to the SVG container. The visualization demonstrates a straightforward pipeline for generating a static, projection-based map with D3.

Aug 2, 2020

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Circles representing apples animate into a row, then smoothly transition as fruit is eaten or changed. The example demonstrates animated data joins using D3 v5 selections, merging enter and update sets and applying `transition().duration()` to shift positions and radii. A time-driven script mutates the fruit array, swapping an apple for a lemon and filtering out elements, while exit transitions shrink circles to zero before removal. The SVG rendering uses ordinal scales for color and radius, keyed by unique fruit IDs.

Aug 2, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

The visualization demonstrates the general update pattern with a bowl of fruit, where apples and lemons appear, change, and disappear over time. It tracks dynamic array updates, highlighting enter, update, and exit transitions across three timed changes. The code uses d3.select, scaleOrdinal for color and radius mappings, and the selection.enter, merge, and exit APIs. SVG circles and text labels render fruits, with transitions animating radius changes over one-second intervals.

Jul 31, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the world's ten most populous countries, with countries listed vertically and population counts mapped along the horizontal axis using a linear scale. The visualization customizes both axes by removing domain lines and default ticks, applying a custom tick format that abbreviates numbers (e.g., converting 'G' to 'B') via d3.format, and adding a descriptive axis label. Built with D3 v5, the chart loads data from a CSV file, uses scaleBand and scaleLinear for positioning, and renders SVG rectangles with axes generated by axisLeft and axisBottom.

Jul 30, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top ten most populous countries, using horizontal bars ordered by population from largest to smallest. The visualization is rendered as an SVG using D3 v5, with data loaded from a CSV file. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` and `d3.axisBottom` to generate the axes. The chart’s bars are appended via a data join, with steelblue rect elements and labeled text.

Jul 30, 2020

Loading thumbnail…

Let's make a face with d3.js!

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows that move up and down, and a mouth drawn as an arc. Built with D3 v5, the example uses SVG elements like `circle`, `rect`, and `path`, with the mouth created via the `d3.arc` generator. The eyebrows transition vertically using `transition.duration`, while the face is centered using an SVG `g` transform.

Jul 30, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS, with some shapes grouped and scaled or translated. It shows how SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes such as `.lines` apply shared styling. The static composition uses raw SVG elements directly in HTML, without any JavaScript libraries, and relies on inline attributes and an external stylesheet for rendering.

Jul 29, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based report of three used cars, each listed with its year, make, model, and price, alongside a static bulleted list. The page uses plain HTML with an external stylesheet, `style.css`, which sets the body font size and family, and defines a `.highlighted` class that colors the first car entry red. The rendering approach is static document markup with no JavaScript or data-binding libraries, relying entirely on the browser’s native HTML and CSS parsing to present the data.

Jul 29, 2020