misferswift

@misferswift·5 public vizzes

Firefly Map of Coronavirus Case Locations

This interactive map displays the locations of confirmed Coronavirus cases as of March 5, 2020, with each point rendered as a glowing firefly-like sprite of uniform size and intensity regardless of case count. The visualization uses OpenLayers with React to manage the map and vector layers, while D3’s `cubehelix` function generates radial gradient sprites that combine a bright core with a soft Gaussian falloff. Data comes from the Johns Hopkins COVID-19 time-series CSV, filtered to include only locations with non-zero cases, and is projected onto a Stamen toner-lite basemap.

Apr 6, 2020

Loading thumbnail…

Stylized Bar Chart

The stylized bar chart displays monthly values from a CSV dataset, with horizontal bars extending rightward from a categorical y-axis of dates. The visualization uses D3 version 5's `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisLeft` and `axisBottom` generating the labels. Rendering as SVG, bars are filled with steelblue and styled using the Poppins font, offering a clean, modern presentation of the temporal data trend.

Apr 5, 2020

Loading thumbnail…

Multing Data for Multiple Lines

This visualization shows population trends over time for multiple world regions, with each line color-coded and sorted by its final population value. The chart includes axes with gridlines, a legend generated by a custom `colorLegend` function, and smoothed lines using `curveBasis`. Data is processed by melting wide-format CSV rows from UN population estimates into tidy long-form data, then nested by region with `d3.nest`. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.line`, rendering to SVG with D3 v5.

Mar 29, 2020

Loading thumbnail…

Multing Data for Multiple Lines

This visualization displays population trends over time for various regions, with each line representing a different area and color-coded via a categorical scale. It uses d3.line with curveBasis to generate smooth paths, d3.nest to group data by region, and d3.scaleOrdinal for colors. Population estimates from UN data are melted into a tidy format, with axes formatted using d3.axisBottom and d3.axisLeft. A custom colorLegend component renders the legend alongside the SVG chart.

Mar 29, 2020

Loading thumbnail…

Let's make a face with D3.js!

A single yellow circle with a black outline is drawn at the center of an SVG, forming a simple face. The circle’s radius is set to half the SVG height, with its center positioned using the width and height attributes. Using D3.js v5, the `select` method targets the SVG, and `append` creates the circle, setting its fill and stroke. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s declarative chaining.

Mar 20, 2020