Skip to main content
SimilarExport ZIP
100%

marsGravity

✓ Published0🌍 Public
Hhanulik.ondrej@gmail.com
Last edited Aug 30, 2024
Created on Aug 29, 2024
Forked from mars2.0

This example compares gravity on Earth and Mars by depicting identical human figures on each planet, with the figure on Mars shown smaller and with shorter guide lines to illustrate reduced gravitational pull. The visualization uses D3 v4 to construct SVG shapes, including circles for the planets, paths for the figures and directional arrows, and rectangles for the guide lines. It reads data from a CSV file containing environmental metrics, though the comparison focuses on the visual representation of gravity rather than plotting those values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

mars2.0

This visualization compares temperature ranges on Earth and Mars using vertical scales and colored bars, with labeled markers for average, maximum, and minimum temperatures alongside planet icons. The dark background and planet circles frame the data prominently. The code uses D3 v4 selections and SVG primitives (`append`, `attr`) to construct all elements manually, reading no external data file despite the presence of `data.csv`. Temperature values are positioned via hard-coded pixel offsets and spacing constants, with white tick marks and pointer rectangles indicating specific measurements.

Hhanulik.ondrej@gmail.com
77% match
Loading thumbnail…

Mars on a WebGL globe

This interactive visualization presents a rotating Mars globe rendered on a canvas using WebGL, with the planet’s surface displayed as a color mosaic from USGS imagery. Users can drag to spin the globe, which is overlaid with white markers, semi-transparent polygons, and red links depicting mission-related paths and regions. The implementation relies on D3 v5, including `d3.geoPath` and its projection tools, to compute the orthographic projection and mouse event handling. A custom WebGL fragment shader performs the inverse projection and pixel blending directly on the GPU, while SVG layers for polygons, links, and mission highlights sit atop the canvas.

PPhilippe Rivière
73% match
Loading thumbnail…

mars

This example demonstrates a collection of basic D3.js v4 shapes and drawing techniques on a green SVG canvas. It shows circles, rectangles, arcs, lines, and data-driven line and bar charts using `d3.arc()` and `d3.line()`. The code includes static elements bound with `.datum()`, a data join with `.data()` and `.enter()`, and a custom path built via `d3.path()`. No external data source is used; all values are hardcoded in the script.

Hhanulik.ondrej@gmail.com
73% match
Loading thumbnail…

marsIc

This example demonstrates various SVG shape drawing techniques using D3.js v4, including arcs created with `d3.arc()`, lines via `d3.line()`, and data-driven rectangles bound through `selection.data()` and `selection.enter()`. The visualization also includes circles, rectangles, and path elements constructed with `d3.path()`. The code shows how to bind static data using `datum()`, apply transformations like rotation and translation, and build a custom path for a yellow outline. The sample data comes from `employee.csv`, and the rendering uses an SVG container with a green background.

Hhanulik.ondrej@gmail.com
69% match
Loading thumbnail…

DV vizualization 1

This visualization displays the physical characteristics of planets in SVG using D3.js v6. It loads planetary data from a CSV file and maps each planet’s Diameter to a linear scale, `d3.scaleLinear`, for potential horizontal positioning. The code initializes an SVG canvas with fixed dimensions and sets a white background, while the rendered output remains incomplete as data loading and drawing logic are only partially implemented. The visualization relies on D3’s selection and scale APIs, with styling defined in an external CSS file.

Sskszymon20
69% match
Loading thumbnail…

Untitled

This example shows the diameters of planets in kilometers, with each planet represented as a dot on an SVG scatterplot rather than a bar chart. The x-axis maps planet names using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` for diameter values. Data is loaded from a CSV via `d3.csv`, and circles are appended to a group container with an explicit transform offset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the visualization is built entirely with D3 v7 and SVG, drawing from a dataset of planet measurements.

Hhollyjpotter
67% match
Loading thumbnail…

D3 Barchart

This example visualizes the diameters of planets in our solar system using a horizontal bar chart built with D3.js. The bars are rendered as SVG rectangles, scaled using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, which lists planet names sorted in descending order by diameter. The chart imports data from `planets.csv`, converts the diameter strings to numbers, and displays axes generated with `d3.axisLeft` and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied via a group transformation.

Ddabrze3@gmail.com
66% match
Loading thumbnail…

Missions to Mars Urquhart Graph

This interactive visualization maps the locations of Mars lander missions on a globe, overlaying a red Urquhart graph derived from the landing sites’ Voronoi diagram. Moving the cursor selects the nearest mission, causing its Voronoi cell to highlight and radiate green lines outward. The globe is rendered via WebGL with a shader for orthographic projection, using a USGS Viking mosaic texture. The graph is computed with `d3.geoVoronoi`, and the mission data comes from Ryan Hodges’ GeoJSON dataset.

PPhilippe Rivière
66% match