S

Srilekha24

@Srilekha24·25 public vizzes

Loading thumbnail…

Network Graph

This network graph visualizes the relationships between seven nodes representing publication-related concepts like Books, Magazines, and Newspaper, with link weights indicating connection strength. The SVG visualization uses a force-directed layout, where nodes are draggable circles positioned through a physics simulation. The code relies on the older D3 v2 API (`d3.layout.force`, `d3.json`) loaded alongside D3 v4, with nodes and links styled via CSS classes. The graph reads from the embedded `graphFile.json` data source, and edges are drawn with thickness proportional to the square root of their weight.

Loading thumbnail…

ICE 8 Family Tree d3.js

This example builds a family tree visualization using D3.js v5 and SVG. It maps a flat list of parent-child name pairs through `d3.stratify()` and `d3.tree()` into a hierarchical layout, drawing curved link paths between generations. Each person appears as a colored circle, with fill color determined by tree depth via a switch on `d.height`, and a text label beside each node. The tree spans 860 by 310 pixels, with light blue, salmon, and green shades distinguishing lineage levels.

Loading thumbnail…

Fork of Family tree using d3.js

This example visualizes a family tree as an SVG network of circles and labeled text nodes, with curved silver links connecting parents to children and node colors varying by tree depth. The graph is built from an explicit array of child–parent pairs, which is transformed into a hierarchy using D3’s `d3.stratify` and `d3.tree` APIs, then rendered with D3 5.9.2’s selection and `enter()` operations for circles, paths, and text labels.

Loading thumbnail…

Map

This visualization displays a map of India with state and district boundaries, using the Mercator projection. District polygons are filled with colors according to their parent state, while state borders are outlined in black. Hovering over a district changes its fill to red and reveals a tooltip with the district and state names. The code uses the `d3.geoPath` and `d3.geoMercator` APIs, with geographic data loaded from TopoJSON sources.

Loading thumbnail…

ICE-8 : World Map

A world map renders in a lightyellow SVG canvas using D3.js v5 and TopoJSON, displaying country boundaries as black filled paths with subtle white strokes over a skyblue sphere. The visualization applies the geoNaturalEarth1 projection to a Natural Earth dataset fetched from a GitHub gist, drawing the globe outline via d3.geoPath and country features through the topojson.feature API. The code demonstrates fundamental SVG path generation for geographic data, with no interactive elements.

Loading thumbnail…

Area Chart Data Visualization

