S

Saikiran2029

@Saikiran2029·26 public vizzes

Loading thumbnail…

Network map

This network map visualizes a small LinkedIn-style social graph, showing eight people as labeled circles and their connections as orange weighted lines. The graph uses a force-directed layout with D3’s `d3.layout.force()` to position nodes, with gravity, charge, and distance parameters controlling the spacing. The HTML/SVG canvas is built with `d3.select`, and node positions are updated on each tick via the force layout’s `on("tick")` event, while link thickness reflects the `weight` field from the JSON data.

Loading thumbnail…

Fork of Network graph

This network graph displays a LinkedIn-style social network, with eight named nodes connected by weighted links. The code loads JSON data with `d3.json` and uses the older `d3.layout.force` API to simulate a force-directed layout within an SVG. Node labels are drawn in orange text, while link thickness reflects each connection’s weight value. The visualization shows relationships between individuals such as sam, raju, and saleem, with graph positions updated on each tick event to settle the layout.

Loading thumbnail…

Untitled

A network of ten nodes labeled A through J uses D3.js's `d3.forceSimulation` to arrange itself, with `d3.forceLink` defining connections and `d3.forceManyBody` providing repulsion to spread the nodes. Red lines represent links, while blue circles mark the nodes, which are positioned and updated at each simulation step. The graph is rendered as SVG, with node positions and link coordinates refreshed in the `ticked` function. The data, including node names and link pairs, comes from a local JSON file, and some links appear duplicated, suggesting a directed or multi-edge structure.

Loading thumbnail…

Mexico Waste 2018

This choropleth map shows the total kilograms of waste generated by each Mexican state in 2018. The visualization uses a viridis color scale, ranging from dark purple for lower waste amounts to bright yellow for higher amounts, with pink indicating missing data. Built with React and D3 v6, it projects the map using a Mercator projection via `d3.geoPath` and `d3.geoMercator`. State boundaries come from a TopoJSON file processed with `topojson.feature`, while waste data is loaded from a CSV using `d3.csv`.

Loading thumbnail…

Fork of Fork of Mexico Region Map ( D3 & React & TopoJSON )

This map of Mexico displays its regional boundaries using a Web Mercator projection. The visualization layers a graticule and state landmasses as SVG paths, colored with a teal fill and white strokes. Built with D3 v6 and React, it loads TopoJSON data from a GitHub gist, converts it to GeoJSON via the `topojson` feature API, and renders it using `d3.geoPath`. The original data source for the boundaries is attributed to ArcGIS.

Loading thumbnail…

WORLD MAP DISPLAYING BOUNDARIES

This visualization displays a world map with country boundaries, rendered as SVG paths using React and D3’s geoNaturalEarth1 projection and geoPath. It shows landmasses, graticules, and interior borders from the World Atlas TopoJSON, loaded via d3.json and processed with topojson’s feature and mesh. The map uses distinct colors for each layer, including yellow sphere, orange graticules, pink land, and red interiors.

Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map using a blue sphere as the globe background and green country polygons with black outlines. It uses d3.geoEquirectangular for the projection, d3.geoPath to generate SVG paths, and TopoJSON’s feature method to convert country boundaries from the world-atlas@2 dataset (countries-110m.json). Countries change color to dark orange on mouse hover, as defined by the CSS :hover rule. The SVG renders with a fixed 960×500 viewport, and the code loads d3 v5, TopoJSON v3, and a bundled index.js.

Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris Dataset, cycling through different pairings of sepal and petal measurements every two seconds. The visualization uses D3.js version 6.7.0, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart, with species color-coded as red, blue, or grey. Rendered as an SVG, the plot updates dynamically by changing the x-axis variable through a `setInterval` loop, while the reusable `scatterPlot` chart component handles the layout and axis rendering.

Loading thumbnail…

Fork of Area Chart

This chart shows how many people visited a location each year from 2010 to 2019, combining a smooth blue line for the trend with a filled yellow area beneath it. The visualization uses d3.scaleTime and d3.scaleLinear to map the date and visitor count, with d3.line and d3.area generators using a curveBasis interpolation. Data is loaded from a CSV file, and the axes include formatted tick labels with grid lines, rendered as SVG elements.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes visitor counts per year from 2010 to 2019, with a green title, blue axis labels, and an orange trend line. Built with React and rendered as SVG, it uses d3.csv to load data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Grid lines extend from the ticks, and margins position the chart within the 960×500 viewport.

Loading thumbnail…

Fork of ICE 7 Line Chart

This visualization displays the annual number of tourists visiting from 2010 to 2019 using a line chart. The x-axis maps years on a time scale, while the y-axis uses a linear scale for visitor counts, with grid lines and clearly labeled axes. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG path. Data is loaded from a remote CSV file, with visitor values parsed as numbers and dates formatted via `d3.timeParse`. The dark background and red styling emphasize the trend over the decade.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

