S

saivinay143

@saivinay143·26 public vizzes

Loading thumbnail…

ICE 8 country map

This choropleth displays a map of India, with each state filled using the `d3.scaleOrdinal` and `d3.schemeCategory10` color scheme. The map is rendered as SVG paths, generated via `d3.geoPath` and `d3.geoMercator` projection. Hovering over a state turns it orange, as defined by the `.country:hover` CSS rule. The geographic data itself comes from a TopoJSON file fetched from a GitHub gist, which is parsed using the `feature` function from the `topojson` library.

Loading thumbnail…

Fork of ICE-8: Social Network

This visualization shows a small social network of six people, with colored circles representing individuals and orange lines linking them. A force-directed layout, created using `d3.layout.force` from the v2/v3 API, positions the nodes and edges. Node labels are appended as SVG text, while link thickness reflects each connection’s weight value from the JSON data. The graph is rendered as an SVG element, and nodes are draggable via `force.drag`, with positioning updated on each tick event.

Loading thumbnail…

Fork of ICE 8 Family Tree

This interactive family tree visualizes hierarchical relationships using a horizontal dendrogram layout. Each node displays a name and is colored according to a distinct hex value from the included JSON data structure. The visualization is rendered as SVG using D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs, with zoom functionality provided by d3’s `zoom` behavior. Text labels vary in size based on node depth, and the layout adjusts dynamically to the viewport dimensions.

Loading thumbnail…

ICE 8 world map

This example displays a world map using a natural Earth projection, with each country rendered as a green SVG path. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` generators to project and draw geographic features from TopoJSON data fetched from the world-atlas CDN. The code selects an SVG element, loads country boundaries, and appends styled path elements for each nation on a light blue background.

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Area Chart

This visualization shows the number of US cancer cases from 2010 to 2022 using a combined line and area chart. The area chart, filled in brown, represents the magnitude of cases over time, while the grey line overlays the same data to emphasize the trend. The code uses d3.csv to load the dataset, with d3.scaleLinear for both axes and d3.line and d3.area generators, both employing d3.curveBasis for smoothing. Axes are rendered with d3.axisBottom and d3.axisLeft, and the SVG output is styled via external CSS.

Loading thumbnail…

Fork of Area chart

This fork of D3 v5's area chart displays life expectancy (labeled "cases") in the USA over time, using a green filled area under a basis-smoothed curve. The SVG chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels and grid lines via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a GitHub-hosted CSV file, with the y-axis formatted using `d3.format`.

Loading thumbnail…

Fork of Fork of Line Chart

This line chart visualizes US cancer case counts from 2010 to 2022, with time on the x-axis and case numbers on the y-axis, rendered as an SVG path with grid lines and axis labels. The code loads CSV data from a GitHub gist, parses the year and cases fields, and uses d3.scaleTime, d3.scaleLinear, d3.extent, d3.max, d3.axisBottom, d3.axisLeft, and d3.line to generate the chart. The visualization includes a title and styled axis tick marks, with axis labels colored blue and the line stroke in blue.

Loading thumbnail…

Fork of Line Chart

A line chart displays annual US auto sales from 2005 to 2022, with a red path over time and labeled axes for Year and Sales. Built with D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` for the path. Data is loaded via `d3.csv` from a GitHub gist, parsed into dates and numbers, and rendered as SVG inside a 960×500 viewport with margins, gridlines, and a title.

Loading thumbnail…

Pie chart

This pie chart displays the top 10 most populous countries in 2022, with each slice labeled by population count and a color-coded legend listing country names and values. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG paths, while `scaleOrdinal` assigns colors from a hardcoded array. Population data is loaded from a CSV via `d3.csv`, formatted with `d3.format`, and rendered on a yellow background with text labels positioned using `arc.centroid`.

Loading thumbnail…

Fork of Pie Chart

