S

Sampras Dsouza

@samprasdsouza·25 public vizzes

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a bar chart of sample categorical data, with bars colored in teal, alongside an unfinished bar chart template for top 10 most populous countries using React and D3. The visualization uses React hooks like `useState` and `useEffect` to manage data loading and window resize events, while D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`) render the SVG marks in the `lineChart.js` component. Data for the country chart is fetched via `d3.csv` from a GitHub gist, though only the sample chart renders visible output.

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population formatted in billions on the x-axis. It uses React with SVG rendering, the d3.scaleBand and d3.scaleLinear scales for positioning, and d3.csv for loading the UN World Population Prospects 2019 dataset. Custom AxisBottom and AxisLeft components render ticks, while Marks draws rectangles with native SVG tooltips. The chart uses a teal color for bars and the Poppins font.

Loading thumbnail…

Fork of Line Chart

This visualization displays annual US automotive sales from 2005 to 2022 as a single red line chart. The chart uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG path. Axes include labels for Year and Sales, with grid lines created via tickSize, and the title appears above the plot. The dataset is sourced from a GitHub gist containing yearly sales figures.

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML!” centered in a large font. It uses basic CSS for styling, including a `.message` class with a font size of 13em and text alignment, and a single HTML `<div>` element to render the message. The page is a bare-bones starter template demonstrating the interplay of HTML, CSS, and JavaScript, with no external libraries or data sources involved. It serves as a foundational structure for building more complex visualizations.

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

Loading thumbnail…

Fork of HTML Starter

This example shows a stacked bar chart that visualizes soil condition data across different plant groups. It uses a dropdown selector (initialized but not populated with options) and renders the chart as SVG using D3.js v4. The code loads CSV data from a remote GitHub source, applies a sequential color scheme from `d3-scale-chromatic`, and constructs the stacked layout using `d3.stack()`. Bars are drawn with `d3.scaleBand` for the X-axis and a linear scale for the Y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Making a barchart

This horizontal bar chart displays the populations of the ten most populous countries, scaled to actual values in thousands. The visualization reads population data from a CSV file using `d3.csv`, then renders SVG rectangles with scales from `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axis generators `axisLeft` and `axisBottom` label the countries and population counts. The chart uses a steelblue fill for the bars and is built with D3 v5, rendered as an SVG element.

Loading thumbnail…

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

A yellow circle with black outlines forms a cartoon face, using SVG elements for the head, eyes, eyebrows, and a mouth created with d3.arc’s path. The eyebrows animate vertically via chained d3 transitions, moving up and down repeatedly. D3 v5 selections and attribute methods position the face components relative to the SVG's center, while inline JavaScript and CSS handle rendering and page layout.

Loading thumbnail…

Fork of React & D3 Starter

This scatterplot of the Iris dataset plots sepal length against petal length, with each flower represented as a translucent circle. Built as a starter template, it demonstrates a decoupled React and D3 integration: React manages the component lifecycle and SVG container, while D3 handles scales and rendering. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` within a `VizWrapper` that passes data and dimensions to a reusable `viz` function, illustrating patterns for scaling complexity in real-world projects.

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This visualization displays the number of games played by NBA players, allowing users to select a team from a dropdown menu to filter the data. Each bar represents a single player, with the x-axis showing abbreviated player names and the y-axis showing the count of games played. The chart is built using React and D3 v5, with the `csv` function loading the dataset and `scaleBand`, `scaleLinear`, and `scaleOrdinal` used for positioning and color encoding. Bars are rendered as SVG rectangles with a tooltip showing the exact game count, and a color legend uses light green to represent wins.

Loading thumbnail…

Fork of MrW's VizHub Experience 2020 (BACKUP)

This example is a backup of a journal-style dashboard showing a data visualization course experience. It displays a digital LED clock-style rendering of the year "2020" and a VizHub logo using HTML and CSS, with text styled via the LED Digital 7 webfont and layered text shadows for a neon glow effect. The page is rendered in SVG format and includes links to external resources like mrwatson.de and VizHub. The visualization is purely presentational, using CSS flexbox for centering and custom fonts for aesthetic emphasis.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot displays the Iris flower dataset, cycling through four different feature combinations on the x-axis while keeping sepal length on the y-axis to reveal relationships between measurements. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` from the scatterPlot module. Data points are colored by species (setosa, versicolor, virginica) via a marker function, while a `setInterval` updates the x-value selection every few seconds. The code reads the dataset from a remote CSV using d3.csv and includes a legend with custom axis labels.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes daily temperatures in Celsius across multiple cities over one week, with each city represented by a distinct colored line. The data originates from the Data Canvas - Sense Your City project, loaded via `d3.csv`. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping, with `d3.line` and `curveBasis` to generate smooth paths. A legend, built using a custom `colorLegend` function, identifies city names, while axis labels and a title are added as SVG text.

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays temperature readings over time as a smooth, natural line within a scatter plot framework. The chart uses data from the Data Canvas Sense Your City dataset, loaded as CSV and rendered as an SVG. Built with React and D3 v5, the implementation leverages D3's `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `timeFormat` for axes, while the line path is styled with a custom stroke color and width, with axis ticks and labels using the Poppins font family.

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot visualizes the Iris dataset, showing petal length on the x-axis and sepal width on the y-axis for individual flower samples. The visualization uses React components to render the SVG elements, with d3.scaleLinear handling the axis scales and d3.extent computing the data domains. The code defines reusable AxisBottom, AxisLeft, and Marks components, applying Poppins typography and a teal color scheme with subtle grey grid lines. Each circle includes a native SVG title element for hover tooltips displaying the formatted x-axis value.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A smooth line chart visualizes daily temperature fluctuations in San Francisco over one week, using data from the United Nations World Population Prospects 2019 repository. The React-based visualization employs d3.scaleTime and d3.scaleLinear for axes, with a d3.line path using curveNatural to create the organic curve. SVG rendering with custom tick components shows time labels formatted via timeFormat and displays "Time" and "Temperature" axis labels. The interactive scatter-like marks update as the temperature range adapts to the dataset.

