Skip to main content
Log in
Y

youness-cyber

@youness-cyber·6 public vizzes

Loading thumbnail…

Fork of Circles on a Map

This visualization displays world population by country using proportional circles on a natural Earth projection map. The area of each circle corresponds to the country’s 2018 population, with data sourced from a UN CSV and a 50m world atlas TopoJSON. The visualization supports pan and zoom interactions, and hovering over a country reveals its name and population. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and custom sizeLegend and colorLegend components to create legends, with SVG as the rendering format.

Jan 15, 2021
Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

This example animates transitions between different arrangements of fruit in a bowl, demonstrating how circular objects can smoothly move and resize while maintaining their individual identities. The visualization uses D3 v5 with SVG rendering, leveraging the `scaleOrdinal` function from D3’s color utilities to assign distinct colors to each fruit type. The animation logic is defined in the JavaScript source, which imports `select` and `range` from D3 to manage the transitions. The page uses a fixed 960x500 SVG canvas, with layout handled by CSS that removes margins and hides overflow, creating a seamless visual experience.

Jan 13, 2021
Loading thumbnail…

Fork of Circles on a Map

This visualization displays world population by country using proportional circles on a natural Earth projection map. The area of each circle corresponds to the country’s 2018 population, with data sourced from a UN CSV and a 50m world atlas TopoJSON. The visualization supports pan and zoom interactions, and hovering over a country reveals its name and population. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and custom sizeLegend and colorLegend components to create legends, with SVG as the rendering format.

Jan 13, 2021
Loading thumbnail…

Fork of World Population Area Chart

This fork of the World Population Area Chart visualizes global population growth over time as a filled area chart, with time on the x-axis and population on the y-axis. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with a curveBasis curve. Population values are formatted in billions using d3.format. The data comes from a CSV file hosted on VizHub, and the title and axis labels are added as SVG text elements.

Jan 12, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project, with time on the x-axis and temperature in Celsius on the y-axis. Each circle represents a temperature measurement, using d3’s scaleTime and scaleLinear to map the data domain to pixel coordinates. The visualization employs d3.axisBottom and d3.axisLeft with gridlines, and styled text elements for axis labels and title, all rendered as SVG within a 960×500 viewport.

Jan 12, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each circle representing a car. The SVG rendering uses D3 v5's `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines and ticks, and `csv` to load the remote data file. The chart includes labeled axes, a title, and semi-transparent red circles to show overlapping points.

Jan 12, 2021