This pie chart visualizes the total number of tourists visiting various countries, with each slice colored distinctly and labeled with its value in lakhs. The chart reads data from a CSV file fetched via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the segments, while `scaleOrdinal` assigns the categorical colors. A legend on the right maps each country to its corresponding color and visitor count, rendered alongside the chart using SVG elements. The visualization updates dynamically asynchronously, with text labels positioned via `arc.centroid` for clarity.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example visualizes the top 10 countries by deaths from air pollution in 2020 using a pie chart. It shows each country’s death count as a colored slice, with labels displaying values in thousands, alongside a legend listing countries and their corresponding numbers. The visualization uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `select` to generate SVG paths and text. Data is fetched as CSV from a GitHub gist, and the chart renders in an SVG container with a centered title.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the top 10 countries by air pollution-related deaths in 2020, using a dataset fetched from a GitHub gist. Each slice is labeled with the number of visitors, and a legend lists the countries with corresponding color swatches. Built with D3.js v5, the visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping, rendering paths and text into an SVG canvas. Data is loaded asynchronously via `d3.csv`, and the chart is positioned at the center of the 960×500 viewport.

Loading thumbnail…

pie chart of people visited

This pie chart visualizes the number of people who visited various countries, with each slice labeled with its corresponding value in thousands. The chart is rendered using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, drawing SVG paths for the segments and text labels at their centroids. A legend on the right maps each country to its slice color and displays the numeric value. The data is loaded from a remote CSV file via `d3.csv`, with slice colors assigned from a hardcoded array.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). It also encodes sepal length and width as the horizontal and vertical radii of the ellipse-shaped markers, adding extra data dimensions. Built with D3 v6, the code loads CSV data using `d3.csv`, scales axes with `scaleLinear`, and renders the plot as SVG circles with `rx` and `ry` attributes, using `axisLeft` and `axisBottom` for ticks.

Loading thumbnail…

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

This visualization shows the number of people who visited various countries using a horizontal bar chart, with country names on the y-axis and visitor counts on the x-axis. The chart renders SVG marks and channels through React components, using D3 scales (`scaleBand` and `scaleLinear`) to position the bars and grid lines. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization is updated with React Hooks (`useState` and `useEffect`). The chart includes blue vertical grid lines and green rectangular bars, with axis ticks generated manually from the D3 scales.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries, using the `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The bars are rendered as SVG rectangles via React, with tick marks and labels generated from D3’s scale ticks. The chart loads data from a CSV URL using `d3.csv`, and the code shows the use of `d3.max` for domain scaling.

Loading thumbnail…

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

This interactive bar chart visualizes the top 10 most populous countries using data loaded from a CSV file via `d3.csv`. The React component manages state with hooks, while D3 scales (`scaleBand`, `scaleLinear`) and axes position each rectangle in an SVG render. The chart displays population values from 2019 on the x-axis, with country names on the y-axis.

Loading thumbnail…

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

This example displays a horizontal bar chart of the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 provides the `csv` data loading, `scaleBand` and `scaleLinear` for scales, and `max` for domain calculation. Population data is sourced from a CSV file, and each bar’s width encodes the 2019 population value, with grid lines and tick labels generated from D3’s scale ticks.

Loading thumbnail…

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

This chart displays the top 10 most populous countries as horizontal bars, with each bar's length corresponding to a numeric score from the "2017" field of a college dataset. Using the `react` and `d3` libraries, the React component maps data to SVG rects based on `scaleBand` and `scaleLinear` scales, and renders axes with tick marks. It loads the data via d3's `csv` parser from a URL, and updates the visualization reactively through state management.

Loading thumbnail…

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

A bar chart displays the top 10 most populous countries from a Netflix dataset loaded via D3's `csv` function. The visualization uses React with `useState` and `useEffect` to manage data fetching, while D3's `scaleBand`, `scaleLinear`, `max` and `format` APIs handle the scales and axes. The SVG rendering includes grid lines, tick labels, and rectangles representing population values.

Loading thumbnail…

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

This is an SVG bar chart that visualizes the top 16 cancer rates by state, ordered by population. The chart uses React with D3's `csv`, `scaleBand`, and `scaleLinear` to parse and scale the data. The bars are rendered as SVG `<rect>` elements within a `<g>` group. The horizontal axis uses D3's `axisBottom`-style ticks generated via `xScale.ticks()`. The data is loaded from a remote CSV file and displayed horizontally with state labels on the left.

Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 cases on January 28, 2020, as horizontal bars ranked by population. Built with React and D3 v5, the chart uses `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis case counts, rendering SVG rectangles for bars and manually drawn tick marks and axis labels. Data loads asynchronously from a CSV via `d3.csv`, with numeric parsing applied before state updates trigger re-rendering.

Loading thumbnail…

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

This example demonstrates how to load and parse a CSV dataset using the D3.js library. It displays a summary of the data—including its size in kilobytes, row count, and column count—in a large, styled `pre` element on the page. The implementation uses `d3.csv()` to fetch the remote CSV file and `d3.csvFormat()` to measure its size, alongside basic HTML and CSS for layout. The page also includes an embedded SVG illustration of a smiley face, rendered directly in the markup.

Loading thumbnail…

Fork of homework smiley face

This smiley face visualization uses SVG shapes to render a cartoon face with pink circular cheeks, eyes featuring green pupils and brown irises, and expressive black line-based eyebrows and a smile. Built with React and D3.js, the code constructs the face using D3’s `arc` generator to create the mouth path, while standard SVG `<circle>`, `<ellipse>`, and `<line>` elements form the rest of the features. The face is centered on a 960x500 canvas, with all elements drawn declaratively through React's JSX syntax.