M

mkt-ds

@mkt-ds·39 public vizzes

Loading thumbnail…

[test] On-time performance of top-5 busiest airports in USA

A radial line chart shows the average departure delay for the five busiest US airports across months, with each airport’s performance traced as a colored, closed loop around a circular timeline. A legend indicates airport names and colors; hovering over a legend entry highlights that airport’s trace while dimming the others. The visualization is built with React and rendered as an SVG, using D3 v5 functions such as `scaleTime` and `scaleLinear` for the angle and radial axes, `pointRadial` to position ticks, `curveLinearClosed` to close each path, and a custom `ColorLegend` component. Data is loaded from a CSV file.

Loading thumbnail…

GDP vs Health Expenditures with a regression line with and without logscale

This scatter plot compares GDP per capita to health expenditure per person across 156 countries, with each point sized by the World Happiness Score. A checkbox toggles between linear and logarithmic scales, recalculating the regression line in real time. The visualization uses d3.v4 with SVG rendering, d3.csv for data loading, and custom least-squares calculations for the regression. Data comes from the World Happiness Report via Kaggle.

Loading thumbnail…

Happiness Factors Comparison by Country

This interactive scatterplot, built with D3 v4, visualizes the factors contributing to happiness across 156 countries. Users can select different pairs of variables from dropdown menus, such as GDP per capita or school years, to compare their relationship with the overall happiness score. The chart uses color to distinguish each factor and includes a legend for filtering, with animated transitions and tooltips for detailed data inspection. Data is sourced from the World Happiness Report on Kaggle.

Loading thumbnail…

World Happiness Feature Relationships

This scatterplot explores relationships between world happiness indicators. Users choose which two metrics to plot against each other via dropdown menus, and can click legend items to highlight or isolate countries belonging to a specific region. The visualization uses D3 v5 to render SVG circles, animating their positions when the axis variables change. A tooltip appears on hover, showing the country's values. Data comes from a CSV file loaded with `csv()`. The code uses `d3.scaleLog`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to construct the log-scaled axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding.

Loading thumbnail…

Globe Zoom - Animate

This visualization presents global nuclear explosion data as a scatterplot over a Mercator-projected world map using SVG. The map shows land masses in brown and country borders, while each nuclear event appears as a circle with a tooltip displaying its name and coordinates. Built with D3 v3 and React, it uses `d3.geoMercator` and `d3.geoPath` for rendering, loading map topology from world-atlas and CSV data from a GitHub gist. The visualization supports interactive zoom and rotation through additional geo-projection scripts, with color palettes and legends enhancing the display.

Loading thumbnail…

World Happiness Scores by Population

A world map uses colored circles to display the happiness scores of countries, with the area of each circle encoding population size. Users can pan, zoom, and hover over circles to see additional details. The map is rendered using SVG with the D3.js library, including geospatial projections and interactive zoom. Data is sourced from the World Happiness Report, and colors are applied via a sequential color scale for the happiness score legend.

Loading thumbnail…

Untitled

This example demonstrates how to create a continuous color legend using D3’s `d3.scaleSequential` with the interpolator `d3.interpolateViridis`. The legend is rendered as a vertical gradient bar on a Canvas element, where each pixel’s color is drawn with the Canvas 2D API. An SVG overlay adds a `d3.axisRight` for numeric tick labels, with the color scale domain set from 0 to 7. The code uses D3 v5 with the d3-scale-chromatic module for interpolators.

Loading thumbnail…

Untitled

A circular heatmap displays daily temperature ranges for Beijing in 2015, with each day plotted as a radial bar whose length encodes the temperature range and color represents the mean temperature. The visualization uses an SVG gradient legend to map temperature values to a blue-yellow-red color scale. Built with D3.js, the chart loads weather data from a local CSV file and applies d3.scale.linear for both the bar length and angular positioning.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data using a React and D3.js v5 framework. It presents multiple coordinated views: a line chart showing ILI percentages by week across different years, a scatter plot mapping state data, a bar chart of top states, and a choropleth map of the US using d3.geoPath with the us-atlas TopoJSON dataset. Users can select different value attributes (ILI percentage, total patients, providers) and field attributes through dropdown menus. The visualization highlights selections with opacity changes and includes a zoomable map implementation.

Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automobile data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, fuel efficiency (mpg), and car model name. Circles are sized by mpg and colored by weight, with tooltips displaying the model name. The code registers Vega, Vega-Lite, and the Vega-Lite API, fetches data via d3.csv, and renders an SVG view that fits the window dimensions with customized axis and label styling.

