jf1978

@jf1978·7 public vizzes

Simple Wordcloud

A simple wordcloud renders a short list of words in an SVG layout. The code uses the `d3.layout.cloud` plugin to compute word positions and rotations, with a fixed font size of 60 pixels. Words are drawn as SVG `<text>` elements, centered within a 450x450 area. The example also demonstrates loading external CSV data via `d3.csv` (imported from D3 v5), though that data is not used in the cloud itself.

Jun 3, 2020

Loading thumbnail…

Scatter Plot w. 2 Quantitative Attributes

A scatter plot displays the relationship between two quantitative attributes, population and price, for three countries. Each circle represents a country, with its position determined by these values and its size scaled by mileage. The visualization uses D3 v5 to load CSV data from a Google Sheet and render an SVG. It employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the data mapping occurs through the `csv` and `select` functions.

Jun 3, 2020

Loading thumbnail…

Sequences sunburst

The Sequences sunburst visualizes hierarchical web navigation paths, showing how visits progress through pages like home, product, and search. Hovering over a segment highlights its ancestors and displays the percentage of total visits that follow that sequence in a breadcrumb trail. Built with D3 v3, it uses `d3.layout.partition` to compute arc positions and `d3.svg.arc` for rendering. The code loads CSV data via `d3.text` and `d3.csv.parseRows`, applies custom colors per segment, and uses opacity transitions and `mouseover`/`mouseleave` events to fade unrelated paths.

Jun 2, 2020

Loading thumbnail…

Scatter Plot w. 1 Ordered Attribute

This scatter plot shows the land area of Sweden, Greenland, and the US as circles on a linear x-axis and categorical y-axis, with gridlines marking each tick. The code uses D3 v5’s `csv` loader, `scaleLinear` and `scalePoint`, and `axisBottom`/`axisLeft` to render the SVG. Circles receive a fixed radius, and the x-axis formats values with `.1s` notation. The chart reads from `data.csv`, which contains country names and sizes in square kilometers.

Jun 2, 2020

Loading thumbnail…

Customizing Axes

The graphic compares the land sizes of Sweden, Greenland, and the US using horizontal bars, drawn as SVG rectangles scaled with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The chart customizes both axes: the left axis has its domain and tick lines removed, while the bottom axis removes its domain line, adds gridlines via d3.axisBottom with d3.format(".1s") tick labels, and includes a manual "Population" label. Data is loaded from data.csv using d3.csv, and rendering is handled through d3.select and SVG element appends.

Jun 2, 2020

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of country sizes, using D3 v5 with an SVG rendering approach. The chart maps country names to the y-axis and size values to the x-axis using `scaleBand` and `scaleLinear`, with axes added via `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed with `d3.csv`, and bars are rendered as rectangles with a steelblue fill.

Jun 2, 2020

Loading thumbnail…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jun 2, 2020