H

Harshinireddyy19

@Harshinireddyy19·38 public vizzes

Loading thumbnail…

3D Bar Chart

This example displays the top 10 countries most affected by COVID-19 as a 3D bar chart using the d3-x3d library, which bridges D3.js with X3D for WebGL rendering. The bars are generated from a CSV dataset containing case counts per country, loaded asynchronously via d3.csv. The chart uses d3.x3d.chart.barChartMultiSeries to create the three-dimensional visualization, with the axis and layout handled by the x3dom framework. The page includes custom CSS for styling the title and center alignment.

Loading thumbnail…

3D Scatter Plot

This example uses a Plotly 3D scatter plot to visualize the relationship among Height, Weight, and Body Fat from a Body Mass Index dataset. The code loads CSV data with D3 and maps the columns to the x, y, and z axes, rendering individual points as colored markers. The layout defines custom axis titles and fonts while margins are minimized, and the final chart is drawn into a div using `Plotly.newPlot`.

Loading thumbnail…

ICE 8 - Family Tree

This example shows a family tree for the University of North Texas, mapping academic programs (Computer Science, Information Systems, Analytics, MBA) to individual students. The tree uses color-coded nodes to distinguish generations, with black for the root, green for depth 1, and blue for depth 2. It renders as an SVG using the d3.stratify and d3.tree APIs, with cubic Bézier curve paths connecting parent and child nodes, and text labels offset slightly to the right of each circle.

Loading thumbnail…

ICE-8 Social Network graph

This visualization displays a social network with nine people as nodes and eight weighted connections as links, rendered as an SVG using D3.js. It shows relationships between individuals, where line thickness corresponds to link weight. The graph uses the D3 v4 `d3.layout.force` API for physics-based layout with gravity, charge, and distance parameters, allowing nodes to be click-dragged. Node positions update during the force simulation’s tick events, while labels and styled circles mark each person. Data comes from an embedded graph.json file containing names, group assignments, and connection weights.

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset. The graph displays hierarchical relationships between individuals, with each node representing a person and connecting lines showing parent-child links. Users can click on nodes to expand or collapse their subtree, dynamically revealing or hiding descendants. The visualization uses the D3.js layout tree algorithm to position nodes and SVG paths for connections, with CSS-driven animations smoothly transitioning nodes between states. The code leverages D3's select, transition, and append APIs to manage the animated updates triggered by user interactions.

Loading thumbnail…

Family Tree ICE-8

This example shows a family tree visualization using D3 v5, rendered as SVG in a React framework. The tree layout is created with `d3.stratify` and `d3.tree`, positioning nodes by depth and computing curved paths for parent-child links. Circle markers for each person are colored by hierarchical depth—red, blue, green, or yellow—and text labels display names beside the nodes. The data consists of a hardcoded array of child-parent relationships, and the visualization maps these into a clear, color-coded ancestry chart.

Loading thumbnail…

ICE-8 INDIA

This visualization displays an SVG map of India with all states colored using D3’s `scaleOrdinal` and `schemeCategory10`, and labels each state name at its centroid via `d3.geoPath().centroid`. It loads TopoJSON state boundaries from a remote GitHub source, projecting them with `geoMercator`. State paths receive black strokes from CSS, while hover titles show names using appended `title` elements. The code uses `topojson.feature`, `d3.json`, and `d3.selectAll` to render the choropleth-style static map.

Loading thumbnail…

World Map-ICE8

A choropleth-style world map displays countries as light red filled regions with white strokes against a light blue sphere. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render geographic outlines, reading GeoJSON TopoJSON data from a GitHub gist. The `topojson` library’s `feature` function extracts country boundaries, which are then drawn as SVG paths within a 960×500 viewport.

Loading thumbnail…

3D Bar Chart

This 3D bar chart visualizes the top 10 countries most affected by a virus, comparing case counts through extruded rectangular bars. The visualization uses the d3-x3d library to render three-dimensional graphics in the browser via X3DOM, while D3 v5 handles data loading and parsing from a CSV file. The chart displays each country on the x-axis with bar height representing the number of cases, styled with a pink heading and light blue background from the accompanying CSS.

Loading thumbnail…

Population Scatter Plot

This scatter plot displays the population of each U.S. state along the horizontal axis, with state names on the vertical axis. Built with D3 v5, it uses `scaleLinear` for the population scale and `scalePoint` for the categorical state axis, rendering circles via SVG. Data is loaded from a CSV file using D3’s `csv` method, with axes created by `axisBottom` and `axisLeft`. Tick labels are formatted using `format` to abbreviate large numbers with "B" for billions, and the chart includes a title and axis label.

Loading thumbnail…

Temperature in TEXAS Area Chart

This area chart visualizes temperature readings over time in Texas, using a smooth, filled curve to highlight the overall trend. The chart employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and SVG rendering via `axisBottom` and `axisLeft`. Data is loaded from a CSV file and parsed into `Date` and numeric values, with a light green fill emphasizing the area beneath the temperature line.

Loading thumbnail…

ICE-7 LINE CHART

