S

SaiSreya1

@SaiSreya1·32 public vizzes

Loading thumbnail…

Fork of Australia Electorate Map

This visualization displays the electoral divisions of Australia, with each region filled by a distinct color from d3.scaleOrdinal and d3.schemeCategory10. The map uses d3.geoMercator, d3.geoPath, and topojson.feature to project and render the topology from australia.json. State names are overlaid at each polygon’s centroid using d3 pathGenerator.centroid. Borders are highlighted in green with thick strokes via CSS.

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes connections between individuals, with nodes representing people and links indicating friendships. The node labels show the person's name, and each link uses a directional arrow to show the relationship flow, with the line weight reflecting the strength of the connection. The visualization uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes in a force-directed layout, reading data from a JSON file. Nodes are rendered as cyan circles with blue strokes, and users can drag them to rearrange the layout.

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes friendship connections among a group of people, with each person represented by a large cyan circle and friendships shown as directed lines with arrowheads. The network layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, allowing users to drag nodes to rearrange the graph. Node and link data come from a local `data.json` file, and the visualization is rendered as an SVG using D3 v6, with hover effects highlighting nodes via CSS classes.

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes friend connections among ten individuals, using cyan nodes and directed links with arrow markers to show relationships. Built with D3.js v6, the visualization employs force-directed layout algorithms including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to arrange the nodes, with drag interactions enabled via `d3.drag`. The data comes from a JSON file containing node and link definitions with relationship metadata, and interactive highlighting is triggered on mouseover events.

Loading thumbnail…

Fork of Tree

This visualization displays a hierarchical tree structure from a JSON data file, representing cartoon characters and their relationships. The tree branches from a central root node, with child nodes extending outward horizontally. Each node is labeled with its character's name and colored according to the `color` property in the data, while gray connecting lines link parent and child nodes. The implementation uses D3 v5's `json()`, `hierarchy()`, `tree()`, and `linkHorizontal()` APIs to parse the data, compute the layout, and draw the SVG paths and text elements. The visualization also includes zoom functionality through the `zoom()` API, allowing interactive exploration of the tree.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays 2022 US auto sales by brand, showing each brand's percentage and total sales in thousands. The visualization uses D3 v5 to load CSV data from a GitHub Gist, then renders an SVG pie chart with colored segments, a legend with brand names, percentage values, and sales figures. The code builds the chart using D3's `pie`, `arc`, and `scaleOrdinal` APIs, with formatting handled by `d3.format`.

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization shows the sales of cars in India from 2009 to 2019, combining a smooth line chart with a filled area beneath it to emphasize the upward trend over time. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` for curved interpolation, and renders as SVG. Axes are created with `axisLeft` and `axisBottom`, with grid lines and formatted tick labels. Data is loaded from a CSV via `d3.csv` and parsed into date and numeric values for plotting.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

A line chart shows automobile sales in India from 1999 to 2012, with the year on the x-axis (scaled by `d3.scaleTime`) and electronic sales on the y-axis (`d3.scaleLinear`). The visualization uses `d3.line` to generate a single blue path, with `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, and the chart is rendered as SVG inside a React application.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays 2022 US auto sales by brand, showing each brand's percentage and total sales in thousands. The visualization uses D3 v5 to load CSV data from a GitHub Gist, then renders an SVG pie chart with colored segments, a legend with brand names, percentage values, and sales figures. The code builds the chart using D3's `pie`, `arc`, and `scaleOrdinal` APIs, with formatting handled by `d3.format`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

Loading thumbnail…

Fork of World Map

This example presents a stylized orthographic world map, highlighting landmasses in pink with black interior borders and a subtle graticule grid. Built with React and D3 v7, it uses `geoOrthographic` and `geoPath` to project and render spherical geometry as SVG. The data comes from the world-atlas TopoJSON file, processed with `topojson.feature` and `topojson.mesh` to generate land polygons and country boundary lines.

Loading thumbnail…

Fork of ICE 8 country map

This example visualizes an interactive choropleth map of India with hover highlighting, using a Mercator projection to render individual states as colored paths. The map displays each region with a categorical color scale and a tooltip title showing the region name. Built with D3 v5 and TopoJSON, the code loads India’s geographic data from a GitHub Gist, projects it using `geoMercator` and `geoPath`, and applies color via `scaleOrdinal` and `schemeCategory10`. The SVG rendering and zoom behavior are handled through D3’s selection and event APIs.

Loading thumbnail…

Fork of World Map

This example displays a world map using an orthographic projection, rendered as SVG with D3’s `geoPath` and `geoOrthographic`. It shows landmasses filled in teal, graticules, sphere outline, and interior borders, drawing from the world-atlas TopoJSON dataset (countries-50m.json) via `feature` and `mesh`. React manages the component state, loading data asynchronously with a custom `useData` hook before rendering the map within a fixed SVG canvas.

Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

This example visualizes body mass index data as a 3D scatter plot, mapping height, weight, and body fat percentage onto the x, y, and z axes of an interactive Plotly chart. The visualization uses Plotly’s `scatter3d` trace type to render pink circular markers with adjustable opacity, while axis titles and fonts are configured through the layout’s scene properties. The code loads data via `d3.csv()` and processes it with a custom `unpack` function to extract attribute values as arrays, which are then passed to `Plotly.newPlot()` to render the chart inside a designated HTML div.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays multi-series car manufacturer sales data as a 3D bar chart, with each manufacturer broken down across the first six months of the year. The visualization loads a CSV file containing the car data and renders it using the `d3-x3d` library, which translates D3.js selections into X3D scenes displayed through the X3DOM runtime. The code uses `d3.csv` to parse the data and `d3.x3d.chart.barChartMultiSeries()` to generate the three-dimensional bars, with the chart embedded in a div selected via `d3.select`. The chart is built with D3 v5 and the d3-3d plugin for 3D layout.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot explores the Iris dataset, cycling through different pairings of sepal and petal measurements every two seconds. It uses D3 v6's `scaleLinear`, `scaleOrdinal`, and axis components within a reusable `scatterPlot` function, rendering SVG circles with color-coded species. The visualization also includes a legend and a secondary set of static, elliptical marks, demonstrating data-driven attribute binding.

