S

sri7harsha

@sri7harsha·18 public vizzes

Loading thumbnail…

assignment

This interactive choropleth-style map displays a first-level drill-down from Indian states to their districts. Clicking a state triggers a smooth zoom animation into that region, revealing its district boundaries from a second TopoJSON dataset. Built with React and D3 v6, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to handle projection, path generation, and zoom-to-bounding-box transitions. SVG elements render all geographic features, with a stroke-width adjustment that responds to zoom scale for crisp outlines.

Loading thumbnail…

Untitled

This visualization combines a bubble map of emergency reports with a date histogram. It uses React to render a Mercator projection of the Netherlands, plotting each incident as a red circle based on its coordinates. The accompanying histogram, built with d3's scaling, binning, and time-series functions, displays the daily count of reported incidents. Both views read from a CSV file containing geolocation and timestamp data.

Loading thumbnail…

Untitled

This example presents a pie chart of company values, with each slice labeled by company name and value. The chart uses D3 version 3 to load CSV data and generate the pie layout, with an ordinal color scale assigning distinct colors to each company. A custom legend, built using a reusable `d3.legend` function, displays each slice’s label and color in a boxed list beside the chart. The visualization is rendered as SVG, with text labels placed at each arc’s centroid.

Loading thumbnail…

Untitled

This visualization combines a line chart with a filled area to display stock prices over time. The chart uses a time-series x-axis and a linear y-axis, with the area under the curve highlighted in green to emphasize the cumulative trend. Data is loaded from a CSV file using `d3.csv`, while scales and axes are constructed with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The line and area paths are generated using `d3.line` and `d3.area` with a basis curve, rendered as SVG within a styled HTML page.

Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris dataset, cycling through different feature pairs every two seconds. Each point represents a flower sample, colored by species (setosa, versicolor, or virginica) and positioned using d3’s `scaleLinear` and `extent` for axes. The reusable `scatterPlot` function, imported from a separate module, renders axes via `axisLeft` and `axisBottom`. The SVG is constructed with d3 selections, and the animation uses `setInterval` to update the x-value mapping. Data is loaded as CSV from a GitHub gist, and the plot’s axes are labeled as “X-AXIS” and “Y-AXIS.”

Loading thumbnail…

Untitled

This example displays a time-series line chart of stock prices from January 2017 to December 2022, with the price on the y-axis and the year on the x-axis. Using D3 v4 with SVG rendering, it loads data from a CSV file via `d3.csv`, parses dates with `d3.timeParse`, and constructs scales with `d3.scaleTime` and `d3.scaleLinear`. The line is drawn using `d3.line` with a cardinal curve, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Untitled

This example presents a pie chart visualizing company values, with each slice labeled and colored by company. The chart is generated using D3.js v3, employing the `d3.layout.pie` and `d3.svg.arc` APIs to compute and draw the arcs. A custom legend, defined in `d3.legend.js`, is placed to the right and uses metadata attributes like `data-legend` and `data-legend-color` to automatically generate labeled items with colored circles. The data is loaded from a remote CSV file, and the chart renders as SVG with a fixed size and ordinal color scale.

Loading thumbnail…

Iris

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while styling each circle with a color-coded species (orange, green, or brown). The code also encodes sepal dimensions by distorting each circle’s rx and ry attributes, creating ellipse-like shapes whose horizontal and vertical radii reflect sepal length and width. Built with D3 v6, it loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes via `d3.axisLeft` and `d3.axisBottom`. Circles are appended as SVG elements with custom fill, radius, and elliptical attributes.

Loading thumbnail…

ICE-6

This horizontal bar chart visualizes the top 20 countries by population, with red bars extending from a shared baseline. The visualization uses React to manage state and D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously via `d3.csv` from a GitHub gist. Gridlines and tick labels are manually rendered as SVG elements using D3’s `ticks()` method, with the chart displayed within an SVG container on an HTML page.

Loading thumbnail…

Data Visualisation

This example demonstrates a bar chart visualization of company values using a CSV data source loaded from a gist. The chart is rendered on a canvas element using Chart.js, a JavaScript library for charting, with D3.js v6 used to fetch and parse the data via `d3.csv`. The visualization displays company names on the x-axis and their corresponding dollar values on the y-axis, with axis labels labeled "Company" and "Value($)". The bar chart also includes randomly generated background colors for each data point, though the dataset currently uses a fixed blue color for the bars.

Loading thumbnail…

D3 with DS4E

A bar chart visualizes stock prices for various car companies, using data loaded from a CSV file hosted on GitHub. The visualization is built with D3.js v7 within a React framework, rendering as animated SVG. Bars animate in with a staggered delay, and hovering over a bar triggers a tooltip displaying its value while the bar expands in size. The chart includes labeled axes for companies and stock price in USD.

Loading thumbnail…

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

This example shows car sales populations for 10 countries in 2020 using horizontal bars rendered as SVG rectangles. The visualization maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale, displaying tick marks and labels generated manually from scale ticks. It uses React with hooks (useState, useEffect) to load and store CSV data via d3.csv, while d3.scaleBand and d3.scaleLinear define the scales and the axis elements are drawn directly as SVG groups and lines. The data originates from a Kaggle-derived CSV file fetched from a GitHub gist.

Loading thumbnail…

ICE-5: Loading and Working with csv.data

This example demonstrates loading a CSV file with D3 and displaying its key metadata. The visualization shows a car SVG image overlaid with text reporting the file’s size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch the data from a GitHub Gist URL, then `d3.csvFormat` to compute the file size. The results are displayed using DOM manipulation with `document.getElementById` to update HTML heading elements.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the file’s metadata—such as size, row count, and column count—as text overlaid on a car illustration. The visualization uses `d3.csv` to fetch data from a GitHub Gist URL, then computes the file size in kilobytes via `d3.csvFormat(data).length`, and retrieves the dataset dimensions from `data.length` and `data.columns`. The results are dynamically inserted into HTML elements using the DOM API, with Bootstrap styling framing the output.

Loading thumbnail…

Untitled

This example presents a minimal interactive visualization built with React, using D3’s force simulation to position and animate a set of nodes. The graph layout responds to user drag interactions, with link and node elements rendered as SVG paths and circles. The code leverages `d3.forceSimulation` for physics-based positioning and `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to manage forces. It demonstrates how to integrate D3’s simulation lifecycle with React’s rendering cycle, updating positions on each tick without external data sources.

Loading thumbnail…

Fork of Smiley face part 1

A stylized smiley face built with React and D3 v6, rendered as SVG. The face uses a green circle with a red stroke as the head, brown and red circles for eyes, and a D3 arc path for the mouth, with the arc’s inner radius and start/end angles set manually. The code imports the `arc` function from `d3` and defines all shape parameters in JavaScript, while React handles the SVG element creation and DOM rendering.

Loading thumbnail…

Fork of homework smiley face

This D3 v7 and React example renders a smiley face as a decorative SVG composition. The face uses primitive shapes: circles for the head and eyes, ellipses for the nose, lines for the mouth and eyebrows, and a `d3.arc`-generated path to create a thick, partial ring for the smile. The scene is centered via a `transform` and hardcoded coordinates. The example demonstrates basic geometric drawing and path construction within a React rendering pipeline, with no external data source.

Loading thumbnail…

cat face smiley

This D3.js and React visualization renders a playful cat face smiley inside an SVG. The code uses D3’s `arc` API to draw the mouth as an elliptical arc, while the face, eyes, eye balls, nose, and whiskers are composed of primitive SVG shapes like circles, ellipses, and lines. The design uses hardcoded coordinates and styling, with the entire composition centered via a transform.