Brenda199708

@Brenda199708·5 public vizzes

Smoothed D3.js Radar Chart

This example shows a smoothed radar chart for a single Nokia smartphone, displaying values across eight attributes such as Battery Life, Brand, and Contract Cost. The chart uses D3.js v3 with SVG rendering and animation, drawing circular grid levels, radiating axes, and a rounded, cardinal-closed path for the data area. It employs ordinal scales for color, linear scales for radius, and a glow filter, with the design initially written by Nadieh Bremer. The React starter code wraps the D3 visualization, and the data is hardcoded as an array of axis-value pairs.

Jun 15, 2020

Loading thumbnail…

Map with Legends !

This map visualizes the economic classification of countries using a color scale, with an interactive legend that displays unique values and their corresponding colors. Built with D3 v5 and rendered as SVG, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from TopoJSON data sourced from World Atlas. The color legend is created via a custom function that binds `d3.scaleOrdinal` with `d3.schemeSpectral`, while zooming is handled by `d3.zoom`.

Apr 15, 2020

Loading thumbnail…

H1B Petition Bar Chart

This visualization presents two bar charts examining H1B visa petitions over time. The first plot uses a stacked bar chart to show petition counts by year, with colors representing different case statuses, while the second displays petition counts with orange indicating full-time positions and blue for part-time roles. Built with Vega-Lite and D3.js, the charts pull data from a CSV file and use Vega-Lite API for rendering. The visualization emphasizes temporal trends in visa applications and employment types across years.

Apr 5, 2020

Loading thumbnail…

Charts for Fun

This example presents a data visualization with a bar chart and scatter plot, both using red semi-transparent shapes, that render population data from the United Nations World Population Prospects 2017. The bar chart displays the top 10 most populous countries, while the scatter plot appears to plot timestamp and Basel temperature data, though the title refers to population. The code uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to customize axes and tick labels, rendering to SVG elements with a margin-based layout.

Apr 5, 2020

Loading thumbnail…

Charts for Fun

This example displays the top 10 most populous countries as both a bar chart and a scatter plot, using 2018 population estimates from the United Nations. Both visualizations share the same title and x-axis label, though the data shown is actually Basel temperature values loaded from an external CSV. The code uses D3 v5 APIs including `scaleBand`, `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG charts with customized tick formatting and grid lines. Each chart applies opacity to its red marks, and bars and circles are sized according to the numeric temperature values.

Apr 5, 2020