R

RoxIv

@RoxIv·19 public vizzes

Loading thumbnail…

Women's rights score by regions

A stacked bar chart visualizes women's rights scores across six world regions, with bars extending both positively and negatively from a central axis to highlight favorable and unfavorable conditions. The chart breaks down scores by categories such as abortion, domestic violence, and property rights. It uses the D3 v2 library to render SVG rectangles grouped by series and category, with ordinal scales positioning bars and linear scales mapping values. A legend, built with `d3.legend`, identifies each category. The chart deliberately renders axes as whitespace, reinforcing the zero point and improving readability of positive versus negative areas.

Loading thumbnail…

Stacked-to-Multiples (improved)

This interactive visualization compares quarterly data across four groups, toggling between small-multiples and stacked layouts. Each group’s time series bars show raw values, with white text labels inside each bar indicating the group’s contribution per quarter, while the code accumulates these contributions into an array to reveal quarter totals. Using d3.v3, the example employs d3.layout.stack, ordinal and linear scales, d3.svg.axis, and transition.attrTween for smooth animated shifts between views. Data loads from a TSV file with date and value fields, rendered as SVG rectangles and text.

Loading thumbnail…

Women's rights score by country

This visualization shows women's rights scores for numerous countries, with positive and negative values displayed as purple and pink horizontal bars. The chart uses D3 v3 with a linear scale for the x-axis to compute bar positions and an ordinal scale with rangeRoundBands for the y-axis to arrange countries vertically. Bars extend left or right from a central zero line depending on the sign of each score, with width calculated using the absolute difference between the zero position and the value position. Data comes from a tab-separated file loaded via `d3.tsv`.

Loading thumbnail…

Women's rights group by Region Bar Chart

This grouped bar chart displays the average number of women's rights-related articles across six global regions, broken down into seven legal and social categories such as Abortion, Domestic violence, and Harassment. Each region is represented by a cluster of colored bars, with colors mapped to the different rights categories via d3.scaleOrdinal. The chart loads data from a CSV file using d3.csv, encodes the region positions with d3.scaleBand, and uses d3.scaleLinear for the y-axis. d3.axisBottom and d3.axisLeft render the axes, while a legend identifies the categories.

Loading thumbnail…

Women's rights score by country

This chart shows the women's rights score for eight countries, with positive scores in steelblue and negative scores in darkorange on a diverging bar chart. The horizontal position is determined by a `d3.scale.linear()` with its domain set by `d3.extent` and `.nice()`, while the vertical position uses a `d3.scale.ordinal()` with `.rangeRoundBands()` for each category. Data is loaded from `data.tsv` via `d3.tsv`. Rectangles are positioned conditionally so negative values extend leftward from the zero axis, and the y-axis is placed at that same zero point.

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values using horizontal bars, with positive values in steelblue extending right from the zero axis and negative values in darkorange extending left. The chart loads tab-separated data from a local file and renders it as SVG elements. Using D3 v3, the code employs a linear scale to position bars along the x-axis and an ordinal scale with rangeRoundBands for the y-axis. Two conditional logic paths compute the bar’s x-coordinate and width based on the value’s sign, while axes are drawn using d3.svg.axis.

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example demonstrates a stacked bar chart built with D3.js version 3.5.5, using the `d3.layout.stack()` API to layer six movie data series across 142 days. The visualization shows stacked rectangles representing daily values for each movie, with color encoding via `d3.scale.category10`. The chart includes custom axes rendered as SVG lines, with a numeric x-axis and y-axis displaying tick marks and gridlines. Data is loaded from an external CSV file (movies.csv) and rendered as SVG elements within a 500x500 pixel container. The code applies linear scales for positioning and height mapping, with bars drawn using SVG `rect` elements.

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example shows a stacked bar chart representing six movies’ daily ratings over a 140-day period. The chart uses the `d3.layout.stack()` API to compute stacked values for each movie, then renders them as colored rectangles within an SVG. Data is loaded from a CSV file via `d3.csv`, and axes are drawn using `d3.svg.axis()` with linear scales. The visualization uses a categorical color scale (`d3.scale.category10`) to distinguish each movie.

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example demonstrates a stacked bar chart using the D3.js library, visualizing the daily values of six movies over a 144-day period. The visualization uses the `d3.layout.stack()` API to compute the cumulative y-offsets for each data series, creating the stacked effect. The chart is rendered as an SVG with axes generated by `d3.svg.axis()`, using a linear scale for both x and y dimensions, and a discrete color scale for the movie categories. The data is loaded from a CSV file, and the chart displays stacked rectangular bars with a grid-like axis background.

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example demonstrates a stacked bar chart built with D3.js (version 3.5.5), visualizing daily ratings for six movies over 140 days. The visualization uses `d3.layout.stack()` to compute the stacking offsets for each movie’s values, then renders the bars as SVG `<rect>` elements. Axes are generated with `d3.svg.axis()`, including gridlines, while categorical colors are assigned via `d3.scale.category10()`. The chart loads data from an external CSV file (`movies.csv`), which contains integer ratings for each movie per day, and maps those values to vertical bar heights and horizontal positions.

