swathijay

@swathijay·8 public vizzes

Q4 HeapMap

This heatmap displays earthquake counts across U.S. states for each year from 2010 to 2015, filtered by magnitude category via a dropdown selector. The visualization uses a quantized color scale to encode count values, with tooltips revealing exact numbers on hover. Built with D3 v5, it renders SVG rectangles positioned by band scales for states and years, and updates dynamically through a change event listener. The data is loaded from an external CSV file and grouped using d3.nest.

Sep 21, 2019

Loading thumbnail…

Untitled

This example shows a national map of the United States with a ragged, layered paper-cut aesthetic. Using D3.js, it renders each state as a set of offset polygons and applies a custom path effect to create a jagged edge. The visualization relies on `d3.geoPath` to project GeoJSON data and `d3.forceSimulation` to subtly scatter the layered shapes before settling into place. A muted color palette and subtle shadows give the cartographic display a handcrafted, dimensional look.

Sep 21, 2019

Loading thumbnail…

Lego Sets by Year from Rebrickable

This visualization displays the cumulative number of Lego sets released each year from 1949 to 2019, sourced from Rebrickable. A bar chart shows the running total growing steadily, with a sharp increase in recent decades. The data is loaded from a CSV file and rendered as SVG rectangles using D3.js v5. Axes and scales are customized through D3’s `scaleLinear` and `axisBottom` APIs. The bars are colored steel blue, highlighting the accelerating growth of Lego set production over seventy years.

Sep 21, 2019

Loading thumbnail…

Bars

This visualization displays population data for several countries as a set of vertical bars, with each country labeled on the x-axis and its population represented by the bar height on the y-axis. The bars are rendered in steelblue on an SVG canvas. The implementation uses D3 v5, leveraging `d3.csv` to load the data, `scaleBand` for the x-axis positioning, and `scaleLinear` for the y-axis scaling. Axis components are generated using `axisLeft` and `axisBottom`.

Sep 21, 2019

Loading thumbnail…

World Population Area Chart

This area chart visualizes the cumulative growth of world population from 1949 to 2019, with each bar’s height representing the running total for that year. The visualization uses D3 v5 APIs including `d3.scale.ordinal` with `rangeRoundBands` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` to render tick marks and labels. Data is loaded from a local CSV file, and bars are drawn as SVG rectangles positioned using the ordinal scale’s band width.

Sep 14, 2019

Loading thumbnail…

World Population Area Chart

This area chart tracks the cumulative number of world population milestones from 1949 to 2019, using a dataset from q3.csv. It employs a D3 v5 ordinal scale for the year axis and a linear scale for the running total, rendering bars with `d3.scale.ordinal().rangeRoundBands()` and `d3.svg.axis()`. The visualization highlights the accelerating growth in population over seven decades.

Sep 14, 2019

Loading thumbnail…

Let's make a bar chart!

This example shows the cumulative number of events by year from 1949 to 2019, using a bar chart that grows in height as the running total increases. The visualization loads CSV data and renders it as SVG rectangles, using D3 v5 scales (`d3.scaleLinear`, `d3.scaleBand`) and axes (`d3.axisBottom`, `d3.axisLeft`). The bars are colored steelblue and positioned via the scale’s range band, with the chart drawn inside an `<svg>` element using a margin convention.

Sep 14, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, using `d3.axisLeft` and `d3.axisBottom` with adjusted tick sizes, padding, and formatting (e.g., abbreviating numbers with `d3.format`). The chart’s y-axis tick labels are transformed to show values in billions, and grid lines extend across the plot area.

Sep 14, 2019