GiovanniD_

@GiovanniDw·14 public vizzes

Fork of Fatal Police Shootings In the U.S. Since 2015

This interactive visualization maps fatal police shootings in the U.S. since 2015, using the Washington Post’s dataset overlaid on state boundaries via `d3.geoPath` and `geoAlbersUsa`. Users select an attribute—race, gender, threat level, or others—to color-code points with `d3.scaleOrdinal` and view a corresponding bar chart built with `d3.scaleBand`. Hovering over the legend filters the map to highlight one category while fading others, with React managing the dropdown and state.

Dec 31, 2020

Loading thumbnail…

clean code with modules (v10.11_17:00)

A bar chart displays the parking capacity of park-and-ride facilities across nine Randstad cities in the Netherlands, sourced from an NPR dataset. Each bar represents a city, labeled with its description, while the y-axis measures capacity. The visualization uses d3.scaleLinear and d3.scaleBand for scales, d3.axisLeft and d3.axisBottom for axes, and SVG rects for bars. Data is cleaned and aggregated through imported transform modules, with setup scales, axes, and drawing separated into a visual module.

Dec 23, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot explores the Iris dataset, mapping petal length against sepal width and encoding species by color. A custom color legend built with React and D3 scales allows users to hover over a species name, which highlights corresponding data points and fades the rest, revealing patterns in species separation. The visualization uses D3’s `scaleOrdinal` for color assignment and `scaleLinear` for axes, with SVG circles rendered as marks. Hovering also triggers a tooltip via the native SVG `<title>` element, providing precise values for each point.

Dec 18, 2020

Loading thumbnail…

D3 map

This example visualizes a world map with animated location markers derived from a SPARQL query against the Network Digital Heritage dataset. The map uses a natural Earth projection, with countries rendered as SVG paths via `d3.geoPath` and `topojson.feature`. Each data point is plotted as a circle whose radius transitions from 10px to 8px using a staggered delay and `d3.easeBounce`, creating a popping effect. The code loads world geometry from a TopoJSON file and fetches JSON results, converting latitude and longitude values before projecting them.

Dec 18, 2020

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive dashboard visualizes migrant deaths over time and location on a world map. A histogram displays the monthly count of dead and missing individuals, allowing users to brush a time range, which immediately filters and highlights the corresponding incidents on the map. Built with React and D3, the visualization uses `d3.geoPath` for map projections, `d3.brushX` for the time selection, and `useMemo` to optimize rendering performance. The temporal and spatial views are linked, enabling rapid exploration of the data.

Dec 18, 2020

Loading thumbnail…

React + D3 Hooks template

This visualization displays a scatterplot of student eye colors, with each circle’s position and size derived from the red, green, and blue components of the eye color. The example shows how to combine React hooks with D3 v5 by using a custom `CirclePlot` component that wraps D3 logic in a `useEffect` hook. It uses `d3.json` to load data from a GitHub gist, filters for valid hex colors, and applies `d3.scaleLinear` with `d3.easeBounce` transitions to animate the circles as they scale.

Nov 25, 2020

Loading thumbnail…

Points on a Map

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

Nov 25, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map uses a spectral color scale to depict national economies, rendered as SVG paths with D3's geoNaturalEarth1 projection and geoPath. Clicking a color legend tick filters the map by dimming non-matching countries to 10% opacity while highlighting the selected category, and also fades the background sphere. The legend, built with custom colorLegend logic, supports re-clicking to clear the filter. Data joins World Atlas TopoJSON with TSV income and economy metadata via topojson.feature and D3's tsv loader.

Nov 13, 2020

Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles positioned on a natural Earth projection map, with circle area proportional to 2018 population data loaded from CSV. The map supports panning and zooming via d3.zoom, and hovering over a country reveals its name and population in a tooltip. The visualization uses d3.geoPath and topojson for rendering country boundaries, d3.scaleSqrt for sizing circles, and d3.scaleOrdinal with schemeSpectral for a color legend, all rendered as SVG with d3 v5.

Nov 13, 2020

Loading thumbnail…

Map with Selectable Countries

This interactive map displays global economies using a color-coded choropleth, where clicking a country selects it and dims all others. The legend also supports click-to-filter, highlighting matching color values. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection and rendering, with `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files, with color values mapped via `scaleOrdinal` and `schemeSpectral`.

Nov 13, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country's economic classification, with an interactive color legend that filters the map by category. Clicking a legend item dims non-matching countries, while a second click clears the filter; hovering over a country reveals its name and category via a title tooltip. The visualization combines d3.geoPath and geoNaturalEarth1 for map projection, d3.scaleOrdinal with schemeSpectral for colors, and d3.zoom for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files.

Nov 12, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that loads D3 v5 and TopoJSON from a CDN, with a commented-out map projection setup for rendering geographic data. The code creates an SVG canvas and uses `d3.json` to fetch world-atlas data, logging the result to the console. While the map rendering logic using `geoMercator` and `geoPath` is present but inactive, the starter demonstrates the basic structure for building a data visualization with external libraries in a plain HTML context.

Nov 9, 2020

Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of a CSV data file about car attributes from the UCI Machine Learning Repository. It first prints the total number of rows, columns, and the file size in kilobytes, then shows the first ten rows of the dataset as a JSON-formatted string. The code uses d3.csv to load the data, d3.csvFormat to calculate its size, and d3.select to append the output to the page. All content is rendered in a monospace style on a black background.

Nov 8, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart shows the population of the top 10 most populous countries in 2018, using data from the United Nations’ World Population Prospects 2017. It demonstrates D3 axis customization by removing default domain lines, styling tick lines, and adding a custom axis label. The code uses `d3.csv` to load data, `d3.scaleLinear` for the population axis, `d3.scaleBand` for country categories, and `d3.axisLeft` and `d3.axisBottom` to render the axes as SVG elements with a custom tick format converting billions to a shorter notation.

Nov 5, 2020