Yashwanth0311

@Yashwanth0402·13 public vizzes

Fork of HeatMap

This heatmap visualizes monthly average temperatures across multiple cities (including Bangalore, Vancouver, and San Francisco) for the years 2020 through 2022, using a dataset trimmed to the first ten cities and first temperature entry per month. The visualization employs Chart.js to render the data on an HTML canvas, with each city-year combination displayed as a separate dataset of monthly values. Color intensity and border styling encode temperature ranges, allowing quick comparison of seasonal patterns and annual variations. The rendering leverages the canvas API directly, with the code providing static sample data that can be replaced with real measurements.

Apr 18, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of temperature data over time, cycling through multiple cities from the Iris Dataset. It visualizes yearly temperature readings (in Kelvin) for each city, with circles colored by city and positioned along the x-axis for year and y-axis for temperature. The visualization uses D3.js v7, loading data via `d3.csv`, parsing dates with `d3.timeParse`, and rendering SVG circles with scales like `d3.scaleLinear` and `d3.scaleOrdinal`. A `setInterval` triggers periodic updates, redrawing the plot for each city every two seconds.

Mar 26, 2024

Loading thumbnail…

ICE 7 Area Chart

This visualization displays the average temperature of Vancouver from 2010 to 2020 as a smooth line chart with a gradient-filled area beneath the curve. The y-axis shows temperature in Kelvin with a truncated format, while the x-axis represents years. Built with D3.js v5, it uses `scaleTime`, `scaleLinear`, `line`, and `area` generators with a `curveBasis` interpolation. Data is loaded from a CSV via `d3.csv`, and the area is filled using an SVG linear gradient transitioning from solid purple to transparent.

Mar 26, 2024

Loading thumbnail…

ICE7 - Pie Chart

This visualization displays temperature data for Vancouver across multiple years using a pie chart, where each slice represents a year’s value and is color-coded via a categorical scale. The chart is rendered with SVG elements, with D3’s `pie` and `arc` generators computing the slice paths, and `scaleOrdinal` with `schemeCategory10` assigning colors. Data is loaded from a CSV file using D3’s `csv` method, and legends are generated manually to map colors to years.

Mar 26, 2024

Loading thumbnail…

Fork of Pie Chart

This visualization displays a pie chart of annual values from 2010 through 2020, with each slice labeled by its corresponding year and colored using the D3 categorical color scheme. The chart is rendered as SVG within a 600x400 pixel canvas, using the `d3.pie` layout function to compute arc segments and `d3.arc` to generate the path geometries, with color assigned via `d3.scaleOrdinal`. Labels are positioned at each slice’s centroid using the arc’s centroid method.

Mar 26, 2024

Loading thumbnail…

Fork of Simple Line Chart

This example visualizes the Keeling Curve, plotting atmospheric carbon dioxide measurements from Vancouver over time. The chart uses a time-scaled x-axis and linear y-axis to draw a line graph with data loaded from a CSV file via `d3.csv()`. It employs D3 v7’s `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to render the SVG path, with axes generated using `d3.axisBottom()` and `d3.axisLeft()`. The visualization demonstrates a simple, reusable line chart template adaptable to other datasets.

Mar 26, 2024

Loading thumbnail…

Fork of d3 time series heatmap

This heatmap visualizes temperature variations across multiple locations over time, with each cell colored along a blue-to-red gradient using a sequential color scale. The visualization employs D3.js v7’s `scaleBand` and `scaleSequential` APIs, rendering SVG rectangles for each data point. Hovering reveals a tooltip with the location and exact temperature in Fahrenheit. The underlying dataset, sourced from the CORGIS health dataset, is displayed with colorbrewer’s interpolated palette and includes axis labels generated via D3’s `axisBottom` and `axisLeft` helpers.

Mar 23, 2024

Loading thumbnail…

ICE6- Scatter plot analysis for Cricket

This scatter plot visualizes cricket match data by plotting total runs against the over number, with each point representing a match and labeled by match ID. The chart uses Plotly.js to render triangular blue markers on a gray background, with axes for overs and runs. The data is fetched from a CSV file hosted on GitHub Gist, which includes fields for match ID, inning, over, and runs. The visualization reveals run-scoring patterns across different phases of an innings, with the layout customizing the title, axis ranges, and grid styling.

Mar 21, 2024

Loading thumbnail…

ICE6-BAR graph fork Yashwanth with D3.js

This bar chart visualizes average temperatures for multiple cities, with each city represented by a blue rectangle and the y-axis encoding temperature values. The visualization uses D3.js v5 scales (scaleBand for the x-axis, scaleLinear for the y-axis) alongside React hooks to manage CSV data loading and rendering. Axes are generated using d3.axisBottom and d3.axisLeft, while the temperature data is loaded from a remote CSV file. The chart includes labeled axes for "Cities" and "Temperature," with a 10-unit headroom added to the y-axis maximum for visual spacing.

Mar 21, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimension pairings of the classic Iris dataset. Initially displaying petal width against sepal length, the visualization automatically swaps the x-axis variable every two seconds, exploring all four measurement combinations. The plot is built using a custom `scatterPlot` function that leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs for scaling and axis rendering. The animation is driven by `setInterval` in the main script, which updates the chart's x-value binding and re-renders the SVG via the `.call(plot)` method, all based on data fetched from a GitHub-hosted CSV file.

Mar 20, 2024

Loading thumbnail…

Fork of HTML Starter

This example renders a playful, decorative SVG scene on a green background, featuring stylized clouds, a bright sun, and two animated butterflies floating across the screen. The page, titled "CSV URL ICE5," pairs a fixed header with a color accent and a temperature icon to suggest a weather or climate theme. Built with D3 v7 and React, it uses SVG elements and CSS keyframe animations to create a lighthearted visual experience. Although the title references CSV data, no data loading or visualization is implemented; the primary focus is on the aesthetic arrangement and motion of the graphic elements.

Mar 7, 2024

Loading thumbnail…

snowman

This example builds a snowman from basic geometric shapes using D3. It shows a snowman with a black hat, orange carrot nose, button eyes, stick arms, and a red umbrella, all rendered as circles, rectangles, lines, and an arc. The code uses D3’s selection and data join methods to bind arrays of shape data, while the umbrella’s curved dome is drawn with `d3.arc()`. The visualization runs entirely with static SVG elements in a gray container, emphasizing shape composition over interactivity.

Feb 27, 2024

Loading thumbnail…

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

This example creates a smiley face with movable eyebrows using D3.js, demonstrating fundamental DOM manipulation with SVG. The face is drawn with a yellow circle for the head, black eyes, and a mouth shaped as an arc via the `arc` generator. The code uses D3 selections and attribute setters to position elements relative to the center of the SVG canvas, with dimensions defined in the HTML. The visualization shows a static face without interaction, as the code only sets initial positions and styles, relying on D3 v5’s `select` and `arc` APIs to construct the SVG structure.

Feb 27, 2024