Beaupe

@Beaupe·15 public vizzes

Bar Chart: stripped easier

This bar chart displays the frequency of letters in the English language, using vertical bars sorted alphabetically along the x-axis with a linear y-axis for percentage values. The chart is rendered in SVG with D3.js (version 3.5.5), employing `d3.tsv` to load the data, `d3.scale.ordinal` for the x-position encoding, `d3.scale.linear` for the y-position, and `d3.max` to compute the domain. It includes hover styling where bars turn brown. The axes are drawn using `d3.svg.axis` with conventional margins.

Nov 8, 2015

Loading thumbnail…

Bar Chart: stripped easier

This bar chart displays the frequency of letters in the English language, with each letter represented as a steelblue bar that turns brown on hover. The chart loads data from a TSV file using `d3.tsv`, parses the frequency values, and encodes the x-position with `d3.scale.ordinal` and the y-position with `d3.scale.linear`. Axes are rendered via `d3.svg.axis`, and the domains are computed using `d3.max`. The SVG output uses conventional margins and a 10px sans-serif font for the axis labels.

Nov 7, 2015

Loading thumbnail…

Jitter Line

A sketchpad visualizes a continuous line whose path is updated as the mouse moves. The line is rendered with a "jittery" effect, where each point is randomly displaced by a controllable amount, creating a fuzzy, animated trail. A tail-length slider adjusts the number of points retained, while a color picker changes the stroke color. The visualization uses d3.svg.line with basis interpolation and animates via requestAnimationFrame, with the Dat GUI providing interactive controls.

Nov 7, 2015

Loading thumbnail…

Jitter Line

A dark, interactive sketchpad displays a white, jittery line that follows the mouse cursor, leaving a trailing path of points. The line’s vertical position is randomly perturbed each frame, creating a trembling, organic effect while maintaining a smooth, interpolated curve. Built with D3.js v3, the visualization renders an SVG path updated via `requestAnimationFrame`, with a `dat.GUI` control panel allowing real-time adjustment of jitter strength, tail length, and line color. Mouse and touchmove events drive the point array, which is capped to a fixed tail length for a fading trail effect.

Nov 7, 2015

Loading thumbnail…

Mergesort II

This animation visualizes the mergesort algorithm sorting 200 shuffled values. The two subarrays currently being merged are displayed in black, while inactive lines are gray. Each line represents a value, with its vertical position indicating which temporary array it occupies and its rotation encoding the value. The code implements the sorting logic and action queue in JavaScript, then uses d3.v3 transitions with 75ms duration to animate each copy and swap operation as SVG line elements.

Nov 7, 2015

Loading thumbnail…

Word Tree

This word tree visualizes the shared phrases and word sequences found in State of the Union speeches, showing repeated linguistic patterns as branching paths from a central root word (“safety”). The visualization uses a dendrogram layout created with the `d3.layout.tree` API, rendering nodes as small circles and connections as diagonal links via `d3.svg.diagonal`. Each node is labeled with its corresponding word, and the SVG output is generated from a JSON dataset (`sotu.json`) loaded with `d3.json`. The tree’s structure reveals how certain words lead into common follow-up phrases, highlighting recurring rhetorical constructions across the speeches.

Nov 7, 2015

Loading thumbnail…

Circle Pack

A circle packing diagram visualizes the distribution of student attributes, with each circle representing a student and nested circles grouping them by grade, ethnicity, and gender. The color of each circle reflects its deepest categorical level: grade, ethnicity, or gender. The visualization uses `d3.layout.pack` for the circle layout and `d3.layout.partition` to generate legend bars for the ethnicity and gender categories. It animates transitions with `transition().duration(1000)` and supports zooming on double-click, pulling data from a `students.json` file.

Nov 7, 2015

Loading thumbnail…

Difference Chart

This visualization compares public approval, disapproval, and undecided ratings for multiple U.S. presidents by aligning their time in office along a common axis. It renders three separate charts side-by-side, each showing two presidential terms overlaid. The chart uses filled red and blue areas to highlight where one president’s rating exceeds the other’s, with dark red and dark blue lines tracing each individual series. The code uses D3 v3 with `d3.time.scale` and `d3.svg.area` to interpolate between sampled data points from CSV files. Data is sourced from the UCSB presidency popularity dataset.

Nov 7, 2015

Loading thumbnail…

Line Chart

This visualization shows the approval ratings of multiple U.S. presidents over time, plotting separate lines for George W. Bush and Barack Obama. The view uses a time-scaled x-axis and a linear y-axis from 0 to 90, with a grid and tick marks on the right. The code loads data from CSV files, including presidential popularity data, and renders the two lines with D3 v3’s `d3.svg.line` and `d3.time.scale`. The SVG chart is drawn inside a 500x1500 pixel canvas, with the source data cited.

Nov 7, 2015

Loading thumbnail…

Gender Inequality Indices

This scatterplot shows the relationship between women’s educational attainment (x-axis) and their share of parliamentary seats (y-axis) across countries, with each circle colored by region using a category20 scale. Hovering reveals a country’s name and parliamentary share via a tooltip. Built with D3 v3, the SVG visualization uses d3.scale.linear for both axes, d3.svg.axis for tick formatting, and loads data from a local CSV file.

Apr 25, 2015

Loading thumbnail…

Gender Inequality Indices

A horizontal bar chart shows the share of parliamentary seats held by women across countries, sorted from highest to lowest percentage. D3 v3 loads the CSV data, sorts it, and renders SVG rectangles scaled by the value. The code uses `d3.scale.linear` for the bar widths, `d3.scale.ordinal` for country positions, and `d3.svg.axis` for labeled axes. Hovering a bar reveals a tooltip with the country name and its exact value.

Apr 23, 2015

Loading thumbnail…

Gender Inequality Indices

This visualization displays the percentage of parliamentary seats held by women for each country, ranked in descending order as a horizontal bar chart. The bars are rendered as SVG rectangles, with each bar's length proportional to the country's share of seats. The chart uses D3 version 3, fetching data from a local CSV file containing UN gender inequality data. Hovering over a bar reveals a tooltip with the country name and its exact parliamentary share percentage.

Apr 13, 2015

Loading thumbnail…

Gender Inequality Indices

This visualization shows the share of parliamentary seats held by women for each country in the dataset, displayed as a horizontal bar chart sorted in descending order. Each bar’s length is proportional to the percentage value, and hovering over a bar reveals the country name and exact figure via a tooltip. The chart is rendered as SVG using D3 version 3, with data loaded from a CSV file and sorted using the `d3.descending` comparator. The data originates from data.un.org.

Apr 13, 2015

Loading thumbnail…

Loading Europe Population Projections

This example presents static population projections for European countries from 2010 to 2030, loaded from a CSV file. It shows two abstract circles and connecting lines as placeholders, with the data fetched using d3.csv and logged to the console. The visualization uses D3 v3 to read the external data file, while the initial SVG shapes are hardcoded. The page displays a simple title but does not yet bind the data to any visual elements, serving as a starting point for a future chart.

Apr 9, 2015

Loading thumbnail…

Human Development Indices: A statistical update 2013 | United Nations Development Programme, source data.un.org

This visualization maps the Gender Inequality Index across countries, using color to represent index values and revealing geographic patterns of inequality. It loads data from a CSV file containing the 2013 Human Development Indices. The map is rendered using D3.js, with a geographic projection and path generator (`d3.geoPath`) to draw country boundaries. A sequential color scale encodes the index value for each country, and a legend provides a reference for interpreting the colors.

Apr 6, 2015