tgma99

@tgma99·9 public vizzes

Temperature in San Francisco Scatter

This scatter plot visualizes temperature readings in San Francisco over several days in March 2015, using time on the x-axis and temperature in degrees on the y-axis. Each red semi-transparent circle represents an hourly measurement, with the encoding created through D3 v5’s `scaleTime`, `scaleLinear`, and `extent` functions. The SVG rendering includes custom axes with gridlines via `axisLeft` and `axisBottom`, plus labels for the time and temperature dimensions. The data comes from a local CSV file, which is parsed and converted to proper date and numeric types before rendering.

Jun 17, 2022

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes temperature and timestamp data from a CSV file, displaying weight against horsepower with time on the x-axis and temperature on the y-axis. The visualization uses D3 v7 with `csv()`, `scaleLinear()`, `axisBottom()`, and `axisLeft()` to render SVG circles with a steelblue fill and 50% opacity. The chart includes labeled axes, gridlines, and a title, with margins and a fixed SVG canvas size of 960 by 500 pixels.

Jun 15, 2022

Loading thumbnail…

Scatter plot

This scatter plot displays the ten most populous countries, with countries arranged on the vertical axis and population counts plotted horizontally. The visualization uses D3 v7 with SVG rendering, employing `scaleLinear` for the population axis, `scalePoint` for country ordering, and `axisBottom` and `axisLeft` for gridlines. Data is loaded from a CSV file and rendered as steel-blue circles, with population values formatted in abbreviated units using D3’s `format` function.

Jun 14, 2022

Loading thumbnail…

Bar chart

This bar chart visualizes the population of the top ten most populous countries, using horizontal bars to compare values. The chart reads population data from a CSV file and renders it as SVG. It employs D3 scales (`scaleLinear` for the x-axis, `scaleBand` for the y-axis) to map the data, with axes generated via `axisBottom` and `axisLeft`. Bar widths are set proportionally to population via the linear scale, with a tick label formatter that abbreviates numbers (e.g., converting billions to "B").

Jun 13, 2022

Loading thumbnail…

Making a face

A smiling face made of SVG shapes animates inside a yellow circle. D3 v7 transitions shrink and regrow the right eye, while both eyebrows shift downward and then return. The mouth is drawn with the `d3.arc` path generator as a partial ring. Elements are grouped and positioned with SVG transform attributes, and chained `transition` calls drive the two-step animation.

Jun 8, 2022

Loading thumbnail…

Shapes with SVG amd CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

Jun 5, 2022

Loading thumbnail…

Force Network Politics

This visualization shows a celebrity network graph where circular nodes represent Hollywood actors, directors, and films, with connecting lines indicating professional relationships such as "Acted in" or "Directed." Built with D3 v6, the force-directed layout uses `d3.forceSimulation` with link, charge, collision, and centering forces to position the nodes. Node colors are assigned via a simple ordinal scale based on categorization from the JSON data, while the SVG rendering includes markers for link arrowheads.

Jun 4, 2022

Loading thumbnail…

D test force direct

This example demonstrates a minimal force-directed graph, showing four nodes and three directed links loaded from a CSV file. It relies on D3 version 7’s legacy `d3.layout.force` API to calculate node positions and update SVG circle and line elements on each tick. The data is read asynchronously with `d3.csv`, and the layout is initialized with a fixed width and height. Node drag behavior is enabled through `force.drag`, though no styling is applied to the elements beyond the default.

May 28, 2022

Loading thumbnail…

Sankey Russian Government Spending

This Sankey diagram visualizes Russian government spending flows, showing how total notifications distribute into matched and scrap categories before splitting into subcategories like XRM, Prodc, and PN OTD. Using D3.js version 3.5.17, the code implements a custom `d3.sankey` layout function with node and link rendering via SVG. The visualization assigns colors to nodes and uses curved paths for links, with hover effects increasing stroke opacity. Data comes from an embedded JSON array containing seven nodes and six links with numerical values.

May 16, 2022