Foremost123

@Foremost123·7 public vizzes

Fork of World Countries Tree

This fork of the world countries tree visualizes the hierarchical structure of global regions, subregions, and countries from a JSON dataset. It renders a horizontal dendrogram in SVG, with each country as a leaf node labeled by name. The code uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables pan and zoom interactions. Text styling and font sizes adjust based on node depth, with a Playfair Display font applied throughout.

May 19, 2021

Loading thumbnail…

Fork of bargraph d3

A horizontal bar chart displays country populations with bars extending rightward from the y-axis. The example loads data from a CSV file and renders it as SVG rectangles using D3 version 6. It employs `d3.scaleLinear` for the x-axis population scale, `d3.scaleBand` for the categorical y-axis, and `d3.csv` to parse the data. The visualization demonstrates basic data binding and SVG attribute manipulation with `selectAll` and `enter` selections.

May 18, 2021

Loading thumbnail…

bargraph d3

This bar chart displays population counts for five countries, with each country listed on the vertical axis and a horizontal bar whose length is proportional to its population value. The visualization uses D3 version 6’s `scaleLinear` for the quantitative x-axis and `scaleBand` for the categorical y-axis, rendering rectangles as SVG elements within a fixed 960 by 500 canvas. Data is loaded from a local CSV file (`data.csv`) via D3’s `csv` function, and the code appends the bars dynamically to the SVG container. The example demonstrates a straightforward mapping of tabular data to a bar chart using D3’s declarative API.

May 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in massive 13em type, centered on a plain white page. It demonstrates a minimal HTML and CSS setup with embedded JavaScript that logs “Hello JavaScript!” to the browser console. The code uses plain HTML elements, CSS styling, and a script tag for basic interactivity, with no external libraries or data rendering.

May 18, 2021

Loading thumbnail…

Fork of smiley d3

This example shows a large yellow circle centered in an SVG canvas, created as a simple smiley face placeholder. The visualization uses D3 version 6, specifically the `d3.select` method to target the SVG element and read its width and height attributes. The code appends a circle with a fixed radius equal to half the SVG height, positions it at the center using those dimensions, and fills it with yellow. The SVG has a width of 960 pixels and a height of 500 pixels, with text styling set to a very large font size in the page’s body.

May 18, 2021

Loading thumbnail…

smiley d3

This example demonstrates a minimal D3 version 6 setup using an SVG canvas to draw a large yellow circle that fills the viewport, centered at half the width and height of the 960×500 SVG element. The code selects the SVG with `d3.select`, reads its dimensions via `attr`, and appends a circle with `append('circle')`, setting radius, coordinates, and fill color. It relies on D3’s selection and attribute methods to position the shape, serving as a basic introduction to D3’s declarative graphics in a static, single-element visualization.

May 18, 2021

Loading thumbnail…

car examples D3

This example demonstrates how to begin using D3 version 6 by loading a small JSON dataset of car specifications and displaying the make of the first car in the dataset. The code parses a hardcoded JSON string with `JSON.parse` and uses standard DOM methods to set the text content of an HTML element, applying CSS styling for centered, large text. The page includes a linked YouTube tutorial and loads D3 from the official CDN, but the visualization itself relies solely on native JavaScript and DOM manipulation rather than D3-specific functions.

May 17, 2021