S

spandhanabadekol

@spandhanabadekol·28 public vizzes

Loading thumbnail…

SwedisH MAP

This example displays a choropleth-style map of Swedish counties, rendered as SVG paths with cyan fills and green boundary lines between regions. The visualization uses a React component structure with D3’s `geoMercator` projection and `geoPath` to draw geographic features from TopoJSON data. The map is loaded via the `json` method and processed with `feature` and `mesh` from the TopoJSON library, with the projection fitted to the viewport using `fitExtent`.

Loading thumbnail…

ICE-8 World Map

This example displays a world map using a natural Earth projection, with each country rendered as a white SVG path with black outlines. The visualization loads geographic data from a GitHub-hosted TopoJSON file, then uses `d3.geoPath` and `geoNaturalEarth1` to project the features onto a 960x500 canvas. The code also draws a transparent sphere outline around the map. D3 v5’s `json` and `select` methods handle the asynchronous data loading and SVG element creation, while TopoJSON’s `feature` API converts the encoded boundaries into usable GeoJSON geometries.

Loading thumbnail…

Fork of ICE - 8 : Family Tree

This example renders a hierarchical family tree as an interactive SVG visualization using D3 v3 and jQuery. The tree layout positions nodes by depth, with each generation colored by type (blue, green, yellow, purple) and connected by black links with orange arrow markers. Users can click nodes to expand or collapse branches, while drag-to-pan and zoom behavior is enabled via `d3.behavior.zoom`. Data is loaded from a JSON file containing nested student records, with tooltips and drop shadows enhancing node presentation.

Loading thumbnail…

Fork of Fork of array to tree

This example converts a shuffled array of numbers into a hierarchical tree visualization. Using d3.stratify to structure the data and d3.tree to compute node positions, it renders red-stroked circles connected by black paths in an SVG. Each circle displays its corresponding array value as text, with a staggered transition duration that varies by tree depth, animating the label appearance. The visualization updates in place, removing and re-adding elements as new arrays are generated.

Loading thumbnail…

Fork of Fork of ICE-8 : Network Tree

This example shows a small network of nine nodes connected by curved links, with node size and color intensity reflecting the number of connections each node has. The graph is generated from a hardcoded JavaScript array of link objects using D3 v5’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive node movement. Link stroke color and dash style vary by a numeric value in the data, and the SVG output renders curved paths between nodes with labels.

Loading thumbnail…

Fork of Fork of Fork of Line Chart

This visualization shows product sales from 2015 to 2022, with time mapped to the x-axis and sales figures on the y-axis. The line chart uses a red stroke to trace the sales trend across years. The code loads CSV data from a gist URL using d3.csv, converts the Year column to Date objects and Sales to numbers, then renders the chart with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The SVG output includes gridlines via tickSize and axis labels, with the margin and inner dimensions calculated for layout.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with points colored by species (setosa, versicolor, virginica). The visualization animates every two seconds, cycling the x-axis through petal_width, sepal_width, petal_length, and sepal_length using d3's scaleLinear and extent functions. Built with D3 v6, it renders SVG circles with elliptical dimensions derived from sepal measurements, and includes axes generated via axisLeft and axisBottom.

Loading thumbnail…

Fork of Fork of student Strength Area Chart

This area chart visualizes product sales over time, with a filled, smoothed curve showing sales volume across years. Built with D3 v6, it uses `scaleTime` and `scaleLinear` for axes, an `area` generator with `curveBasis` for the smooth path, and `axisBottom`/`axisLeft` for gridlines and labels. Data is loaded from a CSV file, with year values parsed using `timeParse`, and rendered as an SVG with custom styling for titles and axis text.

Loading thumbnail…

Fork of Fork of Line Chart

This example visualizes annual U.S. auto sales by brand from 2015 to 2022 as a single red line chart. The x-axis encodes years as dates using `d3.scaleTime`, while the y-axis maps numeric sales values with `d3.scaleLinear`. Data is loaded from a CSV file via `d3.csv`. The chart renders as SVG, with axes drawn using `d3.axisBottom` and `d3.axisLeft`, and the line generated by `d3.line`. Grid lines and axis labels are styled through CSS classes.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes US auto sales from 2005 to 2022 using D3 v5, rendering as an SVG. The chart plots annual sales figures, sourced from a CSV file loaded via D3’s `d3.csv`, showing a red line path generated by `d3.line()`. It employs `d3.scaleTime()` for the year axis and `d3.scaleLinear()` for sales, with axes and labels created via `d3.axisBottom()` and `d3.axisLeft()`. The visualization includes a title and styled grid lines, all configured within a fixed 960x500 SVG canvas.

Loading thumbnail…

Fork of Fork of ICE - 7

This visualization shows the top 10 soap products as a pie chart, with each slice sized by the product’s year value and labeled with a rounded thousand figure. The chart uses d3.pie and d3.arc to generate the segments inside an SVG, with d3.scaleOrdinal assigning colors from a fixed array. It also includes a legend built with appended SVG rects and text elements, and it loads its data via d3.csv from a raw GitHub gist file.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This interactive SVG pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using data from a CSV file. The chart, built with D3 v5, uses `d3.pie` and `d3.arc` to generate the sectors, with each slice colored and labeled by death count (in thousands). A legend on the right maps country names to their corresponding values. The code leverages D3's `scaleOrdinal` for color assignment and `arc.centroid` for text placement.

Loading thumbnail…

Fork of ice 7

