aditya-ux27

@aditya-ux27·9 public vizzes

Making a bargarph using textfile

This bar chart displays the populations of ten countries, scaled by a factor of one hundred, using blue bars on an SVG canvas. The visualization is rendered with D3 v7 within a React framework, parsing the `data.csv` file via the `csv` function and loading it with `d3.select`. Bar positions and heights are calculated using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with rectangles generated through the `join` method.

Apr 13, 2023

Loading thumbnail…

Making a Bar chart

This example shows a bar chart of four people’s scores using blue rectangles on an SVG canvas. The data is hard-coded as an array of objects with names and scores. The chart uses D3.js v7 to create band scales for the x-axis and linear scales for the y-axis, with a margin-defined layout. The code leverages D3’s `selectAll` and `join` operators to bind data to the rectangles, setting each bar’s position, height, and width based on the score values. The visualization is rendered as SVG without axes or labels, focusing only on the bar geometry.

Apr 13, 2023

Loading thumbnail…

A smiley face

This example shows a simple smiley face constructed from basic geometric shapes. The yellow circle forms the face, two smaller black circles create the eyes, and a short black line acts as the mouth. The chart is rendered using Scalable Vector Graphics (SVG) within an HTML page, with each shape defined as a separate SVG element. The code directly specifies positions, radii, and stroke properties for all elements.

Apr 12, 2023

Loading thumbnail…

shapes with css and svg

This example demonstrates two basic geometric shapes—a circle and a rectangle—rendered within an SVG canvas. The circle is centered at (250,250) with a red fill and black stroke, while the rectangle uses a green fill with a blue stroke and is positioned to the right. The shapes are defined directly inline in the HTML using SVG elements, with styling applied through SVG presentation attributes such as `fill`, `stroke`, and `stroke-width`. No external libraries or JavaScript are used; the visualization relies solely on native SVG markup within a static HTML page.

Apr 12, 2023

Loading thumbnail…

Untitled

This example presents a minimal HTML page that uses CSS and JavaScript to demonstrate a basic interactive visualization. The code relies on React to structure the interface and incorporates D3.js for rendering animated visual elements. It uses `d3.forceSimulation` to generate a dynamic network layout, with nodes and links positioned through force-directed physics. The visualization updates in real time as forces settle, showcasing how a simple, dependency-light setup can produce a responsive chart. No external data source is loaded; the demonstration generates its own simulated data within the script.

Apr 12, 2023

Loading thumbnail…

Untitled

This example demonstrates a minimal interactive visualization built with React, combining a force-directed graph layout with geographic map projections. The code uses d3.forceSimulation to position nodes and d3.geoPath to render world map outlines, with data drawn from a static GeoJSON source. Users can explore the network by dragging nodes, while the map serves as a contextual backdrop. The implementation relies on React’s state management to update the visualization in response to interactions, showcasing a hybrid approach that integrates D3’s rendering capabilities within a React component lifecycle.

Apr 12, 2023

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter displays the static message “Hello HTML!” centered on the page in large text. It uses plain HTML with embedded CSS and JavaScript, though no interactive behavior or dynamic data is present. The rendering approach relies on basic DOM elements styled via a CSS class definition.

Apr 12, 2023

Loading thumbnail…

creating a line

This example shows a simple SVG-based line drawing in a React visualization. The code uses an `<svg>` element to render two line segments: a horizontal line created with the `<line>` tag and a diagonal path drawn with the `<path>` tag, both styled with black strokes. The rendering approach uses raw SVG coordinates, with the first line spanning from x1="400" y1="300" to x2="280" y2="300". No additional libraries are used; the visualization relies entirely on native SVG markup and CSS-like attributes such as `stroke` and `stroke-width`. It demonstrates fundamental vector graphics construction without JavaScript interaction.

Apr 10, 2023

Loading thumbnail…

Untitled

This example displays a static list of three used cars, highlighting the 2012 Nissan Leaf in red. It uses plain HTML and CSS, with a monospace font set at a large size for readability. The `highlighted` class is applied directly to the list item to change its color, while the other two vehicles remain in the default text color. The page is a simple, unstyled report without any JavaScript libraries or interactive data-binding features.

Apr 10, 2023