devansh1407

@devansh1407·11 public vizzes

Untitled

This example uses D3.js to simulate a force-directed graph, visualizing the relationships between nodes as they settle into a stable layout. The code employs `d3.forceSimulation` with charge, link, and centering forces to animate the network, while the nodes are rendered as circles on an SVG canvas using `d3.drag` for interactivity. The graph’s data is generated locally within the script, producing a dynamic, physics-based visualization. The layout adapts in real time as forces push and pull connected elements, highlighting the underlying network structure through motion and proximity.

Apr 27, 2023

Loading thumbnail…

Making a bar graph using text files

This example demonstrates how to create a bar graph from a CSV file containing country population data. The visualization loads the dataset using the `d3.csv` method in D3 v7, then parses each population value by multiplying it by 1000 to convert from thousands to actual numbers. The code includes a script tag importing D3, and the `index.js` file uses the `select` and `csv` functions from the D3 library. However, the example currently only logs the processed data to the console and does not yet render the bars visually.

Apr 13, 2023

Loading thumbnail…

Untitled

Apr 13, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered on an SVG canvas inside an HTML page. It shows a yellow circle with a red stroke, a blue rectangle with an orange stroke, and a black polyline path. The shapes are defined directly in the markup using SVG elements such as `<circle>`, `<rect>`, and `<path>`. Styling is applied through SVG presentation attributes like `fill` and `stroke-width`, without any external CSS or JavaScript libraries.

Apr 10, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how simple geometric shapes—a yellow circle with a red stroke and a blue rectangle with an orange stroke—can be drawn directly in an SVG canvas. The code uses inline SVG elements (`circle` and `rect`) styled via presentation attributes like `fill` and `stroke-width`, with the page structured by plain HTML. No external libraries are used; the shapes are static and rendered by the browser’s SVG engine, providing a minimal illustration of primitive vector graphics.

Apr 10, 2023

Loading thumbnail…

CARS REPORT

This dashboard presents a basic report on a small set of used cars, listing a 2012 Nissan Leaf, a 2009 Ford F150, and a 2009 Chevrolet Trailblazer. The page is rendered as a simple HTML document with an unordered list, where one vehicle is visually emphasized through a CSS class. The styling is handled by an external stylesheet, and the content is static, with no interactive data visualization or JavaScript libraries in use. The data appears to be manually embedded within the page’s markup.

Apr 10, 2023

Loading thumbnail…

Untitled

This example visualizes earthquake locations using a global map rendered with D3’s `d3.geoPath` and `d3.geoOrthographic` projections. It plots seismic events as circles whose size and color encode magnitude, with a color scale from `d3.scaleSequential`. The visualization updates over time by cycling through timestamped data, using `d3.transition` to animate circle radius changes. It relies on the TopoJSON world atlas for geographic boundaries and fetches earthquake data from a local CSV file.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This example displays a centered, static message reading “Hello HTML!” in extremely large type, with the text styled using a CSS class. It demonstrates the minimal structure of an HTML page that combines embedded CSS for visual presentation and JavaScript for interactive behavior. The page uses standard HTML elements like `div` and the `style` tag, along with core CSS properties such as `font-size` and `text-align`. No external libraries or data sources are involved; the rendering relies entirely on the browser’s native parsing of HTML and CSS. The example serves as a bare-bones starting point for web-based visualization projects.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example shows a simple web page that renders the message “Hello HTML!” in large, centered text. The styling and layout are defined using CSS within an HTML `<style>` block, applying a font size of 13em and center alignment to a `div` element with the class `message`. The implementation uses plain HTML and CSS, with no JavaScript or external libraries, and requires no data source or rendering engine beyond the browser’s standard document processing.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the phrase “Hello HTML!” centered on the page in extremely large text. The design demonstrates a minimal HTML structure combining CSS for styling and JavaScript for basic interactivity. The code uses a plain `<div>` element with a CSS class to control font size and alignment, while the page itself is defined in a single `index.html` file. It serves as a foundational template for web-based visualizations, showing how static content can be presented without external libraries or frameworks.

Apr 10, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the message “Hello HTML!” in large, centered text on a plain web page. It demonstrates the basic structure of an HTML document with embedded CSS for styling and JavaScript capability. The page uses a `<div>` element with a CSS class to control the font size and alignment, and no external libraries are required. It serves as a minimal template for web-based projects.

Apr 10, 2023