jamesbnorman

@jamesbnorman·4 public vizzes

Customizing Axes

This example shows a horizontal bar chart comparing bot-generated versus human search phrases. The bars are colored steel blue, with a custom y-axis listing phrase names and a formatted x-axis displaying counts. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to render the axes. The x-axis tick format uses `format(".2s")` to abbreviate large numbers and replaces 'G' with 'B'. Data is loaded from a CSV file via `csv`, and the chart renders to SVG.

Feb 27, 2020

Loading thumbnail…

Cars Scatter PLot

This scatter plot visualizes phrases from a dataset, plotting each phrase’s count against a binary bot indicator. Points transition into place with a duration of one second, and axes include tick marks extending across the plot. The visualization is built with React and D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick generation, and SVG circles for rendering. Data is loaded from a CSV file, with numeric fields parsed before being passed to the render function.

Feb 27, 2020

Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive, collapsible tree diagram, serving as a JSON explorer and picker. The visualization shows nested data structures with node labels indicating type and value, such as `object {` or `array [`. It uses d3.v5 with the `tree` layout, `hierarchy`, and `linkHorizontal` for the SVG rendering. Pan and zoom via d3.zoom enable navigation. The sample data is a hardcoded JSON object with error and response properties.

Feb 23, 2020

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. Built with d3.v4, it uses the d3.cluster layout to position nodes in a circular arrangement, with SVG paths connecting parent and child nodes. The visualization supports panning and zooming interactions through d3.zoom, and text labels are rotated and sized based on their depth within the hierarchy, with the data sourced from a nested JSON file.

Feb 23, 2020