meghagoyal17

@meghagoyal17·7 public vizzes

Making a Bar Graph using text file

This example shows a bar graph of country populations, with blue bars sorted by the order of the data in the CSV file. The chart uses D3 v7’s `csv` method to load the data, then `scaleLinear` and `scaleBand` to map population values to bar heights and positions. Data is parsed by converting population strings to numbers before rendering, and bars are appended to an SVG container. The visualization is part of a React starter template, though this simple version relies on plain HTML and JavaScript.

Apr 13, 2023

Loading thumbnail…

Making a Bar Chart

This example shows a simple bar chart built with D3.js v7, displaying four individuals’ scores against a 100-point axis. Blue rectangles are positioned using a band scale for the x-axis and a linear scale for the y-axis. The code renders SVG elements via `d3.select` and `join`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data is hardcoded as an array of objects, and the chart includes margins and a viewBox for responsive sizing.

Apr 12, 2023

Loading thumbnail…

Making a Bar Chart

This example displays a bar chart of four individuals’ scores, with blue bars representing values on a scale from 0 to 100. It uses D3 v7 to create an SVG graphic, employing the `d3.select` method to append the chart to the page, `d3.scaleBand` and `d3.scaleLinear` to map data to x and y coordinates, and the `join` operation to bind each data point to a rectangle element. The chart’s dimensions and margins are fixed, and the data is hard-coded in the script.

Apr 12, 2023

Loading thumbnail…

A Smiley Face

This example shows a smiley face constructed from geometric shapes, with a yellow circular head, two black eyes, and a straight mouth line on an SVG canvas. The visualization uses React 18.2 and D3.js conventions through hardcoded SVG elements, including the `circle`, `line`, and `g` tags, all rendered directly in the DOM via a pre-bundled script. The face demonstrates basic SVG coordinate positioning (using `cx`, `cy`, `x`, and `y` attributes) and styling through fill and stroke properties, with the entire figure centered at (400, 250) on a 960×500 canvas.

Apr 12, 2023

Loading thumbnail…

A Smiley Face

A smiling face rendered as a yellow circle with black stroke and facial features drawn using SVG primitives inside an HTML page. The visualization is built with React and uses D3.js to construct the face, with all elements defined as SVG circles and paths. The rendering approach is direct SVG markup within a 960x500 canvas, where each facial component is positioned using explicit coordinates and radius values.

Apr 12, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as scalable vector graphics: a red circle, a green rect, a thick black line, and a polygonal path composed of straight segments. The shapes are drawn directly in an SVG element within the HTML, with styling applied through inline attributes such as `fill`, `stroke`, and `stroke-width`. The accompanying CSS sets the page margins and overflow, while all visual properties for the shapes are defined using native SVG presentation attributes rather than a JavaScript library.

Apr 10, 2023

Loading thumbnail…

Cars Reports

This example presents a simple car report listing three vehicles with their associated prices. The page shows a 2012 Nissan Leaf, a 2009 Ford F150, and a 2009 Chevrolet Trailblazer, with the first entry highlighted in red. The interface uses plain HTML markup with an unordered list, styled by an external CSS file. The stylesheet sets a large monospace font for the body and applies a red color class to the highlighted list item, demonstrating basic document styling without any JavaScript libraries or data-processing APIs.

Apr 10, 2023