Fork of Fork of Customizing Axes

100%

Fork of Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Jul 20, 2021

Created on Jul 19, 2021

This scatterplot displays the relationship between vehicle weight and model year for cars in the auto-mpg dataset, with each circle representing a car and its position determined by weight (x-axis) and year (y-axis). The chart uses D3 v5’s `scaleLinear` for both axes and customizes axis appearance with `axisLeft` and `axisBottom`, removing domain lines and adjusting tick styling. Data is loaded from a remote CSV file, processed by converting string values to numbers, and rendered as semi-transparent SVG circles. The visualization demonstrates axis customization techniques like tick formatting, tick sizes, and rotated labels.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various automobile models, with each point representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to construct customized axes with removed domain lines and formatted tick labels, such as converting billions to B. Data is loaded from the auto-mpg.csv dataset. The visualization also adds custom axis labels and a title, demonstrating how to tailor D3's default axes for clearer data presentation.

DDurga Prasad

91% match

Loading thumbnail…

Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various car models, with each point representing a vehicle from the auto-mpg dataset. The chart emphasizes customized axes using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` functions, which are enhanced with tick marks that span the full plot area, custom tick formatting (e.g., converting billions to ‘B’), and rotated axis labels. The SVG rendering includes semi-transparent yellow circles, a purple title, and styled tick texts, demonstrating how to tailor axes for clarity and visual appeal.

SSACHINSHUKLA99

88% match

Loading thumbnail…

Customizing Axes

This bar chart displays the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing one vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render customizable axes with extended tick lines that span the chart interior, removed domain lines, and custom axis labels. The plot margin is set to accommodate rotated y-axis text, and the data is loaded via `csv` from a remote file before being scaled and drawn as semi-transparent red circles in an SVG.

Ggcappadaniel

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between car weight and model year, with each point representing a vehicle from the auto-mpg dataset. The visualization uses D3.js v5 to render SVG circles with red, semi-transparent fill, mapping weight to the x-axis and year to the y-axis. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, while scales are created with `d3.scaleLinear` and domains set via `d3.extent`. Data is loaded asynchronously from a CSV file using D3’s `csv` method, with numeric fields parsed for plotting.

AAditya-me

86% match

Loading thumbnail…

Fork of Fork of Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, displaying each vehicle as a semi-transparent black circle. The D3.js v6 code uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct the axes with grid lines and labels, while `csv` loads the remote dataset. The SVG rendering applies a light gray background and custom styling for ticks and titles.

Aannadehtiarova

86% match

Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset. The visualization employs d3.scaleLinear for both axes, with axisBottom and axisLeft generating tick marks and grid lines. Data points are rendered as semi-transparent steelblue circles via SVG circle elements, sized at a constant radius of 18 pixels. The chart includes axis labels and a title, with all styling handled through external CSS.

Ttheaddies

85% match

Loading thumbnail…

Fork of Cars Scatter Plot

This fork of a cars scatter plot visualizes the relationship between horsepower and weight for a dataset of automobiles. The code uses d3.csv to load the auto-mpg dataset, d3.scaleLinear for both axes, and d3.axisBottom with d3.axisLeft to render the chart, with circles drawn in SVG. The styling, including tick labels and axis labels, is defined in an external stylesheet, and the visualization includes grid lines generated through tickSize properties.

KKHUN LOUN ZAI

85% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset, with each red circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes, while circles are appended via `selectAll` and `enter`. Data is loaded as CSV and parsed with numeric conversions. The SVG rendering includes custom axis labels and a title, styled through CSS with opacity and tick formatting.

GGerasimos Katsagannis

85% match