Loading thumbnail…

Fork of Working with Time

This fork of Working with Time visualizes a week of temperature readings from the Data Canvas Sense Your City dataset, plotting timestamps against temperature values. The visualization uses SVG rendering with React components, while relying on D3 v5’s scaleTime, scaleLinear, extent, and timeFormat APIs to construct axes and map data points. The scatter plot marks are defined but not rendered in the current code, leaving the chart primarily to display axes and labels. Data loads asynchronously from the provided CSV via d3.csv.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example loads UN population data from a CSV file using D3’s `csv` utility, then renders a horizontal bar chart with React components. The `scaleBand` and `scaleLinear` functions position the bars and axis ticks, while `max` computes the domain. The visualization displays the top 10 countries by 2020 population as SVG rectangles, with country labels on the left axis and numeric tick marks along the bottom. All rendering happens through React’s declarative JSX, with D3 used solely for data loading and scale calculations.

Loading thumbnail…

Fork of Refactored Bar Chart

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered as SVG. The chart uses d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, with custom React components for the axes and marks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The left axis lists country labels, while the bottom axis shows population ticks, with bars representing each country’s 2020 population.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as horizontal bars of varying length, with no axes or labels. The chart uses React to manage state and render SVG rectangles, while D3’s `scaleBand` and `scaleLinear` position and size the bars based on population values. Data comes from the United Nations World Population Prospects 2019, loaded as CSV via `d3.csv` and filtered to the first ten rows. The visualization updates once the data is fetched, showing a simple loading message before the bars appear.

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as colored arcs arranged in a full circle, with each arc’s fill matching its corresponding color’s hex value. The example loads color data from a CSV file using `d3.csv`, then manually computes each arc’s start and end angles by dividing 2π evenly among the data points. React manages the loading state and renders the SVG paths, while D3’s `arc` generator constructs the geometry. The code uses React hooks (`useState`, `useEffect`) alongside D3 utilities, with all rendering performed in SVG.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a webpage that asynchronously fetches a CSV file of CSS named colors and displays a summary of the loaded data, including its size in kilobytes, row count, and column count. The implementation uses React with hooks like `useState` and `useEffect` to manage the data loading state, and the D3 `csv` function to parse the remote CSV file. Rendered as HTML text within a div, the page initially displays “Loading” until the data arrives, after which it prints the derived statistics to both the console and the screen.

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data containing CSS named colors, then displaying the parsed result in the browser console. It fetches the data from a remote GitHub Gist URL using the Fetch API and asynchronous JavaScript with `async`/`await`, then converts the raw text into structured objects with d3.csvParse from D3 v5. The page itself is minimal, featuring a large empty `pre` element, as the primary output is the console log of the parsed data.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV dataset of CSS named colors, showing the file size in kilobytes, row count, and column count in large monospaced text. It loads and parses the data using D3 v5’s `d3.csv` function, which returns a promise that resolves with the parsed tabular data, and then computes the formatted size with `d3.csvFormat`. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating different ways to handle asynchronous CSV loading in a web browser.

Loading thumbnail…

HTML Cars report

This visualization displays a cheerful yellow smiley face rendered as an SVG graphic. The face includes a circular head, two black eyes, and a curved mouth created using D3's arc generator. The code builds the composition using D3 v7 selections and shape primitives, with the SVG canvas set to 1000 by 1000 pixels. The smiley is centered via a group translation, while the mouth and left eyebrow are drawn using the `d3.arc()` path generator with specified angles.