betoAR506

@betoAR506·4 public vizzes

Lab5

This example displays a blank SVG canvas. The code sets up scales using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, within a 600x500 SVG, and appends a `<g>` element translated by 100 pixels on each axis. The `d3.select` API is used to select the SVG element. The visualization is a bare scaffold, prepared for future data plotting but showing no data or marks.

May 12, 2021

Loading thumbnail…

Lab5

This example shows a bar chart of yearly values, with dollar-formatted tick labels on the y-axis. The visualization uses D3 v4 within an SVG element, loading data from a CSV file named XYZ.csv. The chart employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Bars are drawn as `rect` elements, with height proportional to each data value, and the chart is offset by a margin of 200 pixels.

May 11, 2021

Loading thumbnail…

Lab4

A yellow circle with a black outline and a black rectangle form the start of a smiley face. Two unfilled circles sit at the expected eye positions but lack fill and stroke. The SVG markup uses basic elements like `circle` and `rect` with hardcoded coordinates, and the rendering is done entirely through static SVG in an HTML file named `index.html`.

May 11, 2021

Loading thumbnail…

Untitled

A smiling face rendered as an SVG data visualization, built with React and D3. The face consists of a red circle with a blue stroke as the background, two black eyes, and a D3 `arc`-generated mouth path. React components manage the SVG elements, while D3's `arc` function calculates the mouth's curved shape using specified inner and outer radii and start and end angles. The layout positions elements around a central coordinate, with fixed offsets for the eyes and mouth radius.

May 11, 2021