Loading thumbnail…

World Happiness Scores by Population

This visualization displays world happiness scores and population sizes on a natural Earth projection map, with each country represented by a circle whose area encodes population and color encodes happiness score. Users can pan, zoom, and hover to see country names and scores, while clicking reveals additional details. The visualization uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleSqrt for population scaling, with happiness data from the World Happiness Report. A color legend and size legend clarify the mapping, and the rendering is SVG-based.

Loading thumbnail…

Untitled

This interactive heatmap displays hourly activity counts for each date, using a color gradient to show intensity variations. The visualization renders a grid of tiles positioned by date and hour bucket, with color encoding count values via a sequential scale. It cycles through multiple color interpolators automatically, including Viridis, Inferno, and sequential schemes from d3-scale-chromatic, while allowing manual selection. The code uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleSequential to map values, with SVG rectangles and d3.axisBottom/d3.axisLeft for the chart’s axes.

Loading thumbnail…

World Happiness Scores by Population

This visualization maps world happiness scores by population, with each country represented by a colored circle whose area reflects its population. Clicking a circle reveals the happiness score, while hovering displays additional details, and pan/zoom enables closer inspection. The D3.js implementation uses `geoPath` with `geoNaturalEarth1` projection, `scaleSqrt` for circle sizing, and `scaleSequential` with `interpolateInferno` for color encoding. Data comes from the World Happiness Report via a CSV file, rendered as SVG with TopoJSON country boundaries.

Loading thumbnail…

Map of Nuclear Explosions with Time Histogram

Combining a world map with a time-series histogram, this visualization plots nuclear explosions by latitude and longitude, with point size encoding yield magnitude and color indicating the responsible country. Hovering a country in the legend filters the map, while clicking a point reveals detailed deployment information. Two dropdowns filter by purpose and type of explosion. The lower histogram bins events by year using d3.bin, with counts shown on hover. Built with React, it renders SVG via d3.geoPath for the Natural Earth landmasses and d3.scaleSqrt for proportional symbol sizing.

Loading thumbnail…

Aggregation by Country using Map

This example visualizes the total video views from the Harvardx/MITx Course-Person Dataset, aggregated by country and displayed as graduated circles over a Mercator-projected world map. The map uses d3.geoMercator and d3.geoPath to render landmasses, graticules, and country borders from World Atlas TopoJSON, while d3.scaleSqrt maps view counts to circle radii. Points are positioned using d3.projection, and hovering reveals the country and view count via an SVG `<title>` tooltip.

Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a timeline to visualize migration incidents, using brushing to link the two views. The map displays circles sized by the total dead and missing, while the histogram below shows monthly totals. Dragging a brush on the histogram filters the map to show only incidents within the selected time range. The visualization uses React for components, d3.geoNaturalEarth1 and d3.geoPath for the map, d3.brushX for interaction, and d3.bin for histogram binning, drawing with SVG.

Loading thumbnail…

Multiple Views with Fast Brushing

A world map displays migrant deaths and missing persons by location, with circle size scaled to the count. A synchronized date histogram below supports brush selection, filtering the map’s circles in real time. Built with React, D3 v5, and SVG, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `useMemo` for performance. Data comes from the Missing Migrants Project and World Atlas TopoJSON.

Loading thumbnail…

Log Scale Powers of Ten Ticks

This scatter plot visualizes the Missing Migrants dataset, showing reported deaths and disappearances over time on a logarithmic scale. The y-axis uses a log scale to accommodate the wide range of values, displaying tick labels only for powers of ten. Built with React and D3 v5, the visualization uses `scaleLog` and `scaleTime` to map data to SVG circles, with custom axis components filtering ticks and rendering native SVG elements for the chart.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This example visualizes the Missing Migrants Dataset, a collection of events where each point represents a single incident. It plots reported dates on the x-axis against the total number of dead and missing on the y-axis, using a logarithmic scale for the latter to accommodate the wide range of values. The visualization is rendered as an SVG using React and D3 v5, with custom axis components for the bottom and left sides, and marks that display a tooltip with the formatted date on hover. Data is loaded asynchronously via a CSV file using D3's `csv` function.

Loading thumbnail…

Kent County (UK) Police Stop & Search Map

This interactive map shows police stop-and-search incidents across Kent County, UK, with colored dots representing different attributes such as the type of search, gender, or legislation. Users can filter by race via dropdown menus and hover over the color legend to highlight specific categories. The visualization uses React for state management, d3.scaleOrdinal for color encoding, and d3.geoPath with a geoEqualEarth projection to render the county boundaries from TopoJSON data. Incident coordinates are plotted as SVG circles, sourced from UK police data.

