Skip to main content
Log in
Q

qhfzwyx

@qhfzwyx·11 public vizzes

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Apr 28, 2020
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Apr 28, 2020
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Apr 27, 2020
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the relationship between JobLevel and MonthlyIncome from a human resources dataset, drawing all data points as teal circles with native SVG tooltips. The visualization uses React for component composition and D3 v5 for data loading and scaling, with axis components generating tick marks and labels through D3's scale methods. The chart includes custom formatting that abbreviates large numbers using D3's format function, and axes are styled with tick lines and text elements. The data is fetched as CSV and parsed into numeric values before being mapped to x and y positions.

Apr 26, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via a `Marks` component. Data comes from a CSV file loaded with `d3.csv`, and the chart includes custom axes, tick formatting with `format('.2s')`, and tooltips using SVG `<title>` elements.

Apr 26, 2020
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting each flower’s monthly rate against its ID. The chart uses a clean, modern aesthetic with a Poppins font, muted gray gridlines, and teal circular marks. Implemented in React and rendered as SVG, the visualization leverages D3 v5 utilities like `scaleLinear` and `extent` to compute scales, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and data points. Hovering over a circle reveals its monthly rate value as a tooltip, and the y-axis label is rotated for readability.

Apr 26, 2020
Loading thumbnail…

Missing Migrants Date Histogram

This interactive visualization displays a date histogram of monthly totals for dead and missing migrants, using data from the Missing Migrants Dataset. The bar chart aggregates individual incident records by month, summing the reported deaths and disappearances for each time bin. Built with React and D3 v5, it renders SVG bars using `d3.bin` to group data into monthly thresholds and `d3.sum` to calculate totals. The visualization demonstrates reusable axis components and tooltips through SVG `<title>` elements.

Apr 26, 2020
Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between TotalWorkingYears and WorkLifeBalance from an HR dataset, with each point representing an employee and tooltips revealing their names. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to generate an SVG rendering. It loads CSV data via d3.csv, applies custom axis and label styling from a config object, and uses the Vega Tooltip handler for interactive hover information. The chart fits the full browser window with an auto-size setting.

Apr 26, 2020
Loading thumbnail…

Google Play Store Apps

This visualization presents the distribution of monthly income across departments in a human resources dataset, with bars sorted in descending order to highlight the highest-earning categories. The chart uses a horizontal bar mark, with bar lengths representing the sum of monthly income per department, and color encoding to distinguish between genders. The tooltip displays the total monthly rate for each bar segment. The visualization is built using the vega-lite-api, with data loaded via d3’s csv function, rendered through vega-lite and vega, and styled using a custom configuration that disables axis domains and adjusts font colors for readability.

Apr 26, 2020
Loading thumbnail…

HR

This bar chart visualizes the average monthly income across HR departments, with department names sorted by descending income on the x-axis and a quantitative income scale on the y-axis. Built with the vega-lite-api library and rendered through vega-lite, the chart pulls CSV data from a GitHub gist. Tooltips are enabled via vega-tooltip, and the visualization is customized with a dark color scheme and increased font sizes for readability.

Apr 26, 2020
Loading thumbnail…

HR

This scatterplot shows the relationship between employee age and daily rate, with points colored by education level. The visualization uses a plain point mark with reduced opacity to reveal overlapping data density, and disables the axis domain lines for a cleaner appearance. It loads HR data from a CSV file using D3’s `csv` function, and builds the chart declaratively through the `vega-lite-api`, registering it with `vega` and `vega-lite`. Tooltips are enabled via `vega-tooltip`’s `Handler`, and the chart resizes to fit the window with a custom dark-themed configuration.

Apr 26, 2020