Shahin Alam

@shahinseu123·7 public vizzes

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG. It shows a series of 100 horizontal bars, each 10 pixels tall and spaced 20 pixels apart, filling the entire window. A circular mask clips the bars so that only the area inside a centered circle of radius 200 pixels is visible, creating the artwork’s distinctive striped disc. The code creates SVG elements programmatically via the DOM API, using `createElementNS` and `setAttribute` to build the mask and rectangles without any external libraries.

Nov 10, 2023

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering SVG output. It draws a grid of horizontal and vertical rectangular strips across the full canvas, with each strip positioned iteratively. The visualization currently defines two mask elements for potential circular cutouts, though the mask-creation code is commented out. The artwork uses D3’s `select`, `range`, and `symbol` APIs to generate the ordered pattern, with the structure derived from a deterministic repetition of lines.

Nov 10, 2023

Loading thumbnail…

Fork of LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, generating a grid of horizontal and vertical bands across the full viewport. It employs two SVG `mask` elements with circles at the center to selectively reveal the overlapping stripes, creating a circular intersection pattern. The code constructs all elements dynamically via the DOM API, setting the window dimensions as the canvas size and drawing 100 rectangles in each direction. This fork adapts the original concept to a vertical orientation, using nested rects and masks to achieve the geometric effect.

Nov 9, 2023

Loading thumbnail…

svg path practice

This example demonstrates how D3 version 5 can load data and set text content within an HTML page using the `select` function. The code imports both the D3 library and a local ES6 module, `message.js`, to display the message "Hello VizHub world!" inside a designated div element. It also includes a minimal SVG container and basic CSS styling for large centered text. The example serves as a practice exercise for working with D3 selections and SVG structure.

Nov 9, 2023

Loading thumbnail…

Fork of Line Chart with Multiple Lines by shahin

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, with d3.line and curveBasis generating smooth paths. A d3.nest groups readings by city, sorted by final temperature, while a custom colorLegend module renders the categorical palette. The chart includes gridlines, axis labels, and a title, with lines blended using multiply mode.

Jun 13, 2022

Loading thumbnail…

Fork of ICE 7question 3 Line Chart 2

This line chart visualizes automobile sales in India from 1999 to 2012, plotting yearly electronic sales data loaded from a CSV file hosted on GitHub. The SVG chart is built with D3 v5, using `scaleTime` for the year axis and `scaleLinear` for sales values, with `axisBottom` and `axisLeft` generating gridlines and labels. A `line` generator creates the blue sales path, while margins and appended text elements position the title and rotated axis labels. The code imports specific D3 functions like `csv`, `extent`, and `max` to process the data, then renders the final visualization inside a 960×500 SVG container.

Jun 9, 2022

Loading thumbnail…

Fork of ICE 7question 3 Line Chart sh

This line chart displays automobile sales in India from 1999 to 2012, with years on the x-axis and sales figures on the y-axis. The code loads CSV data from a GitHub gist using d3.csv, then renders an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The chart includes gridlines, axis labels, and a blue line path, with styling handled through an external CSS file.

Jun 5, 2022