DV Group 2

100%

✓ Published0🌍 Public

Last edited May 31, 2021

Created on May 31, 2021

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.

AI-generated description

A template for creating SVG with D3 and CSS.

MIT Licensed

Similar vizzes

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

90% 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

87% 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

86% 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

79% 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

79% match

Loading thumbnail…

Cars_Model

This example shows the diameters of the first 12 planets from a CSV dataset as a bar chart, with planet names on the x-axis and diameter in kilometers on the y-axis. Bars are rendered in SVG using d3.select and d3.csv, with d3.scaleBand and d3.scaleLinear mapping the data. Axes are drawn via d3.axisBottom and d3.axisLeft, while hover effects change bar color to orange. The chart loads data from a gist URL and includes rotated x-axis labels for readability.

AALIMINETI SPOORTHY REDDY

78% match

Loading thumbnail…

Solar_System_Bar_Graph

This visualization shows the diameters of planets in kilometers using a bar chart, with each bar colored distinctly and a corresponding legend. The data is loaded from a CSV file via `d3.csv`, parsed, and sliced to the first 12 entries. The bars are rendered as SVG rectangles using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. Both axes are labeled, and axis ticks are rotated for readability.

AALIMINETI SPOORTHY REDDY

77% match

Loading thumbnail…

Solar_System_Multi_Series_Chart

This example visualizes planet diameters and orbital periods with a combined bar chart and line chart. Purple bars represent each planet’s diameter in kilometers, while a yellow curved line with dots indicates orbital period in days. The visualization is built with D3 v7 using SVG rendering, and it loads planetary data from a remote CSV file. It uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axes, and `d3.line` with `d3.curveMonotoneX` to draw the line.

AALIMINETI SPOORTHY REDDY

76% match