Rupendra Pamisetty

Fork of Missing Migrants Scatter Plot Log Scale

A scatter plot of the Missing Migrants Dataset visualizes each event by its reported date on the time axis and the total dead and missing on a logarithmic scale. The log scale compresses the wide range of casualty counts, making lower values more distinguishable. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLog` for the axes, and renders data points as SVG circles. Axis ticks are generated by `AxisBottom` and `AxisLeft` components, with interactive tooltips provided by SVG `title` elements.

Sep 3, 2024

Fork of Fork of Multiple Views with Brushing

This visualization combines a bubble map with a date histogram to explore missing migrants globally. The map projects city locations using a natural Earth projection and scales circle radii by the square root of the death count. Brushing on the histogram filters the map in real-time, using `d3.brushX` to select a date range. The React app uses `d3.scaleSqrt`, `d3.geoPath`, and `d3.histogram` to process data from the Missing Migrants dataset and render SVG marks.

Aug 30, 2024

Fork of Multiple Views with Brushing

This interactive visualization combines a world bubble map with a date histogram, enabling linked brushing and filtering. The map displays the total number of dead and missing migrants by location, with circle size proportional to the count. Users brush a time range on the histogram to filter the map’s data in real time. Built with React and D3 version 5, it uses D3’s `geoNaturalEarth1` projection, `geoPath`, `geoGraticule`, and `scaleSqrt` for the map, and `scaleTime`, `histogram`, `brushX`, and `select` for the histogram. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Aug 29, 2024

Fork of Multiple Views Cleanup

This visualization combines a bubble map and a date histogram to show missing migrants worldwide. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, with circle sizes scaled by d3.scaleSqrt based on total dead and missing. The histogram bins reported dates by month using d3.bin and timeMonths, summing casualties per bin. Data comes from a CSV of Missing Migrants Global records, rendered as SVG with React components.

Aug 29, 2024

Fork of Missing Migrants on a Map

A world map displays circles at the coordinates of missing migrant incidents, with circle area encoding the reported number of dead and missing individuals for each event. The visualization uses a square-root scale for point sizing and overlays semi-transparent teal circles on a light gray basemap. Built with D3 v5 and React, the projection uses `geoNaturalEarth1` and renders geographic features with `geoPath` and `geoGraticule`. Data comes from the Missing Migrants Dataset, with country boundaries sourced from the World Atlas TopoJSON.

Aug 28, 2024

Fork of Missing Migrants Scatter Plot

This fork of the Missing Migrants scatter plot visualizes individual migration-related events over time, mapping reported dates on the x-axis against total dead and missing counts on the y-axis. Built with React and rendered as SVG using d3.scaleTime and d3.scaleLinear, it loads data via d3.csv from a subset of the Missing Migrants Dataset. Each circle represents an event, with basic tooltips provided through SVG title elements and custom axis components generating ticks and labels.

Aug 28, 2024

Fork of Sized Points on a Map

This example visualizes cities worldwide with populations exceeding 50,000, using point size to represent population magnitude. A natural Earth projection displays country boundaries and graticules, while semi-transparent teal circles overlay city locations. The visualization uses React components with D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for map rendering, and `scaleSqrt` for mapping population values to circle radii. City data originates from Simplemaps, and country boundaries come from the World Atlas TopoJSON source, rendered as SVG paths within a React application using d3.v5.

Aug 23, 2024

Fork of Points on a Map

This visualization displays a world map with cities whose populations exceed 50,000, sourced from the Simplemaps World Cities Database. The map uses a natural Earth projection, rendered as SVG through React, with country boundaries from the World Atlas TopoJSON. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` functions draw the sphere, graticules, and landmasses, while city coordinates are projected and plotted as semi-transparent teal circles. The styling employs muted grays for geographic features, creating a clean backdrop for the city data points.

Aug 23, 2024

Fork of Interactive Color Legend

