xyang3672

@xyang3672·11 public vizzes

Happiness Choropleth Map

This choropleth map visualizes national happiness scores, with each country colored on a sequential blue scale from light to dark based on its reported score. The visualization uses a Mercator projection with graticules and country boundaries, rendering missing data in light gray. Built with React and D3 v5, the map employs `d3.geoMercator`, `d3.geoPath`, and `d3.geoGraticule` to draw the geographic features, while `d3.scaleSequential` with `d3.interpolatePuBu` maps scores to colors. Country codes are joined to happiness data from a CSV file, and geographic boundaries come from World Atlas TopoJSON.

Mar 13, 2021

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This visualization displays the World Happiness Report scores for countries using a color-coded choropleth map. The data, sourced from a CSV file, is joined with geographic features from a TopoJSON world atlas. The map renders with an SVG projection using `d3.geoMercator` and `d3.geoPath`. Users can pan and zoom via `d3.zoom`. Country tooltips reveal names, while a sequential color scale (`scaleSequential` with `interpolateYlOrRd`) maps the scores. The implementation uses D3 v5 to load and process the data and TopoJSON to convert the topology into GeoJSON features.

Mar 13, 2021

Loading thumbnail…

Map!!!!!!!!!!!!!

This world map visualization displays a color-coded choropleth of country scores using a sequential red-yellow scale, with hover highlighting and a legend showing the score range. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` to render the map, and `topojson` to load world geometry. Country data comes from a CSV file matched by ISO codes, and the visualization supports zoom and pan via D3's `zoom` behavior.

Mar 13, 2021

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by a numerical score from a CSV dataset, displaying the values on a natural Earth projection. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` to render the map, while a separate SVG color legend with circles and text labels indicates the color scale. Users can pan and zoom the map via D3's `d3.zoom` behavior, and hovering over a country highlights it in red and shows its name and score in a tooltip. The map data comes from TopoJSON, merged with the CSV by country codes.

Mar 13, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot from the D3.js gallery visualizes country-level happiness data from the UCI Machine Learning Repository. Two dropdown menus let users select which columns from the happiness.csv dataset map to the X and Y axes, with the plot updating via smooth, staggered transitions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, rendered as SVG circles with animated positioning and axis labels that update dynamically.

Mar 13, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes happiness scores against levels of social support for countries worldwide, using data from the UCI Machine Learning Repository’s Auto MPG dataset loaded via D3’s `csv` method. Each circle represents a country, positioned by its happiness score (x-axis) and social support index (y-axis), with axes generated using `axisBottom` and `axisLeft`. The SVG rendering includes gridlines, axis labels, and a title, while circles use a semi-transparent purple fill. The implementation leverages `scaleLinear`, `extent`, and `scaleLinear` for scaling, and appends circles to the SVG via `select` and `data` joins.

Mar 13, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between a country's happiness Score and its perceived corruption level, using data from the World Happiness Report. Each red circle represents a country, positioned by its Score on the x-axis and corruption value on the y-axis. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with SVG rendering. It loads the `happiness.csv` file via `csv`, maps numeric fields, and applies margins, axis labels, and a title within the SVG canvas.

Mar 11, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

Mar 10, 2021

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays countries colored by their economy category, allowing users to click legend items to filter and highlight specific regions while dimming others. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world geography, while d3.scaleOrdinal and schemeSpectral assign colors to categorical data. Hovering over countries reveals their name and economy value via SVG title elements, and d3.zoom enables panning and zooming the map. Data comes from the world-atlas TopoJSON dataset combined with a happiness CSV file.

Mar 10, 2021

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example displays a world map of countries colored light green on a blue sphere, using CSV data from happiness rankings to label each country. It demonstrates pan and zoom interactions built with D3 v5’s `zoom` API and `event.transform`, which applies transforms to the SVG group containing the map. Country boundaries are rendered via `d3.geoPath` with a `geoNaturalEarth1` projection, and topojson data from the world-atlas package supplies the geographic features. Hovering over a country turns it red through CSS `:hover` styling, while tooltips show the country name from the happiness dataset.

Mar 10, 2021

Loading thumbnail…

Fork of Choropleth Map

A choropleth map visualizes national happiness scores by coloring countries according to their economy classification from the World Happiness Report CSV. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with color mapping through `d3.scaleOrdinal` and the spectral scheme. A custom legend component shows color categories, while zoom functionality is implemented with `d3.zoom`. Countries display tooltips with their name and economy type, and hover states change fill color to red.

Mar 10, 2021