Skip to main content
Log in
M

martin

@martin0310·15 public vizzes

Loading thumbnail…

World_Map_Practice

This interactive world map visualizes the country boundaries and names from the world-atlas dataset (50m.tsv and 50m.json) using a Natural Earth projection. The map uses D3 v5 to render the geographic paths as SVG elements, with the topojson library converting the TopoJSON to GeoJSON features. The visualization supports zooming and panning through the `d3.zoom` module, and country tooltips display the name from the TSV data on hover, with the fill color changing to red.

Mar 20, 2022
Loading thumbnail…

World_Map_practice

This interactive world map displays all countries as light green shapes on a blue sphere, highlighting them in red on hover. It renders geographic boundaries using the `d3.geoPath` projection with the `geoNaturalEarth1` projection and supports pan and zoom through the `d3.zoom` API. The map is built from world-atlas TopoJSON and TSV data, which supplies country names via ISO codes, and each shape includes a tooltip showing the country name.

Mar 20, 2022
Loading thumbnail…

Polished_Scatter_Plot_with_Menus

This interactive scatter plot displays the Iris Dataset, with dropdown menus to select which floral measurements (sepal length, sepal width, petal length, or petal width) appear on the x- and y-axes. The visualization updates the scales and points in real time based on the user's selections. Built with React and rendered as SVG, it uses a custom hook with `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` to compute scales, and reusable components for axes and marks, including tooltips rendered via SVG `<title>` elements.

Aug 27, 2021
Loading thumbnail…

Pathetic_Bar _Chart

This example displays the ten most populous countries as horizontal bars with no axes, labels, or scales visible. The bars are rendered as SVG rectangles using React components, with dimensions computed from United Nations World Population Prospects 2019 data loaded via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis placement of countries and `d3.scaleLinear` for the numeric x-axis range, mapping population values to pixel widths. The visualization intentionally omits standard chart furniture, presenting a deliberately minimal and "pathetic" representation.

Aug 16, 2021
Loading thumbnail…

Smiley_Faces

A grid of 20 randomly generated cartoon faces appears, each with a gradient-filled circular background, stylized eyes, a radial-gradient nose, and an arched mouth created using a D3 arc path. The faces vary in stroke width, eye offset, radius, mouth size, and nose dimensions due to randomized props. Built with React and D3 v6, the SVG components animate the background gradient color over a 12-second loop. The example demonstrates reusable React component composition with D3 shape generators for custom data-driven illustrations.

Aug 14, 2021
Loading thumbnail…

Points_on_a_Map

This visualization displays a world map with hundreds of cities, each represented as a small circle with a soft opacity. It uses a Natural Earth projection via `geoNaturalEarth1` and renders geographic features through `d3.geoPath`, including graticules, land masses, and country borders. City coordinates are projected from longitude and latitude data, and the circles are drawn as SVG elements. The map aggregates city data from the Simplemaps World Cities Database and World Atlas TopoJSON, with React managing the component state and data loading.

Aug 9, 2021
Loading thumbnail…

Scatter_Plot_with_Color_Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species, with each point colored by species and accompanied by a categorical color legend. The React-based visualization uses d3.scaleLinear for both axes, d3.scaleOrdinal for color mapping, and renders as SVG. The code imports axis components, color legend, and marks, while loading data asynchronously via d3.csv. Interactive tooltips appear on hover through SVG title elements, formatted using d3.format.

Jul 31, 2021
Loading thumbnail…

Menus_with_React

This example demonstrates a simple pet-selection interface with a large, interactive dropdown menu. It shows a label and a select element populated with six animal options, defaulting to "hamster," where changing the selection logs the new value to the console. Built as a React application using the `useState` hook, the code defines a reusable `Dropdown` component that manages the selected value through an `onSelectedValueChange` callback. The interface is rendered via ReactDOM, with the select and label styled at a font size of 4em for high visibility.

Jul 20, 2021
Loading thumbnail…

World_Map

A world map visualization displays country boundaries and graticules, styled with a teal landmass and light sphere. The map uses d3.geoPath with a geoNaturalEarth1 projection to render land features and a wireframe mesh that connects country interiors. It sources World Atlas TopoJSON data, processed with topojson.feature and topojson.mesh, and is built in React with SVG rendering. The visualization is polished with CSS styling for the land, sphere, and graticule paths.

Jul 19, 2021
Loading thumbnail…

Fork of Smiley Face Part 6(React.js Practice)

A grid of twenty-five randomly generated smiley faces fills the viewport, each face varying in eye color, facial proportions, and orientation. The faces are constructed from modular React components that compose SVG circles, rectangles, and D3 arc paths for the mouth and tongue. Animated eyebrows raise and lower at random intervals, and gradient fill backgrounds rotate per face. React’s component model, combined with D3’s arc generator, structures the visualization, while inline SVG animations and CSS hover effects drive the dynamic behavior.

Jul 15, 2021
Loading thumbnail…

New_Scatter_Plot

This scatter plot displays the relationship between GDP per capita and population for countries, using World Bank data. The visualization uses red, semi-transparent circles to represent each country, with axes showing population in millions and GDP per capita in thousands. Built with D3 v7, the code applies `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and renders the plot as SVG. The chart includes gridlines, axis labels, and a title, with data loaded via `csv` from a GitHub-hosted dataset.

Jul 14, 2021
Loading thumbnail…

Scatter Plot

This scatter plot visualizes population density for the top 20 densest cities or regions, using data from World Population Review 2021. Density values are divided by 1000 and plotted on the x-axis, with country names on the y-axis. The visualization is rendered as an SVG using React, D3 v7, and the `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.axisBottom` APIs. Circle marks are positioned with `cx` and `cy` attributes, and axis tick lines use a light gray stroke.

Jul 14, 2021
Loading thumbnail…

Population Density

This bar chart ranks the top 20 densest cities or regions by population density, using data from the World Population Review 2021. The SVG visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis, with d3.axisBottom and d3.axisLeft rendering the gridlines and labels. Values are normalized by dividing population density by 1000, and the chart includes rotated axis labels and a title. The bars are drawn as SVG rect elements with a steelblue fill, styled via CSS.

Jul 11, 2021
Loading thumbnail…

PopulationRanking

This example shows a horizontal bar chart ranking ten countries by population, using a bar length proportional to each country’s population value. The visualization loads data from a CSV file, then uses `d3.csv` and `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` to render the axes. The bars are drawn as SVG `rect` elements in a React-free setup, using D3 v7 and a plain HTML page. Population values are multiplied by 1000 before rendering.

Jul 9, 2021
Loading thumbnail…

Practice

This example displays a full-screen page with the text “Hello My D3 Version 3!” centered in the browser window. The visualization uses D3 v6 through a bundled JavaScript file, importing the `select` function from the D3 module to target the body element and set its text content. The page styling employs a large font size and centered text alignment to emphasize the greeting. The code demonstrates a minimal D3 setup, with the HTML structure linking to the D3 library and the main script, while the body remains empty until the script populates it.

Jul 3, 2021