This scatter plot of the Iris dataset shows the relationship between petal length and sepal width, with each point colored by species. An interactive color legend on the right allows hovering over a species to highlight its points and fade the others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and a `ColorLegend` component that triggers hover events to filter and redraw the data.

Aug 23, 2024

Fork of Scatter Plot with Color

This fork of the classic scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is rendered as an SVG circle, with its fill color determined by the flower’s species via a `scaleOrdinal` color scale. The React component uses `d3.scaleLinear` for both axes and `d3.extent` to compute domains, while custom `AxisBottom` and `AxisLeft` components generate gridlines and tick labels. The code loads data asynchronously from a CSV URL using `d3.csv` and styles the visualization with the Poppins font.

Fork of Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, a classic multivariate dataset containing measurements of sepal and petal dimensions across three iris species. Users can dynamically select which attributes to plot on the x and y axes using two dropdown menus, allowing exploration of relationships between all four numeric measurements. Built with React and D3 v5, the visualization renders as an SVG using d3.scaleLinear for axes and data scaling, with custom AxisBottom, AxisLeft, and Marks components mapping data points as circles. The code leverages d3.csv for asynchronous data loading and React state management (useState, useCallback) to update the visualization in real-time when menu selections change.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which attributes to plot on the x and y axes via dropdown menus. The visualization is rendered as an SVG using React components for axes and data marks. It employs D3's `scaleLinear` for coordinate mapping and `extent` for scale domains, while React's `useState` manages the selected attribute values. The plot updates the axes and a tooltip showing the x-value for each circle, offering a flexible exploration of the dataset's dimensions.

Fork of Scatter Plot with Menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles scaled by d3.scaleLinear, with axes generated from tick values. Hovering over a point reveals its precise value via an SVG title tooltip.

Fork of Polished World Map

This example presents a polished world map that emphasizes visual clarity through country boundaries, graticules, and a subtle color scheme. The visualization renders geographic data from the World Atlas TopoJSON using React with D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses, country interiors, and the globe sphere. It also incorporates a `geoGraticule` to display latitude and longitude lines. The underlying data is fetched via `d3.json`, then processed with `topojson.feature` and `topojson.mesh` to extract land features and interior borders.

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The code uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with React rendering SVG circles for each data point. Weekly temperature trends are shown across a one-week period, with ticks formatted using d3.timeFormat. The visualization includes axis labels and tooltips via SVG title elements, loaded asynchronously with d3.csv in a custom useData hook.

Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization renders as scalable vector graphics (SVG) using `scaleBand` and `scaleLinear` for axes, with tick marks styled via CSS. The chart includes hover tooltips showing population values in a formatted "B" (billion) notation, and the Poppins font from Google Fonts gives the visualization a modern, clean aesthetic.

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The example demonstrates how to build interactive visualizations using React for component structure and D3 v5 for scales, axes, and data loading. Custom React components handle axis rendering with `scaleLinear` for both dimensions, while SVG circles represent each data point. The code includes formatting utilities like `format` for axis tick labels and uses `csv` from D3 to load the dataset.

Fork of Stylized Line Chart

This example visualizes weekly temperature data from San Francisco using a curved line chart built with React and D3 v5. The chart maps timestamps to the x-axis and temperature values to the y-axis, with the line rendered as an SVG path using d3.line() with curveNatural. Axis ticks are generated through custom React components—AxisBottom and AxisLeft—which scale the data using d3.scaleTime and d3.scaleLinear. Data loads asynchronously via d3.csv from the Data Canvas Sense Your City dataset, with styling applied through a Poppins font and teal color accents.

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of the auto-mpg dataset, showing the relationship between miles per gallon and horsepower, with color encoding by origin and size by horsepower. The visualization renders as an SVG, leveraging D3 and Vega-Lite for chart construction and encoding, and uses Vega-Tooltip for interactive data tooltips. The plot is configured for automatic resizing and includes custom axis styling for improved readability.

Aug 13, 2024