sumukh-bharadwaj

@sumukh-bharadwaj·8 public vizzes

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which numeric columns map to the X and Y axes through dropdown menus, triggering updates to the visualization. The code uses D3 v5 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG axes and animated transitions for repositioning circles. The dropdown menu component is built with a reusable function that appends `<select>` and `<option>` elements, handling user input via a change event listener that updates the selected columns.

Dec 21, 2021

Loading thumbnail…

Fork of Test

This visualization displays the population of each country, segmented by religion, using a stacked bar chart. The chart sorts countries in descending order and encodes population counts on the y-axis, with color distinguishing different religious groups. Built with the vega-lite-api, it loads data from a CSV file of top five religions by country, rendering interactively with tooltips that report population values on hover. The visualization adapts to the full window size and applies custom styling to axis labels and titles.

Dec 21, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset as a scatter plot, comparing petal length on the x-axis against sepal width on the y-axis. The code uses React for component structure and d3.scaleLinear for coordinate mapping, rendering circles as SVG marks with tooltips. Axes are generated using d3's tick formatting, while data loading relies on d3.csv with asynchronous state management via React hooks. The visualization includes styled axis labels and tick lines, with a loading state shown before data arrives.

Dec 21, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, and custom SVG components for axes and marks. Population values are formatted with `d3.format` to display in billions. The chart is rendered using SVG within a React component, with data loaded asynchronously via `d3.csv` and styled with the Poppins font.

Dec 21, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing a smooth, stylized line chart rendered as SVG in a React application. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the curved path, and d3.csv to load the weather data. A time format function labels the x-axis with weekday abbreviations, while the y-axis displays temperature values, with React components managing the marks and axis rendering.

Dec 7, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying summary statistics as large text. It fetches the CSS Named Colors dataset and shows the file size in kilobytes, row count, and column count. The visualization uses D3 v5’s `d3.csv` method to fetch and parse the data asynchronously, leveraging JavaScript promises. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse` for the same purpose.

Nov 14, 2021

Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

A horizontal bar chart ranks the ten cities in Greater Boston with the most Yelp restaurants rated four stars or above. Boston leads with over 1,000 entries, followed by Cambridge, Somerville, and Newton. Data comes from a CSV file derived from the public Yelp dataset, and is rendered as SVG using D3 v5. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with axis labels and a title styled via external CSS.

Nov 11, 2021

Loading thumbnail…

Red Face

A red circle face fills the browser window, centered with black-outlined features including two eyes and a semi-circular mouth. The SVG is rendered dynamically through React, with all geometric values calculated from the window dimensions to ensure responsiveness. D3’s `arc()` generator creates the mouth path, while React manages the component tree and mounts it to the DOM. The face uses a simple, static composition with only circles and a single path, demonstrating basic SVG shape rendering with React and D3 utilities.

Nov 2, 2021