Loading thumbnail…

Bar Chart with Negative Values

This example shows a horizontal bar chart where the x-axis is centered at zero, with positive values extending to the right in steel blue and negative values extending to the left in dark orange. It uses a quantitative linear scale (d3.scale.linear) for the x-axis and an ordinal scale with rangeRoundBands (d3.scale.ordinal) for the y-axis. The bars are positioned by computing the rectangle’s x-coordinate and width conditionally based on the sign of the value, using Math.min and Math.abs. The data is loaded from an external TSV file, and axis labels are rendered with d3.svg.axis.

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays population values for seven crime categories across several global regions, with each region’s bars color-coded by category. The chart uses `d3.scaleBand` for both the outer and inner x-axes, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for color encoding. It loads CSV data via `d3.csv`, computes column keys with `data.columns.slice`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. A reverse-ordered legend maps each category to its colored rectangle.

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for named categories, with positive bars in steelblue and negative bars in darkorange. It uses two d3 scales: a linear scale (`d3.scale.linear`) for the x-axis that is niced via `d3.extent` and `nice()`, and an ordinal scale with `rangeRoundBands` for the y-axis. Bar rectangles are positioned conditionally based on value sign, and axes are drawn with `d3.svg.axis`. Data comes from a TSV file.

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example visualizes box office data for six movies over ten days as a stacked bar chart. It uses D3.js version 3.5.5 with the `d3.layout.stack()` API to compute cumulative values from CSV data, and `d3.scale.linear()` for x, y, and height scaling. The chart renders as SVG with axis lines generated by `d3.svg.axis()`, where rectangular bars are colored using `d3.scale.category10` and positioned via the stacked layout's `y0` offsets.

Loading thumbnail…

Animated path multi-series line chart

Two time series lines, for Airbus and Boeing stock prices, animate drawing themselves across a shared date axis. Each line uses D3’s SVG path transition with `stroke-dasharray` and `stroke-dashoffset` to reveal itself over 15 seconds, with a green line for Airbus and black for Boeing. Data comes from a TSV file parsed by `d3.tsv`, and axes are built with `d3.svg.axis` and `d3.time.scale`.

Loading thumbnail…

D3 Example

This example shows the classic Iris dataset as a set of turquoise circles arranged on a simple scatter plot. The visualization uses D3.js version 3.5.5 to bind CSV data to SVG circle elements. The `a_name` function handles data joins, appending new circles, updating their x and y coordinates from the dataset, and removing any unused elements. All rendering occurs as static SVG, with the circle fill color set globally via CSS.

Loading thumbnail…

Gist 659920e73da6e8c3e3885700757a5f3d

This visualization renders the classic Iris dataset, showing the relationship between sepal and petal measurements for three flower species. The D3.js force-directed layout algorithm (`d3.forceSimulation`) positions each data point as a node in a network, with species membership encoded by color. The drawing uses SVG paths rendered via `d3.geoPath` to create a Voronoi tessellation of the measurement space, visually partitioning regions by species. The dataset is loaded directly from the embedded CSV, with each flower’s four attributes mapped to spatial dimensions.

Loading thumbnail…

Bar Chart I

This simple bar chart displays seven values from an inline JavaScript array, rendered as horizontal bars whose widths scale linearly with the data. The chart uses a basic div-based layout, where each bar is a styled `<div>` with its width set proportionally via a D3 v3 linear scale. The code employs the `d3.scale.linear()` API to map the data domain to a pixel range, and appends the divs using `d3.select().selectAll().data().enter().append()`. A dark background and turquoise bar color provide strong visual contrast.

Loading thumbnail…

Bar Chart

A bar chart displays the frequency of each letter in the English language, using data parsed from a TSV file. The visualization encodes letters along the x-axis with an ordinal scale and frequencies on the y-axis with a linear scale, formatting tick labels as percentages. Built with D3.js, it loads data via `d3.tsv`, applies margins, and draws axes with `d3.svg.axis`. Purple bars animate their height upward over one second using a `transition` on the `y` and `height` attributes, while hovering changes their fill to brown.