Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Hhollyjpotter
Last edited Apr 7, 2022
Created on Apr 7, 2022
Forked from Bar Chart

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.

AI-generated description

States with Stamen employees as of January 2022

MIT Licensed

Similar vizzes

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
81% match
Loading thumbnail…

data viz d3

This example shows a horizontal bar chart of planetary diameters, sorted in descending order from Jupiter to Pluto. The visualization uses D3 v6’s `scaleLinear` and `scaleBand` to map diameter values and planet names, rendering SVG rectangles bound to data from a CSV file. The chart reads the `planets.csv` dataset, converting the `Diameter` field to numbers, and displays a clean, static layout with margins and a white background.

Aannprzy
80% 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
80% match
Loading thumbnail…

DV Group 2

This example shows the diameters of the eight planets and Pluto as horizontal bars, sorted from largest to smallest, using an SVG bar chart. The chart is generated with D3 v6, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file and rendered as `rect` elements.

Ddabrze3@gmail.com
79% match
Loading thumbnail…

DV Group 1

This chart shows the diameters of the planets in our solar system as a horizontal bar chart, using data loaded from a CSV file. The bars are drawn as SVG rectangles, with a linear scale for the diameter values and a band scale for the planet names, sorted in descending order. The visualization is built with D3 v6, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered into an SVG element within an HTML page.

Ddabrze3@gmail.com
78% match
Loading thumbnail…

Exoplanets

A circle-packing visualization displays the relative sizes of planets in our solar system alongside hundreds of confirmed exoplanets, with each circle’s area proportional to its radius. A quantized color scale encodes planet radius, while a tooltip reveals the exoplanet’s name, radius, and distance from its star. The data comes from the Planetary Habitability Laboratory, and the layout is computed using d3.pack with padding, rendered as SVG circles. The code filters the CSV data to separate solar-system planets from exoplanets and uses d3.scaleQuantize for color mapping.

Mmbostock
77% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
76% match
Loading thumbnail…

Untitled

A D3.js SVG visualization loads node data from a remote JSON file and renders it as a static scatterplot of circles. Nodes are positioned in a loosely grouped grid pattern, with each group assigned a horizontal offset and nodes within a group stacked vertically. The code determines group count and placement by parsing the `group` field of each node, then draws all circles with a fixed fill color and a radius based on the total number of groups. The example reads from a GitHub-hosted JSON dataset and uses only D3's basic selection and data-binding APIs, with no animation or interaction.

Pprasad2707
76% match