This visualization shows the top 10 countries by deaths from air pollution in 2020 using a pie chart, with each slice labeled with its corresponding death count in thousands and a legend listing country names and values. The code loads data from a CSV via `d3.csv`, processes it asynchronously, and renders the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for slice colors. SVG elements are appended and positioned using `d3.select`, and text labels are placed using `arc.centroid`. Percentages are not shown; only raw death counts are displayed.

Loading thumbnail…

ice 7

A pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands. The chart uses d3.pie and d3.arc to generate the segments, with a d3.scaleOrdinal assigning a palette of ten distinct colors. Data is loaded from a CSV via d3.csv, and each slice’s value is formatted using d3.format. A legend on the right lists each country alongside its corresponding color and death count.

Loading thumbnail…

Fork of spandhana

This visualization presents a pie chart of the top 10 countries by deaths from air pollution in 2020, using proportional slices labeled with death counts in thousands. The code loads CSV data via d3.csv, computes the pie layout with d3.pie, and renders arcs using d3.arc with an outer radius of 175. A color scale d3.scaleOrdinal assigns colors from a hardcoded array, while SVG text elements display labels positioned with arc.centroid. Legends are appended as SVG groups with rectangles and text. The visualization is rendered entirely in SVG with D3 v5.

Loading thumbnail…

spandhana

This pie chart visualization shows the top 10 countries by deaths attributed to air pollution in 2020, using data from a CSV file fetched via d3.csv. The chart displays each country's death toll as a labeled slice, with a legend listing country names and corresponding values. Built with D3 v5, the code uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG arcs, while d3.arc().centroid positions the labels. A legend is constructed with appended rectangles and text elements, and values are formatted using d3.format.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths in 2020 due to air pollution, using data from a CSV file fetched from a GitHub gist. Each slice’s angle and color encode the death count, with labels showing values in thousands, and a legend listing countries and their figures. Built with D3 v5, the code uses `pie`, `arc`, `scaleOrdinal`, and `svg.append` to render the chart, drawing paths, text, and legend elements as SVG. The color scheme assigns distinct hues to each country via a hardcoded array.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This interactive SVG pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using data from a CSV file. The chart, built with D3 v5, uses `d3.pie` and `d3.arc` to generate the sectors, with each slice colored and labeled by death count (in thousands). A legend on the right maps country names to their corresponding values. The code leverages D3's `scaleOrdinal` for color assignment and `arc.centroid` for text placement.

Loading thumbnail…

1

This visualization shows a horizontal bar chart comparing the top 10 most populous countries, with each bar representing a country's population. The chart uses D3.js v5 within a React framework, reading data from a CSV file and rendering the result as an SVG. The code uses D3's scaleBand for the categorical y-axis, scaleLinear for the numeric x-axis, and the csv function to load the data.

Loading thumbnail…

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

This visualization displays the top 10 soap products as a horizontal bar chart, with bar lengths encoding product population values from a CSV dataset. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders SVG rectangles directly through React components. The chart includes custom grid lines and axis tick labels generated from `xScale.ticks()`, with data loaded asynchronously via `d3.csv`.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes while encoding species with color (violet, orange, and green). The visualization also incorporates sepal measurements as the radius and an elliptical shape for each point. Built with D3 v6 and React, the code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data and render SVG circles, with axis labels and a large tick font size for readability.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork of the Iris Dataset scatter plot visualizes car pricing data with D3.js, mapping car names and models along the axes. Each point is color-coded by species and displays an ellipse-like shape using the `rx` and `ry` attributes instead of a traditional circle. The code loads CSV data from a remote URL, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the plot within an SVG canvas. The plot adapts to the full browser window size.

Loading thumbnail…

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

This visualization uses a bar chart to display the top 10 soap product countries by population for the year 2019. The React app loads CSV data with D3’s `csv` parser and renders an SVG with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. D3’s `axisLeft` and `axisBottom` are replaced by manual tick rendering, while blue horizontal gridlines and text labels structure the chart. The component uses React hooks like `useState` and `useEffect` to fetch and manage data.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork of the Iris Dataset scatter plot visualizes petal length and width for three iris species, coloring each point by species (blue, red, or black). The D3 v6 code loads CSV data from a gist, maps petal dimensions to the x and y axes, and draws circles with a fixed radius of 5 pixels. It uses `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the chart, while also extracting sepal length and width values (rx and ry) without affecting the plot’s visual output.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example shows the classic Iris Dataset scatter plot, with each point representing an iris flower colored by species (blue for setosa, red for versicolor, black for virginica). It plots petal length on the x-axis and petal width on the y-axis. The code loads data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom` for the axes. Although `rx` and `ry` attributes are set, the circles use a fixed radius.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data from a remote URL using D3.js. It displays a summary message showing the data size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` and `d3.csvFormat` to fetch and measure the dataset, then updates the text content of a `pre` element. The page also includes a styled heading and an inline SVG image, rendered as static HTML.

Loading thumbnail…

Fork of homework smiley face

This fork renders a stylized smiley face as a static SVG using React and D3 v7. It shows a large circular face with eyes, eyebrows, antenna-like lines, and a curved mouth arc, all positioned relative to the center of a 960×500 canvas. The code uses the D3 `arc()` generator to create the mouth path, while circles, ellipses, and lines are drawn as SVG elements. All shapes are hard-coded with fixed coordinates and dimensions, with no interactive or data-driven behavior.

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example shows a partially completed smiley face constructed from basic SVG shapes. A large green circle with a blue border serves as the face, while two smaller black circles act as eyes. The code uses D3 v7’s `select` and `arc` APIs to append a mouth path, with the arc generator defining its inner and outer radii and start/end angles. The SVG canvas is set to 960 by 500 pixels, with hardcoded coordinates positioning the elements.