Bubble World Map

Dashboard - Multiple Views

This dashboard presents Nike’s global manufacturing data through three linked views: a bubble world map showing factory counts by country, a stacked bar chart of product types for top countries, and a draggable sankey diagram linking supplier groups to countries. The world map uses d3.geoPath and a size legend for filtering, while the stacked bar chart uses d3.stack and a color legend for interaction. All charts include tooltips, with the sankey using the D3-graph-gallery sankey.js library and SVG rendering for nodes and links.

77% match

Hhanulik.ondrej@gmail.com

bubble

This bubble map displays global natural gas production by country, with circle size proportional to production volume. The visualization uses D3.js v6 with a Mercator projection, plotting latitude and longitude coordinates from a CSV file onto a GeoJSON world map. The map renders as gray SVG paths with blue semi-transparent bubbles, sized using d3.scaleLinear. Country positions are projected via d3.geoPath with a custom geoMercator projection, while the data loading relies on Promise.all to fetch both the GeoJSON and CSV sources.

73% match

Interactive WorldMap for Zara and Nike Shops

This interactive world map visualizes the distribution of Zara and Nike shops, with each country colored according to its economy classification. Built with D3.js v5, it uses a natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath` to render countries from TopoJSON data loaded via `topojson.feature`. The map supports pan and zoom through `d3.zoom`, and hovering over a country changes its fill to red while a tooltip shows the country name and economy value. Color encoding uses a spectral scale from `d3.schemeSpectral`.

YYashashvi Singh

73% match

zoom comparson

This visualization displays a scatter plot of Nike manufacturing factories, with each circle representing a factory, colored by product type, and positioned by total workers versus line workers. Users can brush-select a horizontal region on the plot to zoom the x-axis domain, with a double-click resetting the view. The chart uses d3.brush for interactive selection, d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors, all rendered as SVG with animated transitions on the x-axis and circle positions. Data comes from a CSV file of Nike’s global manufacturing statistics.

Wwzhang88

Scatter Plot with Country Selection

This scatter plot visualizes Nike global manufacturing data, with each circle representing a factory positioned by total workers versus line workers, colored by product type, and filtered by country through a dropdown menu. The visualization uses D3 v6 with SVG rendering and animations, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `transition` for smooth circle updates. The menu component uses D3's `dispatch` for change events, while the data is loaded via `csv` from a GitHub Gist.

Stacked Bar Chart

This stacked bar chart displays the distribution of Nike manufacturing factories across countries, with each bar broken down by product type. The visualization aggregates and filters the data to show only countries with more than ten factories. Users can hover over individual bar segments to see tooltips with the country and factory count, or hover over legend entries to highlight specific product categories. Built with D3.js v3, it uses `d3.layout.stack`, `d3.nest`, scales, axes, and the d3-tip and d3-legend libraries, rendering with SVG and supporting interactive animations.

Bar Plot with Country Menu

This bar plot displays the top 15 Nike manufacturing factories by total worker count, with bar color indicating product type and a dropdown menu for filtering by country. The visualization uses D3 v6 APIs including `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `transition` for animated updates, while `d3.csv` loads the Nike Global Manufacturing Data from a GitHub gist. Tooltips reveal factory name, country, and worker totals, and a legend maps product types to colors.

Size Bubbles

A world map displays cities as semi-transparent bubbles, with bubble area scaled by population using a sqrt scale and a maximum radius of 15 pixels. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and interiors from TopoJSON world-atlas data, while city coordinates and populations come from a cleaned CSV. React manages the component state and rendering, with SVG circles positioned by projecting each city’s longitude and latitude. The map’s styling uses light gray fills for land and graticules, with teal, translucent circles for urban centers.

Rrstrauss127