Skip to main content
Log in
M

mi-desai

@mi-desai·7 public vizzes

Loading thumbnail…

First Bar Chart

This bar chart displays the number of items sold for five food types—taco, burrito, chaloopa, churro, and fajita—using a horizontal layout with steel-blue rectangles. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. The SVG rendering includes margins and padding between bars.

Nov 30, 2019
Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates how to customize D3 axes by using `d3.axisBottom` and `d3.axisLeft` to add grid lines, remove the domain, and format tick labels with `d3.format`. The chart also includes custom axis labels and a title, rendered as SVG with margins. Data is loaded from a CSV file via `d3.csv` and scaled with `d3.scaleLinear` and `d3.scaleBand`.

Nov 14, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. It shows a green X shape drawn with SVG lines that maintains its position relative to the viewport as the window changes dimensions. The code uses a `window.addEventListener("resize", redraw)` callback, which queries the container’s `clientWidth` and `clientHeight` properties to update the SVG’s `width` and `height` attributes. The `redraw()` function re-binds the line data and updates the `x1`, `y1`, `x2`, and `y2` attributes via `merge()`. The chart container is styled with fixed CSS positioning to fill the entire page.

Nov 9, 2019
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale. Users can click on legend items to filter the map, which dims non-matching countries and highlights the selected category. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from a 50m TopoJSON dataset, while the color legend (built with d3.scaleOrdinal and schemeSpectral) supports interactive click-based filtering. Hovering over a country displays its name and economic value via SVG title elements.

Nov 2, 2019
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale. Users can click on legend items to filter the map, which dims non-matching countries and highlights the selected category. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from a 50m TopoJSON dataset, while the color legend (built with d3.scaleOrdinal and schemeSpectral) supports interactive click-based filtering. Hovering over a country displays its name and economic value via SVG title elements.

Nov 2, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely through D3.js selections and SVG shapes. The face uses circles for the head and eyes, rectangles for the brows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates their vertical position over two seconds, moving them up and back down, demonstrating fundamental DOM manipulation and tween-less attribute transitions in D3 v5.

Oct 27, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both presentation attributes and an external CSS stylesheet. It shows how fill colors can be set directly on elements (e.g., red, `#83cc2a`) or inherited from a parent `<g>` group, with stroke properties controlling outlines. The CSS classes `.lines` apply stroke width and color, while the path uses the `stroke-linejoin` and `stroke-linecap` properties. The SVG structure employs `transform` attributes for scaling and translation, rendering vector graphics directly in the browser without additional JavaScript libraries.

Oct 27, 2019