S

SanjayRamaSwamyAdla@my.unt.edu

@Sanju-02·19 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a hierarchical tree visualization of vehicle categories—Land, Air, and Water—with their subcategories as leaf nodes. The code uses d3.hierarchy and d3.tree to compute the layout, then renders the structure as SVG circles and connecting lines, with colors indicating depth (red for root, green for categories, blue for leaves). Labels are added as SVG text elements, while React wraps the D3 logic in a useEffect hook. The accompanying React component in index.jsx only sets static text, demonstrating a minimal React-D3 integration pattern.

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays a static tree diagram of vehicle categories, showing the hierarchical relationships between land, air, and water vehicles. The layout uses D3’s `d3.hierarchy` and `d3.tree` APIs to position nodes in a branching structure (svg.attr-encoded). Nodes are rendered as circles (`circle`), colored by depth (red for root, green for categories, blue for leaves), with connecting lines and text labels. The code is embedded in an HTML file using D3 v7’s `.select()`, `.enter()`, and `.append()` methods, while the accompanying `index.jsx` uses React to render a simple text message, though the diagram itself relies on the SVG API.

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

A React and D3.js starter renders a static world map using SVG. The map draws country boundaries from the World Atlas TopoJSON dataset, projected with `d3.geoNaturalEarth1` and converted to SVG paths via `d3.geoPath`. Countries appear as light blue shapes with black strokes. A separate React component, created with `createRoot` and `useRef`, displays a "Hello D3 & React" message, demonstrating integration between the two frameworks.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This interactive network graph displays six major US cities as nodes and their connections as links, arranged through a physics-based force simulation. Built with D3.js v7 and a simple HTML script, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes. Users can drag individual nodes, which updates the simulation and redraws the SVG links and labels in real time.

Loading thumbnail…

Fork of React & D3 Starter

This example renders a static world map using SVG paths. It displays country boundaries from the World Atlas TopoJSON dataset, filling each country with a light blue color and black strokes. The visualization uses D3.js v7’s `geoNaturalEarth1` projection and `geoPath` to convert the geographical data into scalable vector graphics. A separate React component, created with `createRoot`, simply writes the text “Hello D3 & React” to a designated div, demonstrating a minimal integration of the two libraries.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus exam scores, using a compact D3 v7 script embedded in an HTML page. It displays seven data points as steelblue circles on an SVG canvas, with linear scales mapping hours to x-positions and scores to y-positions, plus labeled axes. The code defines a `scatterPlot` function that appends an SVG, computes scales via `d3.scaleLinear`, draws axes with `d3.axisBottom` and `d3.axisLeft`, and binds data using `selectAll().data().enter()`. The repository also includes a separate React component (index.jsx) that uses `useRef` and `useEffect` to integrate D3 selections, though the plot itself runs standalone.

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example shows an area chart of values over time, using a small inline dataset of five ordered day-value pairs. Rendered as an SVG, the chart fills the space beneath a line that connects the data points, which are scaled along linear x and y axes. The code creates the visualization using D3 v7 API calls like `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.max`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`. It includes labeled axes for "Days" and "Values" and uses a light blue fill to represent the area under the curve.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows the distribution of four school subjects—Math, Science, English, and History—as a static pie chart rendered in SVG. It uses d3.pie and d3.arc to compute slice geometry and d3.scaleOrdinal with d3.schemeCategory10 to assign categorical colors. Labels are positioned at each slice’s centroid, and a custom legend is built with HTML spans in a separate div. The accompanying React component uses a useEffect hook to update text via d3.select, demonstrating a minimal integration of React with D3.

Loading thumbnail…

Fork of React & D3 Starter

This example renders a static line chart of daily values using React and D3.js v7. It shows a line path, x- and y-axes, and axis labels, with data from a hardcoded array of five day-value pairs. The visualization is drawn as an SVG using D3’s scaleLinear, extent, line generator, and axisBottom/axisLeft methods. The React component uses a useRef and useEffect to integrate D3 selection and rendering into the DOM.

Loading thumbnail…

Fork of D3 Starter

This example shows the relationship between height and weight for ten individuals using a scatterplot, with each circle positioned by two linear scales mapping height to the x-axis and weight to the y-axis. The chart includes labeled axes for height in centimeters and weight in kilograms, as well as a title, all rendered as SVG elements. The code uses D3 v7 functions such as `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization, with hardcoded data defined in an array. The SVG canvas is set to fixed dimensions with margins for the axes and labels.

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3” prominently in the center of the page, serving as a minimal starter template for D3 projects. The page loads D3 v7 via an import map and uses the `select` function from the `d3` module to target the `body` element, then applies the `.text()` method to set its content. The styling sets a large font size and top margin to center the output visually.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal integration of React and D3, displaying the text "Hello D3 & React" in a large, centered message. It uses a React `useRef` hook to get a reference to a div, and a `useEffect` hook to call `d3.select` on that reference to set the text content. The app is rendered using React's `createRoot` from `react-dom/client`, with D3 v7 and React 19 imported via an import map.

Loading thumbnail…

Fork of Circles with D3

This example uses D3 v7 to render a static composition of seven translucent circles on a fixed, full-window SVG canvas with a pale green background. The circles have varying radii and positions, each assigned a distinct bright fill color at 70% opacity. The code builds the visualization by binding an array of hardcoded circle properties—x, y, radius, and fill—to SVG circle elements, using D3’s `select`, `data`, and `join` methods. The canvas size adapts to the container’s client dimensions, and the styling comes from inline attributes rather than external data sources.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML starter template with a simple message displaying “Hello HTML!” in large, centered text. It includes a basic CSS rule that styles the message with a font size of 12em and centered alignment. The JavaScript file logs “hello world” to the console, though no interactive behavior is shown. The code uses standard browser APIs and plain HTML/CSS/JavaScript without any external libraries or visualization frameworks.

Loading thumbnail…

Fork of D3 Starter

This bar chart displays the test scores of ten students, labeled A through J, with each score plotted on a scale from zero to one hundred. The visualization directly compares individual performance, showing that student E has the highest score at 95, while student C has the lowest at 66. The chart uses SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as SVG `rect` elements, and the chart includes labeled axes generated by `d3.axisBottom` and `d3.axisLeft`, along with a title. The data is hardcoded in the script.

Loading thumbnail…

Fork of HTML Starter

This example summarizes a vehicle intrusion dataset loaded from a remote CSV file. It displays file size, row count, and column count in a header card, alongside a small static SVG containing a rectangle, circle, and line. Below, a preview table shows the first eight rows using D3 v7's `d3.csv` method. The page uses HTML, CSS, and JavaScript to fetch the data and render the summary and table.

Loading thumbnail…

Fork of D3 Starter

This visualization summarizes a Vehicle Intrusion Dataset by displaying file size, row count, and column count as text statistics alongside a static SVG containing a rectangle, circle, and line. The page provides a preview of the first eight rows in an HTML table built from the parsed CSV data. The code uses D3 v7’s `csvParse` method to parse the remote CSV file and accesses the resulting data’s `length`, `columns`, and row objects to populate the dashboard, with fetch handling the network request.

Loading thumbnail…

Fork of Fork of D3 Starter

This example summarizes a vehicle intrusion dataset by displaying key statistics—file size, row count, and column count—alongside a preview table of the first eight records. The visualization uses D3.js version 7 to fetch and parse the CSV data via `d3.csvParse`, while static SVG shapes (a rectangle, circle, and line) are rendered with CSS-styled fills. The page presents these elements within a card-based layout, providing a straightforward overview of the dataset's structure and scale.