Lakshmi9666

@Lakshmi9666·6 public vizzes

Scatter Plot with ages and gender

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red circles on an SVG canvas. Users select which columns map to the X and Y axes through dropdown menus, with animated transitions moving points to their new positions. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` to render axes and animate the scatter plot. The color and opacity styling comes from CSS rules applied to the circle elements.

Apr 11, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes such as horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes using dropdown menus, with the chart animating points to their new positions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisLeft and d3.axisBottom for rendering axes. Custom dropdown menu and scatter plot modules manage user interactions and SVG rendering with animated transitions.

Apr 11, 2020

Loading thumbnail…

Coronavirus Deaths by Country over Time (with Voronoi Hover)

An interactive line chart shows cumulative COVID-19 deaths over time for each country, using data from the Johns Hopkins Coronavirus Dataset. A Voronoi overlay, built with `d3.Delaunay` and `d3.voronoi`, maps every pixel to the nearest data point, enabling hover to highlight the corresponding country’s line and display a tooltip with the death count and date. The chart uses a logarithmic y-scale (`d3.scaleLog`) and renders as SVG via React, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Apr 8, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the incubation distribution of cases over days, with a linear x-axis for case numbers and a banded y-axis for day values. It demonstrates custom axis styling by removing domain lines, adding rotated and formatted labels, and using a custom tick format that abbreviates large numbers. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering SVG rectangles from `data2.csv` with steelblue fills and customized tick text.

Apr 8, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, using red semi-transparent circles. Built with D3 v5, the code loads CSV data, applies linear scales, and renders SVG axes with tick marks and labels. It uses `d3.csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the chart, with formatting applied via CSS classes for titles and axis text.

Apr 5, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled accordingly. The code uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to map data to the SVG canvas, while `csv` loads the external dataset. Grid lines and axis labels are styled via CSS, and the visualization is rendered entirely as SVG elements.

Apr 5, 2020