moezif-dev

@moezif-dev·3 public vizzes

Fork of Coronavirus Linear Y Axis

This chart traces the cumulative number of COVID-19 cases over time using Johns Hopkins data, rendering a single line with a linear y-axis. Built with React and D3 v5, it uses `svg` for output, `scaleTime` and `scaleLinear` for axes, and `line` to generate the path. The view initially loads recovered-case data, then swaps to death totals after two seconds, with optional marker lines for reference.

Mar 31, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive bar chart using D3.js v6. The page displays four vertical bars with heights corresponding to the numbers in the `numbers` array. Users can click on any bar to remove it from the chart, triggering a D3 data join via `selectAll`, `enter`, and `exit` to update the visualization. The bars are styled with CSS classes and positioned using D3's `style` method to set height and margin-top attributes.

Mar 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This visualization loads temperature-in-San-Francisco CSV data and animates a streaming area chart. Using the d3.csv method, it parses timestamp and temperature values, then renders them with a time-scaled x-axis and linear y-axis. The area and line paths are generated with d3.area and d3.line using a curveBasis interpolation, filled with a linearGradient that fades from red to transparent. A transition loop with active selection and easeLinear repeatedly splices new data points into the displayed dataset, redrawing the SVG paths to create a dynamic, rolling view of temperature trends.

Apr 15, 2020