DIANJING FAN

@BrownSugarBobaMilkTea·5 public vizzes

Green house gas bar chart

A horizontal bar chart displays 2019 greenhouse gas emissions (in MtCO₂e) for eleven top-GDP countries, with population values from `data.csv`. Steel-blue bars encode emissions magnitude on a linear scale, while country names align on a band scale. The SVG rendering uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot and axes. Interactive hover effects reveal a custom tooltip with the emission value, and the bar fill darkens via `attr("fill")` on mouse events.

Dec 15, 2022

Loading thumbnail…

Fork of TP_dataviz Projet

This visualization displays the number of Deezer fans for each album by a specific artist, fetched from the Wasabi API. Users can click the Ascending or Descending buttons to reorder the bar chart by fan count or release date. The bars appear sequentially via a staggered transition with `delay`. The code uses D3 v4’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the SVG chart, with data loaded using `csv` and `fetch`.

Dec 13, 2022

Loading thumbnail…

Choropleth World population map

A choropleth map displays world population by country, with each nation colored on a gradient from light to dark red based on its population size. The visualization uses the Robinson projection to render the world map, and employs a color scale defined by `d3.scaleThreshold` with a sequential color scheme. The map is drawn using `d3.geoPath`, with country boundaries loaded from a GeoJSON file and population data from a CSV. An interactive tooltip appears on mouseover, showing the country name and its population.

Dec 13, 2022

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

A world choropleth map colors each country by its income group, using a sequential red color scale derived from World Bank data. The visualization renders with D3 v7 and the `geoNaturalEarth1` projection, building paths via `geoPath` and TopoJSON country geometries. A custom color legend animates its circles with a `transition` to reflect scale changes, while a zoom behavior lets users pan and scale the map. Country names appear as tooltips on hover, drawn from the accompanying TSV metadata.

Dec 13, 2022

Loading thumbnail…

Fork of Polished World Map

This example displays a polished world map with country boundaries, rendered as an SVG using the natural Earth projection. The visualization shows landmasses in teal, graticules, and country interior borders, all styled with custom CSS. It uses React to manage the component hierarchy, with `d3.geoNaturalEarth1` and `d3.geoPath` for projection and path generation, and `d3.geoGraticule` for the grid overlay. Data is loaded from the World Atlas TopoJSON using `d3.json` and processed with `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

Dec 13, 2022