This visualization shows car sales for the month of May, displaying each state's count as a slice of a pie chart with proportional labels and a corresponding legend. The chart uses d3.pie and d3.arc to generate the segments, d3.scaleOrdinal for colors, and d3.select to manipulate the SVG. Data is loaded asynchronously from a GitHub-hosted CSV using d3.csv. Labels apply a custom d3.format tick format, while the legend lists state names and their values.

Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This chart displays car sales in India from 2009 to 2019 using a line graph, with the year on the x-axis and scores (representing sales figures) on the y-axis. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, and `line` to create the path, while `axisBottom` and `axisLeft` render the labeled axes with gridlines. Data is loaded from a remote CSV file, and the SVG output is styled with red line strokes and tick labels set against a dark background.

Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of an ICE 7 visualization displays yearly car sales in India from 2009 to 2019 as a single red line. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` to generate the path. Data is loaded from a CSV file, with year values parsed via `d3.timeParse`. Grid lines and colored axis labels enhance readability against a dark background.

Loading thumbnail…

Fork of D3 line chart: Daily temperature in Belgium for 2021

This interactive line chart visualizes daily average air temperatures in Belgium for 2021, plotted by date. The chart uses D3 v7 within a React app, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes with a natural cubic spline curve (`d3.curveNatural`) through the data points. Data is loaded via `d3.csv` from a gist URL. The SVG renders customized tick marks, axis labels, and a temperature line, with the dataset sorted chronologically.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes US Auto Sales from 2005 to 2022, plotting annual sales figures over time. The SVG chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.axisBottom and d3.axisLeft for tick marks. A d3.line generator creates the path connecting data points, styled with a red stroke. Data is loaded asynchronously from a CSV file via d3.csv, with sales values converted to numbers and years parsed as dates.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes 2022 U.S. auto sales by brand, with each slice’s size proportional to year-to-date sales and a legend showing brand names and values in thousands. The chart loads CSV data from a GitHub gist using `d3.csv`, then renders paths with `d3.pie` and `d3.arc`, colors slices via `d3.scaleOrdinal`, and appends SVG legends with formatted numbers via `d3.format`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands and a corresponding legend listing country names and totals. The visualization uses D3 v5’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths and colors, while data is fetched as CSV from a gist URL and parsed with `d3.csv`. Text labels are positioned via the arc centroid, and the legend is manually constructed with appended rectangles and text elements.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species (setosa in blue, versicolor in red, virginica in green). It also reads sepal length and width values into each circle’s attributes, though the visual radius remains fixed. Built with React and D3 v6, the code uses `csv` to load data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes, rendering circles and axis labels as SVG elements sized to the full window.

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of a stylized scatter plot visualizes the Iris Dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species via color. Each circle represents an iris flower, with the color legend identifying the three species. Built with D3 v5, the code uses `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and the `d3.legend` plugin for the legend. Data is loaded via `d3.csv` from a remote file, and the SVG rendering includes styled axes and a large right-side legend.

Loading thumbnail…

Fork of Car Sales Dateset

This scatter plot visualizes a car sales dataset, showing the relationship between mileage (in thousands of kilometers) and selling price (in millions of Indian Rupees). Each circle represents a car, with its color indicating ownership history—red for first owners, blue for second, green for third, and black for others. The visualization uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to load data from a GitHub Gist and render an SVG. Data points are drawn as semi-transparent circles with a fixed radius, and axes are labeled with custom text.

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which measurement attributes are plotted on the x and y axes, with points colored by species. Built with D3.js v5 and rendered as SVG, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` to construct the plot. The iris data is loaded via `d3.csv` from a linked gist.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example displays the Iris Dataset as a scatter plot, encoding petal length and width along the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to draw the chart’s scales. The visualization fixes the point radius at 4 pixels but additionally sets `rx` and `ry` attributes on each circle to the sepal dimensions, though these do not affect the visual shape.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays country populations from a CSV file, sorted vertically from highest to lowest using D3.js v7. It renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The visualization imports specific D3 modules like `select`, `csv`, and `max` to load and process data.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart visualizes the scores of different teams using D3.js (v7) with SVG rendering. It loads CSV data from a GitHub gist and maps team names to the y-axis with a band scale, while a linear scale positions the bar widths based on score values. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` to construct the chart, with red rectangles and styled text. Axes and margins frame the visualization, which updates dynamically after parsing and converting the numeric score data.

Loading thumbnail…

Fork of FICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset containing population figures for 50 US states and their capital cities. The page displays a styled heading and a preformatted text block that reports the dataset’s size in kilobytes, row count, and column count. The code uses D3.js v7’s `d3.csv` method to fetch the remote CSV file and `d3.csvFormat` to calculate its length. A static SVG illustration of the United States is embedded via an `<img>` tag, while text styling is handled with CSS.

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn as an SVG graphic, centered within a 960 by 500 viewport. The face consists of a yellow circle with a black stroke for the head, two smaller circles for eyes, and a curved path rendered as a mouth using D3’s `arc` generator. The React component uses D3 v5 to compute the arc path, while ReactDOM renders the SVG elements. The code specifies constant offsets and radii for the facial features, creating a static, deterministic illustration.

Loading thumbnail…

Fork of Hello HTML

A modular smiley face assembled from reusable React components, rendered as SVG with D3’s arc generator for the mouth. The face, eyes, and mouth are positioned via a translated group, with a yellow background circle, black stroke, and static dimensions. React 17 manages the component hierarchy, while D3 v7 calculates the mouth’s curved path. The visualization demonstrates component composition and SVG rendering without interactivity.