This line chart shows US automobile sales from 2005 to 2022, with year on the x-axis and sales volume on the y-axis. The data is loaded from a CSV file using d3.csv, then parsed with Date and numeric conversions. The visualization uses d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for ticks. A d3.line generator creates the green path, and the SVG rendering includes axis labels and a title. The code also applies margins and uses d3.extent and d3.max for domain calculations.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the count of students from each major at UNT, displaying each segment’s value in thousands both inside the chart and in a legend. It loads CSV data from a GitHub gist using `d3.csv`, then processes it with `pie` and `arc` generators to create SVG paths. The chart applies `scaleOrdinal` for color mapping and uses `arc.centroid` to position labels, with a legend built from grouped `rect` and `text` elements.

Loading thumbnail…

ICE - 7 Pie_Chart

This pie chart visualizes the number of students in each major at the University of North Texas, using a dataset fetched from a CSV file. It displays the data as colored slices with proportional labels, alongside a legend that maps colors to major names and student counts. The visualization is built with D3 v5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart and assign colors. The chart is rendered as an SVG, with the pie centered and legends positioned to the right for clarity.

Loading thumbnail…

Fork of Academic Publication Influence on University Ranking

This scatter plot shows the relationship between academic publication influence and university ranking, with bubble size encoding the number of alumni employed. The visualization uses the vega-lite-api to construct the chart, which is rendered with d3.v5 and vega-lite. Data comes from a CSV file containing World University Ranking information, loaded asynchronously via d3.csv. The chart is styled with a custom configuration for axis and label appearance, and supports interactive tooltips through the vega-tooltip handler.

Loading thumbnail…

Doping In Cycling, ICE-7

This scatter plot visualizes doping in professional bicycle racing, showing each rider’s finish time against the race year, with circles colored by whether doping allegations exist. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `schemeCategory10` for color encoding, and a custom tooltip on mouseover. Data comes from a CSV loaded via `d3.csv`, with times parsed into date objects using `d3.timeFormat`. Axis ticks include gridlines, and a legend distinguishes allegations from clean riders.

Loading thumbnail…

ICE-7 Scatter Plot

This scatter plot tracks the daily confirmed virus count over time, with each point representing a single day’s reported cases, revealing a sharp rise and fall during the early months of 2020. The visualization uses an SVG canvas, with D3 v5’s `scaleTime` mapping dates to the x-axis and `scaleLinear` mapping counts to the y-axis. Gridlines and axis labels are drawn via `axisLeft` and `axisBottom`, while circles positioned by `xScale` and `yScale` display the data, with a maroon fill at half opacity for visual clarity. The data is loaded from a CSV file, and the chart includes a title and axis labels for context.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays the sales of cars in India from 2009 to 2019. The visualization combines a black line with a smoothed curve for the trend and an orange area fill below it, using a time-scaled x-axis and a linear y-axis. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and the `line` and `area` generators with `curveBasis`. The data is loaded from a CSV file, with the year parsed via `d3.timeParse`.

Loading thumbnail…

ICE-6 Scatter Plot for iris dataset

This scatter plot visualizes the iris dataset, mapping petal length and width as x/y coordinates while encoding species with color (pink, orange, red). Separately, sepal length and width are applied as non-visual attributes to each circle. The D3.js v6 code loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders axes via `axisLeft` and `axisBottom`. The SVG output uses dynamic circle joins to display points across the browser canvas.

Loading thumbnail…

Years and Experience Barchart

