Kurt

@kpessa·5 public vizzes

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower observation appears as a circle, with scales computed from the data’s extent using `d3.scaleLinear` and `d3.extent`. The visualization loads CSV data via `d3.csv`, renders SVG circles with `selectAll` and `join`, and adds axes using `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, with margins offsetting the axes and a fixed point radius of five pixels.

Jun 15, 2022

Loading thumbnail…

FCC D3 Bar Chart

This D3 bar chart visualizes United States quarterly GDP data from 1947 to 2015, with each bar representing a quarter’s GDP in billions of dollars. Hovering over a bar reveals a tooltip showing the exact GDP value, the year, and the quarter. The chart uses `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.scaleBand` for bar placement, with data loaded from a remote JSON file.

Jun 15, 2022

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

A line chart tracks the cumulative number of COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus dataset. The visualization employs a linear y-axis scale, with the chart area populated by a single black path rendered via an SVG `<path>` element. The code leverages d3's `scaleTime`, `scaleLinear`, and `line` functions to map dates and death totals, while React components manage the axes. A small, fixed circle appears in the upper-left corner of the plot area.

Jan 28, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an exponential decay curve plotted over time, with the x-axis represented as hourly timestamps and the y-axis showing decreasing values. The visualization uses Vega-Lite’s API to define a line mark with tooltips, while data is generated dynamically using `moment()` for dates and a custom exponential function. It loads auto-mpg CSV data via d3’s `csv` method, though the chart itself plots synthetic data. The rendering leverages Vega, Vega-Lite, and Vega-Lite API, with tooltip support from Vega-Tooltip, and applies custom axis and label styling from a configuration file.

Jan 27, 2022

Loading thumbnail…

Completed React/D3 Smiley Face

A completed smiley face composed of SVG shapes, rendered in a React application with D3.js. The visualization uses React components to define the face's parts, including yellow face circle, black eyes, and a D3 arc-generated mouth. The code demonstrates integration of D3's `arc` API for creating the mouth path, with React's component model managing the SVG elements. The face is assembled via a `<g>` transform, positioning elements at calculated coordinates within a 960x500 viewport.

Jan 27, 2022