Dimanjan

@Dimanjan·5 public vizzes

Coronavirus Impact Area Chart by Dimanjan

A live area chart animates the cumulative counts of confirmed cases, deaths, and recoveries from a local CSV of coronavirus data, with three gradient-filled series rendered in yellow, red, and green. The visualization uses D3.js v4 to update the x- and y-axes and paths via transitions, while Bootstrap styles the page and buttons. The chart rebuilds its series incrementally with `d3.area()`, `d3.scaleTime()`, and `d3.scaleLinear()`, and the data is fetched with `d3.csv()`.

Jan 9, 2021

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

This map shows the global distribution of confirmed Coronavirus cases as of early March 2020, with each location rendered as a glowing firefly-like sprite. The visualization uses OpenLayers with a Stamen toner-lite basemap, and React manages the map lifecycle. Case locations are styled using a custom canvas-generated radial gradient sprite, created with d3’s cubehelix color functions to simulate a soft glow. Data comes from the Johns Hopkins CSSE COVID-19 time series, loaded via d3.csv. The map updates over time by cycling through the dataset’s date columns.

Mar 31, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map that supports zooming and panning, with country names revealed on hover. It renders geographic data using D3’s `geoNaturalEarth1` projection and `geoPath` into SVG, with country boundaries from TopoJSON and names from a TSV file. The zoom behavior is implemented via `d3.zoom`, applying a transform to a group element. Hover effects increase stroke width via CSS, while `title` elements display each country’s name.

Mar 24, 2020

Loading thumbnail…

Let's make a map with D3.js!

A geographical map of world countries is rendered as a blue sphere with light green landmasses outlined in black. The visualization uses D3.js version 5 with the `geoNaturalEarth1` projection and `geoPath` to draw each country's path. TopoJSON data from the world-atlas dataset is loaded via the `feature` API to generate the country boundaries. The SVG output is styled with CSS, and the sphere and country shapes are appended as `path` elements.

Mar 20, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It visualizes both bars and circles for each country while demonstrating how to customize D3 axes. Using D3 v5, the code applies `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` to generate axes, and custom tick formatting with `d3.format` to abbreviate numbers. Axis gridlines extend across the chart, and the default axis lines and ticks are removed for a cleaner look.

Mar 8, 2020