alanhealy

@alanhealy·3 public vizzes

ExamBiz1

This visualization displays time-series data from an exam business dashboard, plotting hourly views as colored lines for different URLs with red circles marking Facebook engagement. The data comes from a Google Sheets CSV, rendered as SVG using D3 v5. The code employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest to group data by URL, while axes use d3.axisLeft and d3.axisBottom with gridlines.

Dec 14, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository, showing horsepower versus weight. The visualization uses D3.js (v5) to render an SVG chart with time on the x-axis and views on the y-axis. It employs D3's `scaleLinear`, `scaleTime`, and `scaleOrdinal` for scaling, along with `axisBottom` and `axisLeft` for axes. The data is loaded from a Google Sheets CSV, and multiple line paths are generated using the `nest` API and `lineGenerator` with `curveBasis`, colored via `schemeCategory10`.

Dec 11, 2020

Loading thumbnail…

Makking a Bar Chart

This example demonstrates how to build a bar chart by dynamically loading a CSV dataset and preparing it for visualization. The code uses D3.js v5, specifically the `select` and `csv` APIs, to fetch data from a Google Sheets URL and log each row’s “headline” field to the console. An SVG element with fixed width and height is selected from the HTML, while the chart itself is not yet rendered—only the data import and structure are showcased. The page also includes a YouTube video explaining the process.

Dec 7, 2020