XinyeBai4

@XinyeBai4·3 public vizzes

CSE 564 Assignment 0

This visualization displays the relationship between overall quality ratings and living area for individual houses, with each point representing a property from the Ames housing dataset. The code loads data from a CSV file using `d3.csv`, parses numeric fields, and renders rectangles using `selectAll` and `data` joins, though the x-scale from `scaleLinear` and axes are set up but not fully displayed. The chart uses a minimal bar-style layout with Poppins typography and teal marks, drawing from the UN World Population Prospects source file referenced in the README.

Feb 18, 2020

Loading thumbnail…

Making a Bar Char

This example shows a static bar chart of country populations from a CSV file, using SVG rectangles to represent each value. The code imports `select` and `csv` from D3 v5 to load the data and bind it to the DOM, converting string population numbers to integers before rendering. The current implementation includes only the data-loading and parsing steps, with a placeholder selection call (`svg.selectAll('rect')`) that does not yet bind or draw the bars. The chart uses a fixed 960x500 SVG canvas and relies on D3’s `csv` promise to handle the asynchronous file import.

Jul 23, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how a minimal D3.js application can dynamically update the content of a webpage. It displays the text “Hello VizHub!” centered on a dark blue background with large, Ubuntu-font styling. The code uses `d3.select` to target the `#message` div and sets its text content with a string imported from a separate ES6 module. The page is structured with an `index.html`, styled via `styles.css`, and renders entirely through client-side JavaScript without external data.

Jul 18, 2019