parshwa30122002@gmail.com

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying sepal width against petal length. Each point is colored by species, with a color legend on the right. Hovering over a legend item highlights the corresponding species’ data points while fading others, using React state for interactivity. The visualization is rendered as an SVG using React components and D3 v5 scales, including `scaleLinear` and `scaleOrdinal`, with CSV data loaded via D3’s `csv` function.

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower. Each circle represents a car model, with a tooltip revealing the vehicle’s name on hover. The visualization is built using the Vega-Lite API, with data loaded from a CSV via `d3.csv`. The code registers Vega and Vega-Lite, configures axis styles for readability, and renders the plot to fill the browser window using `vl.markCircle` and `vl.x().fieldQ`.

Fork of Vega-Lite API Template

Fork of Scatter Plot with Menus

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. Built with React and D3 v5, it renders an SVG with a time-scaled x-axis and linear y-axis, using `scaleTime`, `scaleLinear`, and `curveNatural` to draw a smooth green line. The code employs reusable axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component, with Poppins typography and custom tick styling for a polished presentation.

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset, displayed as circles in an SVG rendered via React. The x-axis uses a time scale with weekly tick labels, while the y-axis shows temperature values from a linear scale. The code leverages d3.scaleTime, d3.scaleLinear, d3.extent, and d3.csv for data loading, alongside React components for reusable axes and marks. Hovering over a circle reveals the timestamp via an SVG title tooltip, and the layout includes rotated and offset axis labels.

Fork of Stylized Scatter Plot

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using UN World Population Prospects 2019 data. The visualization ranks countries by population with native SVG `<rect>` marks, and includes axis labels, tick marks, and a tooltip showing formatted population values via `<title>`. Built with React and d3-scale’s `scaleBand` and `scaleLinear`, the chart applies a drop shadow filter and the Poppins font. The code leverages d3.csv for data loading and d3.format for tick label abbreviation, rendering entirely through React components.

Fork of Axes with React & D3

This example renders a bar chart of the ten most populous countries, with a tooltip showing each country’s population on hover. It uses React’s `useState` and `useEffect` to fetch the data from the United Nations World Population Prospects 2019 CSV via d3’s `csv` loader, then maps the data to SVG rectangles. The axes are built using d3’s `scaleBand` and `scaleLinear`, with gridlines from `xScale.ticks()`. Mouse events trigger a React state change that displays a custom tooltip positioned at the cursor.

Fork of Polished World Map

This world map visualizes country boundaries and landmasses from the World Atlas Topojson dataset using a Natural Earth projection. The map renders as an SVG via React components, with d3.geoPath generating paths for land, graticules, sphere outlines, and interior borders between countries. Land areas are filled in seagreen against a light blue ocean, while graticules and country boundaries appear as white and black strokes. The code uses d3-fetch, topojson’s feature and mesh functions, and d3.geoNaturalEarth1 to produce the polished geographic display.

Fork of Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting miles per gallon against horsepower. Colored circles represent the country of origin, while circle size encodes vehicle weight, with tooltips displaying detailed attributes. The visualization is built using the Vega-Lite API, registering Vega and Vega-Lite libraries with a custom configuration for axis styling and tooltip handling. Data is loaded asynchronously via D3's `csv` function, and the chart renders responsively to fill the browser window using an SVG renderer.

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with circles colored by origin and sized by weight. Tooltips reveal additional attributes like vehicle name, cylinders, and acceleration. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in a fluent JavaScript interface, and renders via D3.js (v5) with dynamic width and height fitted to the browser window. Appearance is customized through a central config object that adjusts axis styles and label typography.

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles from the UCI Auto MPG data set, with point color encoding the region of origin and point size encoding vehicle weight. A tooltip displays the car’s name and origin on hover. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and font sizes. Data is loaded via `d3.csv`, and the chart adapts to the full browser window using dynamic height and width, rendered as an SVG through vega-tooltip for interactivity.

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for classic automobiles, using a scatter plot with circle size encoding weight and color encoding country of origin. Hovering reveals car model names via tooltips. The chart is built with the Vega-Lite API, which translates a declarative specification into Vega and renders as SVG, with data sourced from the UCI Auto MPG dataset fetched via D3’s CSV loader. Custom axis and label styling come from a shared configuration object.

Smiley Face

This interactive React application draws a full-screen smiley face using SVG. The visualization is built with React and ReactDOM, rendering geometric shapes onto a canvas that automatically resizes to the browser window. It constructs the face with yellow circles for the head, black circles for the eyes, and a quadratic Bézier curve for the smile. The code uses absolute window dimensions and applies a Gaussian blur filter to create soft highlights on the irises.