LGBY4

@LGBY4·11 public vizzes

Transition Graph 2.0

This dashboard visualizes frequency data across six categories, such as Compliance and Shareholder Information, for each state. A histogram displays the total frequencies by state, while mouseover events update a pie chart and legend to show category breakdowns for the selected state. The code uses D3 v3 with SVG, leveraging ordinal and linear scales, d3.svg.axis, and transition methods to animate the updates.

Jun 21, 2017

Loading thumbnail…

Transition Graphs

This interactive dashboard visualizes the distribution of six document types across multiple U.S. states using a bar chart, pie chart, and legend. Hovering over a bar filters the pie chart and legend to show the proportional breakdown of those document types for that state. Built with D3 v3, the visualization uses `d3.scale.ordinal` and `d3.scale.linear` for axes, SVG for rendering, and animated transitions for the bar heights and pie segments. Data is sourced from a gist and processed from frequency objects per state.

Jun 21, 2017

Loading thumbnail…

Test Wrap 6

A bar chart displays the number of issues associated with various Ascender-related legal entities, grouped by their country of registration. Each bar's height encodes the numeric value from the TSV data source, while hover interaction uses `d3.tip` to reveal the specific count and country for each bar. The visualization is rendered as SVG, using `d3.scale.ordinal` for the horizontal axis with a custom text-wrapping function to handle long entity names on the x-axis, and `d3.scale.linear` for the vertical axis. The chart is styled with CSS classes for bars, axes, and the tooltip, and it is built with D3.js version 3.

Jun 21, 2017

Loading thumbnail…

TEST WRAP 5

This bar chart visualizes the number of issues associated with various company entities, with each bar’s tooltip revealing the specific country. Rendered as an SVG using D3 version 3, it employs an ordinal x-axis scaled into banded ranges. Long company names are wrapped into multiple lines on the x-axis via a custom `wrap` function that uses `tspan` elements, and the y-axis uses a linear scale. The chart loads its tab-separated data asynchronously with `d3.tsv`, and interactive tooltips are implemented using the `d3-tip` library.

Jun 21, 2017

Loading thumbnail…

TEST WRAP 4

This bar chart displays the number of issues associated with various company entities, grouped by country, using data loaded from a tab-separated values (TSV) file. Rendered as scalable vector graphics (SVG) with D3.js v3, the visualization uses an ordinal x-scale, a linear y-scale, and `d3.svg.axis` for both axes. Hovering over a bar triggers a tooltip created with the `d3-tip` library to show the exact issue count and country. The x-axis labels are wrapped onto multiple lines with a custom `wrap` function to accommodate long company names.

Jun 21, 2017

Loading thumbnail…

TEST WRAP 3

This chart displays the number of issues per company from a tab-separated data file, with company names on the x-axis and frequency counts as bar heights. The bars render in SVG using `d3.svg.axis` for axes and `d3.scale.ordinal` for positioning, with text wrapping applied to long company labels. A tooltip is implemented via `d3-tip`, and hover effects change bar color. The chart includes a title and uses a linear y-scale with percentage ticks.

Jun 21, 2017

Loading thumbnail…

TEST WRAP 2

This bar chart displays the number of issues per company from a tab-separated data file, with company names on the x-axis and issue counts on the y-axis. Each bar is rendered as an SVG rectangle with a steelblue fill that turns brown on hover. The visualization uses d3.svg.axis for both axes, a custom wrap function to handle long company names, and the d3-tip library for tooltips, though the tooltip content is only partially implemented.

Jun 21, 2017

Loading thumbnail…

Wrap Long Labels Bar Chart

This example uses D3 v3 to create a horizontal bar chart with wrapped axis labels. It displays the number of issues per company from a tab-separated data file, with each bar’s frequency shown on hover via the d3-tip plugin. The chart applies an ordinal x-scale and linear y-scale, formatting the y-axis ticks as percentages. Long company names are automatically broken into multiple lines using a custom `wrap` function that checks text length against the bar width, and the SVG rendering includes styled axes, hover color changes, and a bold title.

Jun 21, 2017

Loading thumbnail…

fresh block

This example shows a horizontal bar chart of the number of issues per company, with company names on the x-axis and value counts on the y-axis. Long company names are wrapped onto multiple lines using a custom `wrap` function that splits text and creates `tspan` elements. The chart is built with D3 v3, using an ordinal scale for the x-axis, a linear scale for the y-axis, and SVG rectangles for bars. The data is loaded as TSV from `data.tsv`, and a `d3-tip` tooltip is attached for mouseover interactions, though its content is currently left empty.

Jun 21, 2017

Loading thumbnail…

D3 Logo

This example displays the D3.js logo as a purely vector-based SVG graphic. It defines a custom path, assigned the ID "deethree", which encodes the logo's shape through a series of arc and line commands. The graphic is first rendered as a thick black outline using a `<use>` element with a stroke, then duplicated with a white fill. The implementation directly leverages the SVG `<defs>` and `<use>` tags within the HTML markup, with no JavaScript libraries involved.

Jun 21, 2017

Loading thumbnail…

TEST

A stacked and grouped bar chart compares police killings by race across six months, with radio buttons letting viewers toggle between the two layouts. The data is loaded from a CSV and pivoted in JavaScript into per-race monthly counts. Built with D3.js (version 3.5), the visualization uses `d3.layout.stack` for the stacked arrangement, ordinal and linear scales, and animated transitions—including a delayed bar growth and a timed automatic switch from stacked to grouped after two seconds—to smoothly shift between modes.

Jun 20, 2017