karuppuraja

@KaruppuRajaN·8 public vizzes

Fork of Bar Graph - New York Homeless Population (2009-2012)

This grouped bar chart displays the unsheltered homeless population in New York from 2009 to 2012, broken down by borough, surface total, subway, and overall total. It uses a nested band scale (`d3.scaleBand` twice) with an ordinal color scale to distinguish years alongside a linear y-scale for population counts. Rendered as SVG via the d3.v5 library, the chart includes axes, a legend, and a title, all styled with CSS. The data originates from a small CSV file embedded directly in the JavaScript code.

Apr 9, 2021

Loading thumbnail…

Fork of Bar Chart

This example displays a vertical bar chart comparing global sales across video game genres, using data loaded from a CSV file. The chart renders as SVG, with genre labels on the x-axis and sales figures on the y-axis. The code builds scales with d3.scaleBand and d3.scaleLinear, and uses d3.axisBottom and d3.axisLeft for axes. Interactive mouseover and mouseout events change bar fill colors from steelblue to orange, with a d3 transition animating the change back over 250 milliseconds.

Mar 21, 2021

Loading thumbnail…

Fork of Bar chart with D3.js

This bar chart visualizes the popularity of programming languages from Stack Overflow's 2019 survey, with each bar labeled by percentage. Using D3.js v5, the SVG chart includes axes, gridlines, and a hover interaction: hovering a bar dims other values and displays the percentage difference relative to the selected bar via dynamically added text labels and a horizontal guide line. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, and `transition` for animation.

Mar 9, 2021

Loading thumbnail…

Fork of Fork of COVID-19 Map (Positive Cases)

This map visualizes the relative number of COVID-19 cases per country, using a logarithmic color scale based on daily positive cases over the past seven days. Countries are rendered as SVG paths via `d3.geoPath`, with data loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. It includes a Voronoi overlay constructed with `d3.Delaunay` for hover interactions, and a legend generated through a custom `colorLegend` function. The visualization is built with React and D3 v6, supporting zoom and pan.

Mar 2, 2021

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

A choropleth map of the United States shows the logarithm of seven-day average COVID-19 positive cases per state, colored with a threshold scale using the `schemeOrRd` ramp. Hovering highlights states in green and reveals tooltips with additional metrics like deaths, tests, and positivity rates. The map is rendered with `d3.geoPath` and `geoAlbersUsa` projection using TopoJSON data, while a Voronoi overlay built with `d3.Delaunay` enables precise mouse interaction for each state.

Mar 2, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects, with values converted from thousands to raw numbers. The chart customizes D3 axes: the y-axis removes domain lines and ticks, while the x-axis uses a custom tick formatter that abbreviates numbers (e.g., converting "G" to "B") and extends tick lines across the chart. Built with D3 v5 and rendered as SVG, it employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and labels, with styling applied via external CSS.

Mar 1, 2021

Loading thumbnail…

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

A smiley face rendered in SVG with D3 v5 demonstrates fundamental DOM manipulation. The face consists of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth created using `d3.arc()`. The eyebrows animate upward and back downward over four seconds via chained `transition().duration()` calls, shifting the eyebrow group's `translate` transform. The code uses `d3.select` to append elements, reads the SVG dimensions for centering, and positions features with explicit x/y offsets and eye spacing constants.

Mar 1, 2021

Loading thumbnail…

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

This example demonstrates a smiley face created with SVG, whose eyebrows move to express different emotions. The visualization starts by selecting the SVG element with `d3.select` and styling its background, then relies on D3.js v5’s DOM manipulation methods to construct the face’s features. It uses fundamental D3 selections and attribute operations to build the shapes, with the eyebrow movement driven by a simple update pattern, though no explicit animation API is shown. The rendering is purely SVG-based within a 960×500 canvas.

Mar 1, 2021