Loading thumbnail…

Fork of Pie Chart

This visualization presents 2022 US auto sales by brand as a pie chart, using D3 v5 to load CSV data from a GitHub gist and render SVG sectors. It employs `d3.pie` for arc generation, `d3.arc` for path construction, and `d3.scaleOrdinal` for a custom color palette. A legend lists each brand with its percentage share of total sales and raw sales figures in thousands, formatted via `d3.format`. The chart is centered in an HTML page with a styled title, all code running from a bundled script with async data loading.

Loading thumbnail…

Fork of Fork of ICE 7question 3 Line Chart

This line chart shows automobile sales in India from 1999 to 2012, with the x-axis representing years and the y-axis representing sales figures. The visualization uses d3.scaleTime and d3.scaleLinear to map data points, with d3.line generating the path and d3.axisBottom and d3.axisLeft creating labeled axes. Data is loaded from a GitHub-hosted CSV file via d3.csv, with sales and year fields parsed before rendering. The SVG chart includes gridlines, axis labels, and a title, all styled through CSS classes.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

A line chart shows automobile sales in India from 1999 to 2012, with the year on the x-axis (scaled by `d3.scaleTime`) and electronic sales on the y-axis (`d3.scaleLinear`). The visualization uses `d3.line` to generate a single blue path, with `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, and the chart is rendered as SVG inside a React application.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This animated scatter plot uses the Iris flower dataset to explore relationships between petal and sepal measurements. The code draws colored circles representing three species—green for setosa, indigo for versicolor, and red for virginica—using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Every two seconds, a setInterval callback updates the x-axis mapping to cycle through petal_width, sepal_width, petal_length, and sepal_length, while the y-axis stays fixed on sepal_length. The visualization employs a reusable scatterPlot function that updates existing SVG circles and axes through data joins.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the Iris dataset, encoding petal width and sepal length on the x and y axes. The visualization cycles through four different data columns every two seconds, automatically re-scaling the axes for each new variable pair. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart, with SVG rendering and animated transitions between attribute combinations.

Loading thumbnail…

Fork of Steve's stylized barchart

A horizontal bar chart ranks the ten most populous countries by their 2020 population estimates from the UN World Population Prospects 2019 dataset. Each bar’s length encodes the population value, with a tooltip showing the exact figure in full numbers. The visualization is rendered as SVG using React components and D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and axis components that generate ticks with SI-formatted labels. Stylized with the Poppins font and teal marks, it omits gridlines beyond the axis ticks.

Loading thumbnail…

bar chart

This visualization displays stock dividend yields for MSE-listed companies in 2020, with data derived from the ratio of dividends to book values from a CSV file. Each company is represented by a horizontal bar, sorted in descending yield order, and the x-axis uses a linear scale labeled as "Yield" with percentage formatting. The chart is rendered as an SVG using D3 v6 APIs, including `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisBottom` with `format` for tick labels. The bars are colored steelblue via CSS, and the layout includes margins, axis labels, and a title, with the data processing and rendering handled entirely through D3's `select`, `csv`, and scale functions.

Loading thumbnail…

Fork of Fork of Barchart of Stock yields

The chart displays stock yields on the Macedonian Stock Exchange in 2020, ranking companies from highest to lowest yield calculated as dividend divided by book value from a CSV file. It uses d3.v6 with SVG rendering, employing d3.csv for data loading, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for labeled axes. Yield values are formatted as percentages, with horizontal bars colored steelblue.

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure. The chart displays monthly electricity usage, with each bar segmented by account number and colored using d3.scaleOrdinal with a categorical color scheme. Built with D3.js (v7), it uses d3.stack to transform the data into stacked series, then renders the visualization as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft. The data is loaded from CSV, grouped by date, and restructured for stacking.

Loading thumbnail…

Untitled

This bar chart displays the height of individuals from a small dataset, with the top 10 most populous countries replaced by a custom BIOSTAT title and HEIGHT axis label. The chart uses D3’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a custom tick format. Data is loaded from `data.csv` via `csv()`, and the visualization demonstrates axis customization, including removing domain lines and adding a centered axis label. The bars are colored steelblue via CSS.

Loading thumbnail…

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

This example demonstrates loading a CSV file of car data from a GitHub gist using D3.js version 7. It displays a summary message showing the file size in kilobytes, the number of rows, and the number of columns. The visualization uses D3’s `d3.csv()` to fetch and parse the remote data, then applies `d3.csvFormat()` to calculate its byte length. The result is rendered as plain text in a large `pre` element on an HTML page with CSS styling.

Loading thumbnail…

Fork of HTML Starter

This example displays the static message “Hello HTML!” centered on the page using large, 13em font size. The code relies on plain HTML, CSS for styling and layout, and does not employ any JavaScript libraries or external data sources. It demonstrates a minimal setup where a single `<div>` element is styled with a CSS class to achieve visual emphasis.

Loading thumbnail…

sreyaaa

A stylized smiley face is drawn as an SVG composition, featuring pink circular cheeks, red eyes with white highlights, purple ears, and an orange arc-shaped mouth. The visualization is built with React and D3 v7, using the `arc` generator from D3 to create the mouth, eye, and ear paths, while standard SVG shapes handle the circles and lines for facial details.