Skip to main content
Log in
J

jayjoepark

@jayjoepark·8 public vizzes

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart compares population estimates for thirteen world regions, with bar lengths scaled proportionally and fill colors transitioning from IndianRed to Red based on value. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. A green clickable circle toggles an animated width transition via d3.transition, shrinking or growing all bars simultaneously. Hovering over a bar updates a foreignObject div with the region name and population, while data originates from the 2017 United Nations World Population Prospects.

Mar 29, 2019
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart compares population estimates for thirteen world regions, with bar lengths scaled proportionally and fill colors transitioning from IndianRed to Red based on value. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. A green clickable circle toggles an animated width transition via d3.transition, shrinking or growing all bars simultaneously. Hovering over a bar updates a foreignObject div with the region name and population, while data originates from the 2017 United Nations World Population Prospects.

Mar 29, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the happiness scores of nine world regions, with bars colored on a red gradient by value. A central green circle toggles an animation that shrinks or grows the bars using a custom `transitionWidth` function, which relies on D3’s `transition` and `attr` methods. The chart is rendered as SVG with `d3.scaleLinear` and `d3.scaleBand` axes, and hovering over a bar populates a separate HTML overlay with the region’s name and score. Data comes from the CSV file using `d3.csv`.

Mar 29, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the happiness scores of nine world regions, using data from a class-provided dataset similar to the United Nations World Population Prospects. A colored bar represents each region, with a color scale from IndianRed to Red indicating higher scores. The visualization includes D3 scales (`scaleLinear`, `scaleBand`), axes, and a circular button that toggles an animated transition, smoothly resizing the bars via a custom `transitionWidth` function. Hovering over a bar updates a separate HTML div with the region’s name and population.

Mar 29, 2019
Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. It uses d3.geoPath with a natural Earth projection to render the countries from a TopoJSON file. The colorLegend component uses d3.scaleOrdinal and schemeSpectral for the color scale, and clicking a legend item reduces the opacity of non-matching countries while highlighting the selected ones.

Mar 26, 2019
Loading thumbnail…

d3 Choropleth Map

This d3 Choropleth Map visualizes world countries colored by their economic classification from a World Atlas dataset. It uses an SVG rendering with a natural Earth projection and a spectral color scale for the legend. The code employs `d3.geoPath`, `d3.geoNaturalEarth1`, and `topojson.feature` to process and draw the map, while `d3.scaleOrdinal` and `schemeSpectral` define the color categories. A custom legend component displays the color scale with circles and labels, and hovering a country turns it red.

Mar 26, 2019
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with a color legend that users can click to filter which regions remain fully visible. The map supports zooming and panning, while hovering reveals country names and values via tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `d3.zoom` for interaction. Data comes from TopoJSON world atlas files joined with TSV metadata, with `d3.scaleOrdinal` and `schemeSpectral` assigning colors.

Mar 26, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the world’s ten most populous urban areas, based on 2018 estimates from the United Nations’ World Population Prospects. The chart renders as an SVG using D3 v5, employing `scaleLinear` for the population axis and `scaleBand` for the categorical city labels, with bars drawn as `<rect>` elements. Data is loaded from a CSV file and scaled by a factor of ten thousand. The chart includes left and bottom axes generated via `axisLeft` and `axisBottom`.

Mar 26, 2019