zakirkhan11

@zakirkhan11·7 public vizzes

Fork of Making a bar chart

This bar chart displays population data for ten countries, with each country represented by a large square block. The visualization uses D3.js version 7, loading data from a local CSV file and rendering rectangular elements via SVG. The code demonstrates basic data binding with `select('svg')` and `csv('data.csv')`, converting population strings to numeric values for display. Each rectangle is uniformly sized at 300 by 300 pixels, creating a grid-like arrangement of country blocks.

Oct 2, 2021

Loading thumbnail…

Making a bar chart

This example shows a bar chart built from country population data loaded from a CSV file. The chart uses D3 v7 to select a 960-by-500 SVG and append rectangles for each data entry, though it currently sets the same fixed width and height for every bar. The data values are converted from numbers to actual populations by multiplying by 1000 in the CSV loading callback. The rendering relies on d3.select and d3.csv, with styling defined in a separate CSS file.

Sep 29, 2021

Loading thumbnail…

Fork of Fork of Fork of D3 Starter

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth rendered via d3.arc. The code uses D3 v7 selections to append SVG elements, centering a group with a translate transform. Eye spacing, offsets, and radii are defined as variables, while the mouth path is generated from inner and outer radii with specified start and end angles.

Sep 18, 2021

Loading thumbnail…

EyeBrows

This example displays the text “Hello D3 version 6” in a large, centered font on a blank page. It uses the D3 library, specifically the `select` function, to target the body element and the `.text` method to insert the string. The code imports `select` directly from the `d3` module. The page’s styling is set through a CSS rule that centers the text and sets its font size, while the D3 script is loaded from an external dependency. The data is hardcoded as a simple string literal.

Sep 18, 2021

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates basic SVG shape rendering and grouping with D3 v7, using static geometric primitives rather than data-driven binds. It shows circles, rectangles, lines, and paths inside nested `<g>` elements, with `transform` attributes for translation and scaling applied to layers. Inline `fill` and `stroke` properties override inherited group styles, while CSS rules in `styles.css` further style path joins and stroke widths. The visualization relies solely on declarative SVG markup within an HTML document, with no JavaScript logic beyond importing the D3 library.

Sep 17, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic SVG shape rendering and grouping with D3 v7. It shows circles, rectangles, lines, and a path arranged in three groups, each with different fill colors, stroke styles, and transform translations. The code uses SVG elements directly, applying group transforms like `translate` and `scale`, while CSS classes define stroke properties for the line elements. The visualization serves as a minimal starter template, illustrating how D3 integrates with static SVG markup and CSS styling without data binding or dynamic scales.

Sep 17, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starter template for D3 version 7, rendering a set of basic SVG shapes—two circles and two rectangles—directly onto a 960x500 canvas. The code imports the `select` function from the D3 library and loads the full D3 bundle from an unpkg CDN. Shapes are drawn statically with standard SVG attributes, with the second pair of shapes colored red, while the stylesheet sets the page body to center-aligned text at a massive 13em font size. No interactive or data-driven behavior is present.

Sep 16, 2021