yakupermurat

@yakupermurat·6 public vizzes

Circles on a Map

This visualization uses proportional circles to show each country’s population, with circle area scaled by the 2018 population data from a CSV file. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath`, while a square-root scale (`d3.scaleSqrt`) determines circle radii. Users can pan and zoom via `d3.zoom`, and hovering a country reveals its name and population in a tooltip. A color legend and size legend are built with reusable D3 functions, and the map data comes from the visionscarto world atlas TopoJSON.

Jun 5, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It shows population values on a linear scale and country names on a band scale, with customized axes that remove domain lines and format tick labels using D3’s `format`. The visualization is built with D3 v5, rendering SVG elements via `d3.select`, `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV file, with population values multiplied by 1000 for accurate representation.

Jun 5, 2020

Loading thumbnail…

Circles on a map

This map visualization displays the total confirmed COVID-19 cases per country as of May 16, 2020, using red circles sized proportionally to case counts overlaid on a world map. The geographic boundaries are drawn using `d3.geoPath` with a `geoNaturalEarth1` projection, while circle radii are scaled with `d3.scaleSqrt`. Data comes from a CSV file of country-level COVID-19 statistics, joined to the world-atlas TopoJSON, and is processed via custom `loadAndProcessData` functions. A size legend and color legend are rendered using SVG.

Jun 5, 2020

Loading thumbnail…

Circles on a Map

This visualization shows world population by country using scaled circles over a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see regional names and exact population figures. The code uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom`, rendering SVG paths for country borders and semi-transparent circles. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Jun 5, 2020

Loading thumbnail…

Force Directed Graph

This example shows a force-directed graph with nodes connected by links of varying weights, representing relationships between chemical elements and compounds. The code uses d3.forceSimulation to position the circular nodes and curved paths for the links, with text labels for each node. The visualization is rendered as an SVG using D3 v5, with node colors and stroke widths determined by the link values in the static JSON dataset.

Jun 5, 2020

Loading thumbnail…

Tree Fractal

This interactive visualization renders a branching tree fractal on an HTML5 Canvas. Mouse movement dynamically changes the branch length ratio and angle difference, altering the tree's shape in real time. The code uses the Canvas API’s `getContext('2d')`, `moveTo`, `lineTo`, and `stroke` methods to draw recursive branches. The tree structure emerges from a recursive `drawTree` function that splits into left and right branches until reaching a depth of zero, with each branch’s length and angle determined by cursor position.

Jun 5, 2020