This bar chart displays the relationship between years of experience and salary, with each bar’s height corresponding to salary and its horizontal position to experience. Rendered as an SVG using D3 v7, the visualization encodes salary values on a linear scale and experience categories on a band scale. The code demonstrates `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, pulling data from a Salaries CSV hosted on GitHub. Dollar-formatted y-axis ticks and custom axis labels are included via `tickFormat`.

Loading thumbnail…

Barchart

This example presents a minimal bar chart built with React, though the rendered output is currently a placeholder greeting rather than actual data visualization. The code uses standard HTML and CSS for page structure and styling, while the React framework is imported to manage components. The static page displays a large, centered text message, with no chart elements or data binding implemented yet, making it a starting point for future development.

Loading thumbnail…

ICE-6 : Rendering Marks and Channels with react and D3

This example displays a bar chart of student scores from a CSV file, using React to manage state and D3 to render SVG marks. The horizontal bars encode each student's amount through length, with categorical names on the y-axis and a linear scale for values on the x-axis. The code uses `d3.csv`, `scaleBand`, and `scaleLinear`, along with `axisLeft` and `axisBottom` for ticks. React’s `useState` and `useEffect` load and transform the data, while `ReactDOM.render` mounts the visualization.

Loading thumbnail…

ICE-6 : Rendering Marks and Channels with react and D3

This example renders a bar chart of student marks using React and D3 v5. It uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with React’s `useState` for data management. The visualization maps each student’s total marks to bar height, using color as an additional channel to distinguish data categories. The code creates SVG elements dynamically through React’s rendering system while leveraging D3’s scale functions for layout and positioning.

Loading thumbnail…

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

This example shows a web page for finding grades, displaying a decorative image and a text summary of a CSV dataset. It uses D3.js v7 to load a remote CSV file with `d3.csv`, then computes and displays statistics about the data, including its size in kilobytes, row count, and column count, within an HTML `<pre>` element. The page styling uses CSS for layout and colors, with the data sourced from a GitHub Gist URL.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A fork of "Let's make a face with D3.js!" draws a smiley face with ears, eyes, eyebrows, a nose, whiskers, and a mouth using SVG shapes. The eyebrows animate upward and then back down via chained `transition` calls over two seconds each. The code uses d3-select, d3-arc for the mouth path, and SVG circle, rect, and path elements. A green background is applied to the page body.

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simplified smiley face constructed from three SVG circles: a large yellow head with a black stroke, and two smaller black circles for eyes. The SVG canvas is 960 by 500 pixels, with the head centered and the eyes offset horizontally. The code uses inline SVG elements and CSS to hide the page scrollbars, rendering the face directly in the browser without any JavaScript libraries or data sources.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face rendered as a responsive SVG fills the entire browser window. The face uses yellow circles for the head and eyes, with a black stroke for the outline, drawn via React elements inside an SVG container. The code calculates dimensions from `window.innerWidth` and `window.innerHeight`, and uses ReactDOM to render the component to the DOM. No smile or mouth is implemented in this version.

Loading thumbnail…

Smiley face with d3.js!!

This example shows a stylized smiley face built from basic SVG shapes—circles for the head and eyes, a line for an eyebrow, and an arc for the mouth—all rendered inside a React component. The face is centered using a `<g>` transform, with sizes and positions derived from computed constants like `eyeOffsetX` and `mouthRadius`. It uses React 16.9 with ReactDOM to mount the SVG, while the mouth arc is generated with D3’s `arc()` function, specifying inner and outer radii plus start and end angles. The code also includes an ellipse and an extra line that are not visually connected to the main composition.

Loading thumbnail…

Fork of homework smiley face

This fork of a homework assignment renders a stylized smiley face as an SVG, centered on a 960 by 500 canvas. The face features a large white head with a black stroke, green irises with purple pupils, black eyelashes, and a semi-circular mouth created with a D3 arc path. The visualization is built using React and D3 v7, with all shapes drawn using SVG primitives like circles, lines, and ellipses, and the mouth’s arc is computed using the `d3.arc` API. The code defines all coordinates and dimensions as constants, demonstrating a straightforward, fixed-composition rendering approach.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and SVG. The face is centered with circle elements for the head and eyes, while a d3.arc path creates the mouth, all positioned relative to the window dimensions. The code uses ReactDOM to mount the component, with styling applied via SVG attributes like fill and stroke-width.

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face rendered as a responsive SVG fills the entire browser window. The face uses yellow circles for the head and eyes, with a black stroke for the outline, drawn via React elements inside an SVG container. The code calculates dimensions from `window.innerWidth` and `window.innerHeight`, and uses ReactDOM to render the component to the DOM. No smile or mouth is implemented in this version.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simplified smiley face constructed from three SVG circles: a large yellow head with a black stroke, and two smaller black circles for eyes. The SVG canvas is 960 by 500 pixels, with the head centered and the eyes offset horizontally. The code uses inline SVG elements and CSS to hide the page scrollbars, rendering the face directly in the browser without any JavaScript libraries or data sources.

Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This example shows a panda face constructed from basic geometric shapes, using D3’s `arc` generator to create the eyes, nose, mouth, and ears, and SVG primitives like `circle` and `ellipse` for the face, eye sockets, and blush. The drawing is rendered as an SVG canvas inside a React component, with the D3 arcs positioned via `transform` rotations and translations. The code imports React, ReactDOM, and the `arc` function from D3 v6, and computes each shape’s path with `d3.arc()` before assigning the resulting `d` attribute to SVG `path` elements.

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

This React-based visualization displays a cheerful smiley face constructed from layered SVG shapes, combining a yellow circular head with two large stylized eyes and a detailed multi-tone mouth. The eyes use ellipses, paths, and circles with varied gradients and colors to create depth, while the smile incorporates multiple overlapping paths and fills. The rendering approach uses React components (`Eyes` and `Smile`) that return SVG elements, assembled in the main `App` component with transforms for positioning and scaling. The code relies on ReactDOM to mount the SVG to the DOM, with CSS classes defining fill colors and gradient references for each shape.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A smiley face rendered in React and SVG combines a yellow circular face with a large, stylized mouth and detailed eyes. The facial features are composed of numerous overlapping paths and ellipses, each assigned specific fill colors through CSS classes to create a multi-tone, illustrated effect. The React application positions these components using SVG `<g>` elements with transformations, scaling and rotating the `Eyes` and `Smile` components onto the central face. This example demonstrates the creation of a complex vector illustration through React's component model without external charting libraries.

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a smiley face with two detailed, multi-layered eyes and a wide, cartoonish smile. The SVG graphic places a yellow circle as the head, with the eyes and mouth positioned via separate React components and `<g>` transforms. The visualization uses React and ReactDOM to compose the SVG elements, with each component, such as `Eyes` and `Smile`, defining its own shapes and classes styled through an external CSS file.