Efficient Frontier test

100%

Efficient Frontier test

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

This visualization shows the trade-off between costs and health outcomes in an "Efficient Frontier" scatter plot, with time on the x-axis and QALYs on the y-axis. The chart uses React with D3 v5 scales and axes, rendering an SVG path via d3.line with curveNatural to connect the data points. Data comes from the Data Canvas Sense Your City dataset, specifically weekly temperature readings from San Francisco.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Efficient Frontier - fork of VizHub User Count Over Time

This visualization displays an efficient frontier plot, mapping cost against QALYs (quality-adjusted life years) for a set of data points, with each point connected by a line and rendered as a circle. The chart uses D3.js v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.line` for the path, and `d3.axisBottom`/`d3.axisLeft` for gridlines and ticks. Data is loaded from the `costQalys.csv` file, and `d3.svg.annotation` adds label annotations to highlight specific points. The visualization updates responsively on window resize, though no annotation data is currently provided in the sandbox script.

DDasbach.EJ

82% match

Loading thumbnail…

Covid-19 Analysis: Econ & Health

This interactive scatterplot explores relationships between economic and health indicators across countries, with dropdown menus on the X and Y axes allowing selection from fourteen attributes such as GDP, life expectancy, and mortality rates. Built with React and D3 v5, it uses scaleLinear for axes, renders SVG circles via the Marks component, and loads CSV data from a gist. Axis components format tick labels using d3.format, while the dropdown library updates state to re-scale the visualization.

CCosmos0603

67% match

Loading thumbnail…

clinos2

A temperature time-series scatter plot for San Francisco week data from the Data Canvas Sense Your City Dataset, rendered as an SVG with React and D3 v5. The line chart connects daily temperature readings, with labeled circles showing exact values and hover-based tooltips revealing timestamps. The visualization uses `scaleTime` and `scaleLinear` for axes, `curveNatural` for the line path, and React state management for interactive tooltip positioning.

TTawhid Abdullah

67% match

Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Llynz09

67% match

Loading thumbnail…

clinios Stylized Line Chart

This stylized line chart visualizes San Francisco weekly temperature data from the Data Canvas Sense Your City dataset, showing temperature trends over time. The visualization uses a natural curve interpolation to connect data points, with circles colored teal for temperatures below 22 degrees and red for those above. Built with React and D3 v5, it employs scaleTime and scaleLinear for axes, while the svg rendering includes custom axis components that highlight specific tick values with gridlines.

TTawhid Abdullah

66% match

Loading thumbnail…

Area Chart

This area chart visualizes one week of San Francisco temperature data, sourced from Data Canvas - Sense Your City, with the y-axis labeled "cost" and the x-axis as "Time." The code uses d3.scaleTime and d3.scaleLinear with d3.axisBottom and d3.axisLeft to construct the axes, and d3.area with a basis curve to render the filled region. The SVG output is styled via CSS, and the data is loaded asynchronously from a CSV using d3.csv.

AAlankruthSai

66% match

Loading thumbnail…

Polished Medical Cost Personal (with menu)

This interactive scatterplot explores the Medical Cost Personal Dataset, plotting patient attributes such as age, BMI, and charges against each other. Each circle represents a patient, with color indicating smoker status and size reflecting age, allowing for visual clustering analysis. Built with React and D3 v5, the visualization features dropdown menus that dynamically change the X and Y axes at runtime. The SVG rendering uses `scaleLinear` and `scaleOrdinal` from D3 to map data values, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` handle the chart elements. Data is loaded asynchronously via the `csv` function.

Mmeperezcuello

66% match

Loading thumbnail…

Scatter Plot Matrix graph

This scatter plot matrix shows the relationships between air quality (AQI), temperature, and municipal greenhouse gas emissions in San Francisco across fiscal years 2020–2022. Color-coded points for each year visualize correlations between all variable pairs in a grid of small multiples. Built with D3 v7, the visualization uses `d3.csv` for data loading, `d3.rollup` to aggregate emissions data, and `d3.scaleLinear` for axis scales. The SVG rendering applies a categorical color scale via `d3.scaleOrdinal` and draws circles with SVG paths.

Hhxu51@usfca.edu

66% match