maru25-alt

@maru25-alt·9 public vizzes

Radar Chart

This radar chart compares life satisfaction across seven dimensions—such as happiness, work, and housing—for three consecutive years (2013–2015). It uses D3.js version 3 to render an animated SVG with circular grid levels, axis lines, and overlaid colored polygons. The code employs ordinal color scaling, linear radial scaling, and percentage formatting, drawing data from an inline dataset. A glow filter and rounded strokes enhance the visual presentation.

Jun 15, 2020

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data through four coordinated panels. A line chart shows weekly trends across different years, a choropleth map displays the geographical distribution of values, a bar chart ranks the top states, and a colorful line chart reveals the yearly patterns for those selected states. The code uses D3.js for creating SVG marks, including `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `scaleTime`, along with `geoAlbersUsa` for map projections. React manages user interactions such as hovering and selection, while TopoJSON provides the US state boundaries.

Jun 7, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region using multiple smoothed lines, with a color legend and axis labels. It relies on D3 v5 APIs including `nest()`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `line()`, rendering with SVG. Data is melted from wide to long format using a custom function, combining UN population estimates (1950–2014) with medium-variant projections (2015–2100) loaded via `csv`. Lines are drawn with `curveBasis` and sorted by final population value.

Jun 3, 2020

Loading thumbnail…

D3 Course 14: Melting Data for Multiple Lines

This line chart visualizes population trends across global regions from 1950 to 2100. It combines data from two UN population CSV files, melting columns into rows and filtering to display only regional aggregates. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `nest`, and `curveBasis` for smooth lines. A black vertical marker indicates the currently selected year, which updates interactively on mouse movement via the `mouse(this)` function.

May 14, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a car, with its position determined by the d3.scaleLinear mappings for the x- and y-axes, which include grid lines and axis labels. The visualization uses d3’s SVG rendering, with axes created via d3.axisBottom and d3.axisLeft, and data loaded asynchronously from a CSV file using d3.csv.

Apr 25, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries using circles positioned along a point scale for countries and a linear scale for population values. It loads data from a local CSV file referencing United Nations 2018 estimates, with population values multiplied by 1000. The visualization uses d3.csv, scaleLinear, scalePoint, axisLeft, and axisBottom, with custom tick formatting that converts abbreviations like "G" to "B" for billions. SVG circles are styled in steelblue, and gridlines extend across the chart through negative tick sizes.

Apr 24, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature variations across a week in San Francisco. The chart uses a green, smooth line curve to connect data points, with light blue tick marks and custom axis labels for "Time" and "Temperature." Built with D3 v5, the visualization employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line` with `curveBasis` for the path. The data is loaded from a CSV file via `csv()` and rendered as an SVG, with styling applied through CSS.

Apr 22, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with the spectral scheme, sourced from the World Atlas TopoJSON dataset. The map supports interactive zooming and panning, and clicking a legend item highlights matching countries while dimming others. It is built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, and `d3.zoom` for navigation, with all elements rendered as SVG.

Apr 15, 2020

Loading thumbnail…

Choropleth Map Interactivty selection

This example demonstrates interactive filtering on a choropleth map of world economies, where clicking a color legend entry highlights matching countries and dims all others. Built with D3 v5, it renders GeoJSON features via `d3.geoMercator` and `d3.geoPath` in an SVG, with zoom support from `d3.zoom`. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and the map’s country opacity and stroke change in response to the selected value, sourced from the World Atlas TopoJSON dataset.

Apr 11, 2020