A

Aamir Hameed mir

@meer25800·20 public vizzes

Loading thumbnail…

Fork of Interactive Dashboard showing various charts

This interactive dashboard visualizes flight delay data from a GitHub-hosted CSV, combining six charts into a single view. It shows the top 15 destination airports by flight count, a stacked bar chart of average departure delay times per airline colored by cancellation reason, and four donut charts breaking down departure and arrival delays by airline and airport. The donut charts use `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, with tooltips displaying percentage values. The bar charts rely on `d3.scaleBand` and `d3.scaleLinear`, while all visuals are rendered as SVG with D3 v5.

Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This interactive dashboard visualizes football player performance across European leagues, showing how metrics like goals, shots, and expected goals vary by league and season. It integrates a scatter plot, bar chart, line chart, and parallel coordinates plot, all driven by React state management. Users can filter data through dropdown menus, brush the parallel coordinates to filter players, and hover over marks for details. The visualization leverages D3’s `scaleLinear`, `scalePoint`, `brushY`, and `transition` APIs, rendering animated updates from a Kaggle dataset of top league scorers.

Loading thumbnail…

Fork of Testing out dashboard stuff

A dashboard displays population data for the top ten countries, combining a bar chart and a scatter plot to rank and compare current populations. Built with D3.js, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scalePoint` for the charts, styled with SVG elements. Data is drawn from the World Bank's total population per country dataset, with axis ticks formatted using `d3.format`. The bar chart and scatter plot share the same color scheme, with a color legend for reference.

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API in JavaScript to define the marks and encodings, with data loaded asynchronously via D3’s `csv` method. The chart is rendered as an SVG, and the Vega-Tooltip handler displays detailed vehicle names on hover. The code also customizes axis and label styles for improved readability, following the Vega-Lite configuration format.

Loading thumbnail…

Fork of Responsive Scatter Plot

This responsive scatter plot displays the relationship between bill length and flipper length for penguins, with a gray background aiding point visibility. The visualization uses D3.js to filter invalid data points and render circles with adjustable radius and opacity. It employs the `observeResize` API to track container dimensions, rebuilding the SVG and scales on size changes through `scaleLinear` and d3 axes. The code leverages `d3.select`, `data.join`, and `@curran/responsive-axes` for adaptive rendering, with data sourced from the curated penguins dataset.

Loading thumbnail…

Fork of scatter-plot

This example displays the Iris Dataset, plotting petal width against petal length for 150 individual flowers. The D3.js code uses `scaleLinear` to map data coordinates, and the `axisLeft` and `axisBottom` functions from D3 to render axes. Points are drawn as circles with a randomly selected hue, while the data is loaded via `csvParse` from a CSV file and converted to numeric values.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot explores the Iris dataset, cycling through different feature pairings on the x-axis while keeping sepal length on the y-axis. Colored circles represent three species of iris flowers. The visualization is built using D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function. A `setInterval` loop updates the plot's x-value mapping, redrawing axes and text labels accordingly. The code also includes custom legend labels, a title, and styling applied through SVG attributes.

Loading thumbnail…

Fork of Reusable ScatterPlot for Restaurant Data

This scatter plot visualizes restaurant data, mapping profit in millions against restaurant ratings for each data point. Built with D3.js (v6.7.0) and SVG, it uses a reusable `scatterPlot` function with scales, axes, and circles. The chart automatically cycles through different y-axis variables—restaurant rating, total reviews, and rating again—every 3 seconds, updating the axis labels and redrawing the plot via `setInterval`. Data is loaded from a CSV file hosted on GitHub, and the visualization is styled with the Poppins font and a custom color scheme.

Loading thumbnail…

Fork of Fork of weather data Statistics Dashboard

A weather dashboard displays monthly temperature and pressure trends for Bangalore, Vancouver, and San Francisco across multiple chart types. It combines a line chart, bar chart, stacked area chart, and scatter plot—all rendered on Canvas using Chart.js. Users select cities via header buttons and years from a dropdown, updating chart data and highlighting the selected city’s dataset while dimming others. The scatter chart specifically plots temperature against pressure, and each chart’s colors adjust to reflect the active city. This fork builds upon previous dashboard versions, keeping the same interactive structure.

Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart displays the estimated religious composition of the world’s 20 most populous countries in 2010, using data from the Pew Research Center’s Global Religious Landscape. Hovering over the color legend highlights a specific religion across all bars, fading other segments and raising the selected stack to the front. Built with D3 v7, it uses `scaleOrdinal` with `schemeCategory10` for colors, `stack` for data aggregation, and `scaleBand`/`scaleLinear` for axes. The visualization also employs `flatRollup` for grouping and responsive layout via `observeResize`.

Loading thumbnail…

Fork of A7_Multi-line Chart