Loading thumbnail…

Interactive World Happiness Scatter Plot with Colored Menu

This scatter plot explores the relationship between the World Happiness Report’s happiness score and factors like GDP, school years, or employment rate, for a dataset of 156 countries. Two dropdown menus let viewers select which attributes appear on the x- and y-axes. Each country is plotted as a circle colored by whether it is considered a “happiest country,” and the interactive legend highlights points of that category while dimming others. The visualization is built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and SVG rendering.

Loading thumbnail…

EdX Viewership Map, 2013

This map visualizes the geographic distribution of video views in the Harvardx/MITx online courses for the academic year 2013. Circles sized by view count appear at viewer locations across a Mercator-projected world map, with hover tooltips showing latitude, longitude, and country. The visualization uses React for rendering, d3.geoMercator and d3.geoPath for map projection, and d3.scaleSqrt for circle sizing. Data comes from a CSV of course-person records, while the map boundaries use TopoJSON from the World Atlas.

Loading thumbnail…

World Happiness Scores by Country

This example visualizes global nuclear explosion data on a world map, with each detonation represented by a colored circle whose size corresponds to yield magnitude. The map uses D3’s geoNaturalEarth1 projection and geoPath to render landmasses, graticules, and country borders from TopoJSON data. A scaleOrdinal color scale assigns distinct hues per country, while a scaleSqrt maps yield values to circle radii. React manages hover interactions, dimming non-hovered points via opacity and filtering the top layer to highlight selected countries. The legend, built with React components, supports interactive filtering of the dataset.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores correlations among attributes in the WHO Global Urban Ambient Air Pollution Database. Users select x-axis, y-axis, and color dimensions from dropdown menus, with points colored by a categorical scale. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, updating smoothly via transition.attr. Points animate from the center to their positions over one second. SVG rendering with opacity 0.3 dots displays city-level PM2.5 and PM10 measurements and other air quality indicators.

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as sized points, using a square-root scale to map population to circle radius up to 15 pixels. The visualization is rendered as SVG via React, with geographic features drawn using `d3.geoPath` and a Natural Earth projection from `d3.geoNaturalEarth1`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations load from a Simplemaps CSV. The map uses `d3.scaleSqrt` for point sizing and an opacity of 0.3 for the city circles.

Loading thumbnail…

Map of World Happiness Data

A world map rendered in SVG displays nuclear explosion locations as small points on a Mercator projection. The visualization uses the World Atlas TopoJSON for land interiors and graticules, with the `geoPath` API to draw the map. Each data point is positioned via the `geoMercator` projection and includes a hover tooltip showing its latitude and longitude. The data comes from a CSV of nuclear explosions, loaded with the D3 `csv` function, and the entire chart is built with React and D3 v5.

Loading thumbnail…

World Happiness Scatter Plot with Menus

This interactive scatter plot explores relationships among well-being indicators for 156 countries, using data from the World Happiness Report. Two dropdown menus let users select which metrics to compare on the x- and y-axes, including happiness score, GDP, school years, health expenditure, and employment rate. The visualization uses React for UI state management and d3.scaleLinear for positioning axes and d3.scaleOrdinal for coloring points. SVG circles render each country, with hover tooltips showing the x-axis value.

Loading thumbnail…

Linear Regression Line with D3.js

This visualization plots the correlation between a country's happiness score and its health expenditure per person, using a scatter plot of circles and an overlaid linear regression trendline. The data is loaded from a CSV file via `d3.csv` and rendered as SVG. The least-squares computation is performed manually in `index.js` to calculate slope, intercept, and r-squared, which are then used to draw the line via `d3.svg.line` and the `d3.scale.linear` axis scales.

Loading thumbnail…

World Happiness and Health Expenditures Correlation

This visualization uses a line mark to plot the correlation between a country’s happiness score and its health expenditure per person, with points aggregated by average and the y-axis not starting at zero. It loads CSV data via `d3.csv` from a GitHub gist, then renders the chart using Vega-Lite API functions like `vl.markLine` and `vl.encode`, with a custom config for font sizes and axis styling. The code also includes a commented-out least-squares regression layer and tooltip setup via vega-tooltip, though the active view only displays the basic trend line.

Loading thumbnail…

Scatter Plot for Forest Fires

