syedkabir268

@syedkabir268·6 public vizzes

Let's make a bar graph

This example shows a horizontal bar graph of population data for ten countries, with bar lengths scaled proportionally to each country’s population. The visualization is built with D3.js (version 5) using `d3.csv` to load the data, `scaleLinear` for the x-axis, and `scaleBand` for the y-axis categories. Rectangles are appended to an SVG canvas, with each bar’s width set by the linear scale and height by the band scale’s bandwidth. The data is loaded from a CSV file and multiplied by 1000 to convert values to actual population counts.

Dec 27, 2020

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser window resizing. It draws a large green X shape using two SVG line elements that stretch to fill the entire viewport, with the chart container styled via CSS to occupy the full page. On every resize event, a `redraw()` function reads the container’s `clientWidth` and `clientHeight`, updates the SVG’s width and height attributes, and repositions the lines using the data-join pattern with `selectAll` and `merge`. The code relies on D3 v5 and the native browser `window.addEventListener` for resize handling.

Dec 26, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. A red background, yellow circle head, black eyes, and an arc-generated mouth are all created and styled through chained attribute methods. The code explicitly imports `select` and `arc` from the D3 v5 library, using `d3.arc()` to produce the mouth path. All rendering occurs in an SVG canvas with hardcoded dimensions, and the example serves as a hands-on introduction to selecting elements, appending shapes, and setting attributes in D3.

Dec 23, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes, beginning with a single large circle positioned on a 960×500 canvas. The visualization uses plain SVG markup within an HTML file, styled through an external CSS stylesheet that sets the page margin to zero and hides overflow. The accompanying README provides a tutorial on using JavaScript objects, arrays, and modules, while a linked YouTube video offers further context. The rendering relies entirely on core SVG elements and CSS, with no additional JavaScript libraries or data sources.

Dec 21, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates how to set up a minimal VizHub project that loads D3.js via UNPKG and uses ES6 modules. It shows D3’s `select` function targeting a div with the ID `message` to update its text content, while a local module exports the string being displayed. The page renders static text through a combination of external library imports and a local `myMessage.js` file, with CSS centering the large-font output.

Dec 21, 2020

Loading thumbnail…

Hello dude

This example demonstrates the basic structure of a VizHub project, showing how D3.js can be used to manipulate the DOM. It displays the text "Hello VizHub!" centered on the page using the D3 `select` method to update a div's content. The code imports the message from a local ES6 module and loads D3 v5 via a CDN, highlighting modular organization and external library integration. The styling is handled through a separate CSS file, controlling font size and text alignment.

Dec 21, 2020