rudrachauhan11

@rudrachauhan11·3 public vizzes

Making a Bar Chart

This example creates a static bar chart using D3 v7, displaying categorical data as vertical bars with labels. The visualization uses `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scale, with bars rendered as styled SVG `rect` elements. The code employs `d3.max` to compute the domain, `d3.axisLeft` and `d3.axisBottom` to generate axes, and `d3.select` with data binding to append the shapes. A hardcoded local array provides the dataset.

May 17, 2023

Loading thumbnail…

Making a Bar Chart

This example shows a simple bar chart comparing the scores of four people—Simon, Mary, Jo, and Peter—on a scale from 0 to 100. It uses d3.scaleBand and d3.scaleLinear to map data to positions, with blue SVG rectangles drawn via d3.selectAll and data joins. The chart includes custom x and y axes built with d3.axisBottom and d3.axisLeft, labeled with names and numeric ticks. Rendering uses SVG within an 800-by-400 viewBox, with margins applied around the plot area.

Apr 12, 2023

Loading thumbnail…

A smiley face

A smiley face rendered as a static SVG graphic shows two black circular eyes and a straight-line mouth inside a yellow circular head. The drawing uses basic SVG shapes—`circle` elements for the face and eyes, and a `line` element for the mouth—all grouped within a `<g>` element with a thick black stroke. The markup is plain inline SVG embedded directly in an HTML file, with no external libraries or JavaScript, relying solely on SVG’s native geometry attributes to position the features on a 960 by 500 canvas.

Apr 12, 2023