micyen

@micyen·4 public vizzes

Fork of Making a Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customizations of D3 axes, including tick formatting that converts values to billions and removal of default domain lines. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft with d3.axisBottom to render SVG axes. The title and axis label are added as SVG text elements.

Apr 10, 2023

Loading thumbnail…

Barycentric

A barycentric coordinate triangle plots three vertices in a 2D space, with axes scaled from 0 to 20 using D3’s `scaleLinear` and rendered as SVG. The code draws a blue polyline connecting the triangle’s points, which are computed from scaled x- and y-values. The example uses D3 v5, along with `d3.svg.axis` for the axes and an SVG container, demonstrating basic coordinate mapping and shape construction without a specific data source.

Feb 7, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each red semi-transparent circle represents a car, with its position determined by linear scales mapping horsepower and weight. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render axes and gridlines. Data is loaded as CSV and parsed to numeric values, then rendered as SVG circles within a margin-based layout.

Feb 7, 2023

Loading thumbnail…

Treemap

This treemap visualizes a hierarchical dataset of Game of Thrones characters derived from the ASOIAF_tree.json file, which contains aggregated attributes like degree, coreness, and pagerank. The rectangular layout partitions the space into nested tiles representing character subgroups, with each leaf node rendered as a solid teal rectangle. The visualization uses the D3 v5 treemap layout via d3.hierarchy and d3.treemap to compute positions and sizes based on summed values. Characters are displayed without text labels, and the SVG output shows the structural hierarchy of the network’s clustering.

Feb 7, 2023