Dhaval Potdar

@dhavalpotdar·6 public vizzes

Temperatures in San Francisco Scatterplot

This scatterplot visualizes automotive data from the auto-mpg dataset, plotting cylinders on the x-axis against horsepower on the y-axis. Each data point is rendered as a steel-blue circle using SVG, with axes created via d3.axisLeft and d3.axisBottom. The scales are constructed with d3.scaleLinear, and the chart includes a titled population label, though the data actually reflects vehicle specifications rather than population figures. The visualization uses d3.csv to load the external dataset and applies formatting with d3.format for axis tick labels.

Dec 9, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays automobiles from the auto-mpg dataset, mapping engine cylinders on the x-axis against horsepower on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` with tick lines. Margins and inner dimensions position the plot area, while circles are appended to represent individual car models. The data is loaded via `csv` from a VizHub-hosted URL and numeric fields are coerced before rendering. Axes labels and a title clarify the chart’s content.

Dec 9, 2019

Loading thumbnail…

Scatter Plot

This scatter plot compares car weight and acceleration using data from the auto-mpg dataset. The visualization displays each car as a semi-transparent circle, with weight on the x-axis and acceleration on the y-axis using d3.scaleLinear for both scales. Axes are generated with d3.axisLeft and d3.axisBottom, including custom tick styling and labels. The code uses d3.csv to load data, d3.extent for domain calculation, and renders the chart as SVG with margins defining the inner plotting area.

Dec 5, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, mapping population on the x-axis and country names on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for the x-axis, and d3.scalePoint for the categorical y-axis. The code renders SVG circles and axes using d3.axisLeft and d3.axisBottom, with a formatted tick label using d3.format.

Dec 5, 2019

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

Nov 29, 2019

Loading thumbnail…

Let's Make a face with D3.js

The example builds a cartoon face from basic SVG shapes using D3.js v5. It draws a yellow circle for the head, black circles for the eyes, and an arc-based path for the mouth via d3.arc. The right eye uses chained transition.attr calls to animate its vertical position twice, creating a blinking effect. The code imports select and arc directly from the d3 module and renders everything with SVG elements in a fixed 960×500 viewport.

Nov 27, 2019