This area chart visualizes total book sales over time, using a smoothed curve to show the top selling year. The visualization plots the data from a CSV file containing book sales figures, with the area under the line filled in light blue to emphasize the trend. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` APIs to generate the SVG paths, with `axisBottom` and `axisLeft` for the axes. The CSV data is loaded and parsed via the `csv` function from D3.

Loading thumbnail…

Line Chart- Data Visualization

This line chart shows the total book sales across published years for the top 10 book-selling countries. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded from a CSV file using `d3.csv`, with dates parsed via `d3.timeParse` and numeric sales values. The chart displays clear axis labels and grid lines, with the line path styled in aqua.

Loading thumbnail…

Pie Chart

This interactive pie chart visualizes the top 10 best-selling books, displaying the relative share of sales (in thousands) for each country. Built with D3 v5 and rendered as SVG, it uses the `pie` layout and `arc` generator to create the chart's segments. The visualization includes a custom legend and data labels, with colors mapped via `scaleOrdinal`. The data is fetched from a remote CSV file using D3's `csv` function, and the project imports specific modules like `select`, `arc`, and `format` to handle rendering.

Loading thumbnail…

Data Visualization- Pie Chart

This pie chart displays deaths due to COVID-19 across Oceania countries and regions, with each slice colored and paired with a legend listing country names and their death totals. The visualization uses d3.pie and d3.arc to generate the SVG segments, while d3.scaleOrdinal assigns a categorical color palette. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered with appendix legends and formatted tick values using d3.format.

Loading thumbnail…

Reusable Scatter Plot- ICE 7 (Data Visualization)

This interactive scatter plot visualizes the Iris dataset, using petal width and sepal length as axes while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through different column combinations every two seconds, animating the axes and points. Built with D3.js, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG axes, while a custom `scatterPlot` function manages the reusable chart configuration. The code loads CSV data asynchronously and renders colored circles with dynamic radius values based on sepal dimensions.

Loading thumbnail…

Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset by mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The SVG rendering uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale coordinates, and draw axes. Circles are created with `selectAll` and `join`. The code also references sepal measurements but visually applies them to the circle’s `rx` and `ry` attributes without visible effect. Data comes from a GitHub-hosted CSV file.

Loading thumbnail…

Untitled

This scatter plot visualizes the Iris dataset, encoding petal length and petal width as x and y coordinates, while coloring each point by species. The code also reads sepal length and width values into the `rx` and `ry` attributes of each circle, though these do not affect the visual rendering since `r` is set to a fixed radius. Built with React and D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes with custom labels.

Loading thumbnail…

ICE-6 Data Visualization-Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the x and y axes. Each circle is colored by species—setosa in light blue, versicolor in light pink, and virginica in yellow. The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. The data is loaded from a remote CSV and rendered as SVG circles with a fixed radius, displaying the relationship between the two floral measurements across species.

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family dwelling. The visualization uses d3.stack to layer usage data by account number for each monthly reading date, with green and blue colors distinguishing the accounts. Built with d3-scale-chromatic for color mapping and SVG rendering, the chart includes axis labels, a legend, and hover effects that adjust bar opacity with tooltip titles showing kilowatt-hour values. The data comes from a CSV dataset of electricity meter readings.

Loading thumbnail…

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

This example shows the best-selling books data as a horizontal bar chart, with each bar’s length encoding the population value from the 1890 column of a CSV file. The visualization uses React components to render SVG marks, while D3’s `scaleBand` and `scaleLinear` compute the positional scales, and `csv` loads the dataset. Grid lines and axis ticks are generated manually from the scales, with bars styled via CSS. The chart updates reactively as data loads, demonstrating integration of React’s state management with D3’s data utilities.

Loading thumbnail…

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

A horizontal bar chart displays population figures for ten countries, with bars ordered by descending value from China to Mexico. The visualization uses D3.js v7 with an SVG rendering approach, loading data from a CSV file via `d3.csv` and scaling populations by 1,000. Axes are generated through `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.scaleBand` position and size the bars. Bars appear in steel blue on a clean, margin-based layout.

Loading thumbnail…

Fork of 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 in 2019, sourced from a CSV file. The visualization renders the chart as an SVG, using React for component structure and state management, while D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling. The code draws axis ticks and labels directly, alongside the bars, within a single SVG `<g>` element.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart displays blue gridlines and bars of varying widths to represent each nation’s population. Built with React and D3, the code loads CSV data via `d3.csv`, uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and renders SVG rectangles and text elements directly through React components. Axis ticks are generated manually from the scales.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst visualization of CSS named colors, where each color from the dataset is rendered as a filled arc segment radiating from the center of an SVG canvas. The code loads CSV data using the `d3.csv` function and computes the arc paths with `d3.arc` and `d3.pie`, while React manages the component state and renders each `<path>` element. The dataset contains color names and their RGB hex values, which are used directly as the fill color for each segment. The visualization uses a fixed 960 by 500 pixel SVG and processes the data asynchronously with React’s `useEffect` hook.

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst chart displays the RGB hex values of CSS named colors as a pie of colored slices. The visualization loads data from a CSV file containing color names and their hex values, then renders each slice as a path in an SVG canvas. It uses D3’s `pie` and `arc` utilities to compute the slice geometry, while React manages the component state and rendering through `useState` and `useEffect`. The code integrates React 16 and D3 v5, drawing the chart via SVG elements within a React-rendered `<svg>` group.

Loading thumbnail…

Untitled

This example demonstrates loading and parsing a CSV file from a GitHub Gist URL using D3 v5’s `d3.csv`, then displaying the file size, row count, and column count in an HTML page. The visualization itself is a static SVG containing three simple geometric shapes—two triangles and an ellipse—each filled with a distinct color, which serves as the visual output accompanying the data summary. The page uses a React-ready framework structure, with minimal embedded CSS for text styling and a centered layout.

Loading thumbnail…

Fork of HTML Starter

This example renders a static SVG illustration of a landscape, featuring a blue rectangle, two green triangular trees, and an orange ellipse sun against a white background. The composition is defined entirely in SVG markup within the HTML file, using explicit path and shape elements, with CSS styling for the message text. It demonstrates a basic HTML page with embedded SVG, highlighting the use of raw SVG coordinates and styling without any JavaScript libraries or data processing.

Loading thumbnail…

Untitled

This example loads a CSV file from a GitHub Gist, reports its size in kilobytes, and displays the number of rows and columns in the parsed data. The page presents this information in a centered, light-blue text block above an inline SVG image. It uses the D3 v5 library’s `d3.csv` and `d3.csvFormat` functions to fetch and measure the dataset, and it manipulates the DOM via `document.getElementById` to update the display. Static HTML and a separate SVG file provide the visual layout.

Loading thumbnail…

ICE-5: CSS Loading and Parsing in VIZHUB

This example demonstrates VizHub’s support for modular JavaScript and external libraries. It imports the D3.js `select` function via UNPKG and a local ES6 module, `myMessage.js`, to display a message. The page fetches a CSV file from a GitHub gist, though the file’s content is not rendered. The `styles.css` file styles the message with large, centered text, showcasing CSS loading and parsing within the VizHub environment.

Loading thumbnail…

DataVisualizeICE4

This example shows a simple smiling face rendered as an orange SVG circle with a green stroke and two smaller circles for eyes, using React to define the component structure. The code leverages React’s JSX syntax and creates SVG elements with computed positions based on width, height, and offsets. It uses D3 version 7 from a CDN, though no D3 functions are explicitly called, and relies on ReactDOM to render the component into the page root. The visualization demonstrates basic SVG drawing within a React framework, with a fixed 800x400 canvas.