This multi-line chart displays monthly average temperatures for four U.S. cities—NYC, LA, Chicago, and Houston—with each city represented by a colored line and corresponding data points, parsed from a CSV file that includes degree symbols. The visualization uses D3 v7 with SVG rendering, employing scales for positioning data across the months, drawing paths via the `d3.line` generator, and adding interactive tooltips on hover that display the specific city and temperature for each month.

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical organization of countries grouped by continents and subregions, with each country name positioned along circular branches radiating from a central "World" node. The code uses d3.hierarchy and d3.cluster to compute the tree layout, then projects node positions into polar coordinates for the radial arrangement. SVG paths with bezier curves connect parent and child nodes, while text labels employ font sizing based on depth and rotation for smaller branches. Panning and zooming are enabled through d3.zoom, applied to an SVG group containing all links and labels.

Loading thumbnail…

Fork of Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization maps earthquakes from the USGS API as colored circles sized by magnitude. A brush tool on the map filters which earthquakes appear in a linked scatter plot, enabling coordinated views of depth, time, and magnitude. The D3 code uses `geoEquirectangular` projections, `d3.brush`, and `d3.scaleOrdinal` to categorize depth into shallow, intermediate, and deep classes. Clicking a circle opens the earthquake’s URL, while tooltips provide detailed information for both map and scatter plot points.

Loading thumbnail…

Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization combines a world map and scatter plot to explore earthquake data from the USGS API. Users brush on the map to select earthquakes, which highlights corresponding points in the scatter plot. Map circles display magnitude through size and depth through a color legend, while clicking a circle opens its USGS page. The scatter plot adds tooltips with details. The visualization uses d3-geo projections and geoPath for mapping, d3-brush for selection, and d3-scaleOrdinal for color encoding, with topojson-client for world atlas data.

Loading thumbnail…

Fork of react first level drilldown map using zoom

An interactive drill-down map of India lets users click state boundaries to zoom into district-level geography. Built with React and D3 v6, the visualization loads TopoJSON data and renders SVG paths via `d3.geoPath` with a Mercator projection. Clicking a state triggers `pathGenerator.bounds()` to compute the target region’s bounding box, then animates a `d3.zoom` transition over 500 milliseconds to scale and center the view. The drill-down filters district features based on the selected state’s name, and a dynamic stroke-width adjustment maintains visual clarity during zooming.

Loading thumbnail…

Fork of Responsive Bar Chart

This responsive bar chart displays the top 10 countries by total population as of January 1, 2024, using data from the UN population estimates. The chart uses D3's `scaleBand` and `scaleLinear` to map country names and population values, with bars rendered as SVG rectangles. It leverages the `observeResize` and `axes` functions from the `@curran/responsive-axes` library to adapt the chart’s dimensions and axis labels to the container’s size. The visualization includes an inner grey rectangle and explicit margins for a clean layout.

Loading thumbnail…

Fork of Fork of Responsive Bar Chart

This bar chart displays categorical data as vertical bars, encoded with D3 scales for position and height. The visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and updates bar rectangles via a data join. It integrates the `@curran/responsive-axes` library to render labeled axes with configurable margins and offsets, plus an inner background rectangle. The chart is responsive, recalculating scales and bar geometry based on the supplied `width`, `height`, and margin parameters, with padding controlling bar spacing.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static collection of SVG shapes—circles, rectangles, lines, and a polyline—styled with Cascading Style Sheets (CSS) and inline attributes. It shows how grouped elements can share fill and stroke properties, while individual shapes can override fill colors like red and green. The rendering uses native SVG elements within an HTML document, with CSS classes controlling stroke width, color, and connection styling. No JavaScript libraries are used; the visualization relies solely on standard SVG markup and CSS rules to define its visual appearance.

Loading thumbnail…

Fork of Fork of Curran lesson - Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition using SVG. It shows layered horizontal and vertical strips of color intersecting within two circular masks, creating a dynamic pattern of bars confined to circular regions. The rendering uses the SVG DOM API, creating equal-width rectangle strips for vertical and horizontal bars, with a `mask` element defining a circular aperture in the center. Each strip is added via JavaScript loops, and the masks invert their fill colors to alternate which sets of bars remain visible. The code relies entirely on native browser APIs, without external libraries.

Loading thumbnail…

Fork of Making a face with Curran's help

This example illustrates how to construct a simple cartoon face from basic SVG shapes. A yellow circle forms the head, with two eyes and animated eyebrows that move up and down over time, and an arc path for a mouth. The code uses the D3.js library, specifically the `select`, `append`, `attr`, and `transition` APIs, to build and manipulate the SVG elements. It employs a transition duration of 2000 milliseconds to create the brow animation, and an arc function to define the mouth’s path.