This scatter plot explores the factors contributing to forest fires in Portugal’s Montesinho park, using 517 instances from the UCI Forest Fires dataset. Three dropdown menus let users compare any two attributes (e.g., temperature, wind, or the Fire Weather Index) against a third, with circles colored by that selected category. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while a `scaleOrdinal` color scale drives the legend. Circles animate via `transition().duration(2000).delay()`, and SVG rendering updates as menu selections change.

Loading thumbnail…

Dow Jones Index Weekly data

A bar chart visualizes weekly stock price changes for companies in the Dow Jones Index, with each bar representing a stock ticker and its height showing the percentage change in price over the week. The visualization uses the Vega-Lite API, with data fetched from a CSV file via `d3.csv`, and rendered through the Vega and Vega-Lite libraries. Tooltips display average weekly trading volume per stock. The chart aims to help identify which stocks offer the greatest potential return in the following week.

Loading thumbnail…

Most Obese Countries as of 2014

A horizontal bar chart ranks the 80 countries with the highest obesity rates as of 2014, with each bar's length proportional to the national obesity percentage. The data is sorted in descending order before slicing, ensuring the top countries appear accurately at the top of the chart. Built with the vega-lite-api and rendered as SVG, the visualization uses d3.csv to load the dataset and d3.descending for sorting, while the tooltip and axis configurations come from the vega-tooltip handler and custom config.js settings.

Loading thumbnail…

Books with Pages

A horizontal bar chart displays the page counts of eight classic novels, from Jane Eyre to War and Peace. The visualization uses D3 v5 with a linear scale for the x-axis and a band scale for the y-axis, rendering bars as SVG rectangles. The code imports specific functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3. Data is loaded from a CSV file, and CSS removes scroll bars by setting the body margin to zero and overflow to hidden.

Loading thumbnail…

Top Exporting Countries in 2018

This visualization shows the top 10 exporting countries in 2018, with each country’s total export value broken down by series type. The bar chart uses stacked bars to compare total exports against manufactures exports, color-encoded by series name, with tooltips displaying the precise values. The code loads CSV data from World Bank indicators via `d3.csv`, filters and aggregates values in JavaScript, then renders the chart using Vega-Lite’s API and `vl.markBar`. The visualization uses d3 v5 for data handling and Vega-Lite’s `vega-lite-api` for specification.

Loading thumbnail…

Log Scale Example

This example visualizes worldwide export data from the World Trade Organization for seven countries from 2000 to 2016. The scatter plot uses dropdown menus to select which countries to compare on the x and y axes, with a log scale on both. Hovering over a point reveals a tooltip with detailed information, while clicking a legend entry highlights that category. Color-coded by region, the visualization is built with D3 v5, using SVG rendering, animated transitions via `transition().duration()`, and custom implementations for the dropdown menu and color legend.

Loading thumbnail…

World Happiness Report

This visualization displays the relationship between a country’s happiness score and its GDP per capita, with each circle colored by whether the country is classed as the “happiest country.” Built with the vega-lite-api and D3 v5, it loads CSV data from a GitHub gist and renders a scatterplot using `vl.markCircle`. The chart applies custom axis and label styling from a shared config, uses a tooltip to show country names, and fits the view to the window dimensions.

Loading thumbnail…

Interactive mouse

This example shows a force-directed layout of 200 colored circles, where one invisible fixed root node is dragged by the mouse, causing the surrounding circles to collide and repulse around it. As the mouse moves, the root node's position updates, and the simulation resumes, with a quadtree-based collision detection preventing overlaps between the circles. The visualization uses the D3 v3 force layout, `d3.geom.quadtree` for collision handling, and SVG circles, with colors assigned via `d3.scale.category10`.

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization displays the percentage of bee colony loss for each U.S. state across multiple years, using a matrix of colored squares. Each square’s color intensity represents the loss percentage, with states sorted by their worst-hit values along the x-axis and years on the y-axis. It highlights that colony loss appears random with no clear geographic or temporal trends. The code uses the vega-lite-api’s `markRect` and `encode` methods, with data loaded via d3.csv from a GitHub Gist, and includes tooltips for state, year, and loss percentage.

Loading thumbnail…

Smiley Face with green eyes

A yellow smiley face with green eyes, rendered as an SVG, uses React to structure the markup and D3’s `arc` generator to draw the nose and mouth paths. The face’s circular head, elliptical eyes, and decorative black eyelashes and smile lines are composed of hard-coded SVG shapes. React 16.9 manages the component, while d3.v5 provides the arc geometry for the mouth and nose, all displayed at a fixed 890×450 viewport.