Tulluripallavi

@Tulluripallavi·30 public vizzes

Fork of ICE8 World Map

This visualization displays a world map using a natural Earth projection. The map renders country boundaries as paths, with a distinct sphere outline and yellow country fills. The code uses D3.js version 5.9.2, importing `geoNaturalEarth1` and `geoPath` for projection and drawing. Country data is loaded from a JSON file hosted on GitHub, with the TopoJSON library's `feature` function parsing the geometry. The SVG canvas is 960 by 500 pixels, and the visualization demonstrates basic path generation for geographical data.

Apr 4, 2022

Loading thumbnail…

Fork of Family Tree

This is a fork of a family tree visualization that displays a hierarchical dataset of names, starting with “Willam” as the root and branching into descendants. The tree is constructed using `d3.stratify()` to convert flat parent-child data into a hierarchy, then laid out with `d3.tree()`. Nodes are rendered as light green SVG circles with maroon borders, connected by animated paths that draw lines from parent to child. Text labels for each individual appear with a staggered transition, while the entire visualization is built with D3 v6 in a React-friendly HTML page on an SVG canvas.

Apr 4, 2022

Loading thumbnail…

Fork of Famil Tree

This fork of a family tree visualizes hierarchical parent-child relationships using a static dataset of names. The graph displays nodes as light green circles connected by maroon paths, with each node labeled by its corresponding family member's name. The visualization uses d3.stratify to structure the data, d3.tree to compute the layout, and transitions on both the connecting paths and node labels to animate the rendering. SVG elements are created and styled through standard d3 selections, with text labels appearing after a depth-based delay.

Apr 4, 2022

Loading thumbnail…

Fork of USA Country Map

This choropleth displays the United States with individual states rendered as orange filled polygons, separated by black boundary lines. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw state features and interior mesh from a TopoJSON file loaded with `d3.json` and processed via `topojson.feature` and `topojson.mesh`. React manages the SVG output, with state loaded asynchronously through a custom hook.

Apr 4, 2022

Loading thumbnail…

Fork of ICE8 network graph

This example shows a small force-directed network graph of seven countries, with links weighted by connection strength. The graph visualizes relationships between nations such as the US, Russia, India, and China, using red links and sky-blue circular nodes with text labels. Built with the D3 v4 force layout (`d3.layout.force`), it applies gravity, distance, and charge parameters to position nodes. The code loads node and link data from a JSON file and enables dragging, while styling is defined through CSS classes on SVG elements.

Apr 4, 2022

Loading thumbnail…

ICE8 World Map

This example displays a world map rendered in SVG using D3.js and TopoJSON. It shows country boundaries filled in yellow against a sky-blue spherical backdrop, created with `d3.geoNaturalEarth1` and `d3.geoPath`. The code fetches GeoJSON data from a GitHub gist, converts it via the `feature` method from TopoJSON, and appends each country path to the SVG. The map’s styling is controlled through CSS classes for the sphere and countries, with a maroon stroke applied to borders.

Apr 3, 2022

Loading thumbnail…

Fork of Fork area

This area chart displays the number of Android users over time, with a smooth curve filled in orange. The visualization uses D3 v6 APIs including `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.curveBasis` to render the SVG path. Data comes from a CSV file parsed with `d3.csv`, with dates converted via `d3.timeParse`. The chart includes labeled axes and a title, with grid lines extending across the plotting area.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of Fork of fork of ICE-7

This example shows a line chart of sales data over time, with a year-based x-axis and a numeric sales y-axis. Data is loaded from a CSV file and parsed using D3’s `csv` and `timeParse`. The chart uses `scaleTime` and `scaleLinear` for axes, `line` to generate the path, and `axisBottom` and `axisLeft` for ticks. Styled with purple tick labels, brown grid lines, and an orange stroke, the visualization is rendered as an SVG with D3 v5.

Mar 28, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and length while coloring data points by species (setosa, versicolor, virginica) using a custom marker function. The visualization cycles through four variable pairings every two seconds via `setInterval`, updating axes and circle positions. Built with D3 v6, it employs `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles dynamically. Overlaid text labels identify the current axes, while the reusable `scatterPlot` module handles margins, scales, and axis generation for each update.

Mar 28, 2022

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart visualizes the contribution percentages of different people to a song, using a dataset loaded from a GitHub gist CSV file. The chart displays ten colored slices, each paired with a legend listing the person’s name and their contribution value formatted with `d3.format`. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and legends, with each slice colored via a fixed array and rendered in an SVG container.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of ICE-7

This example displays a line chart of sales data over time, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to build the axes, while a `line` generator creates the orange stroke path. Data is loaded from a CSV file hosted on GitHub Gist, and the year values are parsed with `d3.timeParse` to format them as dates. The SVG rendering includes custom axis labels and styled tick marks.

Mar 27, 2022

Loading thumbnail…

Fork of ICE-7

This line chart shows sales data over time, with years on the x-axis and sales values on the y-axis, using orange strokes to highlight trends. It loads CSV data from a GitHub gist, parsing dates with `d3.timeParse` and rendering an SVG via D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions. Grid lines and axis labels are customized through CSS, while margins and tick padding adjust the layout.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Fork of fork of ICE-7

This visualization displays a line chart of the number of international students in the USA over time, using a green stroke to emphasize the trend. The code relies on D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart within an SVG. Data is loaded from a CSV file using `d3.csv`, with years parsed via `d3.timeParse`. Axis labels are added manually, and grid lines are created with tick sizes extending across the plot area.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of fork of ICE-7

This example shows a line chart of the number of international students in the USA over time, with purple tick labels and a bold green stroke. The visualization uses the D3 v5 library, importing functions such as `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to build the SVG rendering. It loads a CSV dataset from a GitHub Gist, parses the year column using `d3.timeParse`, and formats axes with custom styling defined in an external stylesheet. The chart includes labeled axes and a grid-like background created by tick lines.

Mar 27, 2022

Loading thumbnail…

Fork of fork of ICE-7

This visualization shows a line chart tracking the number of international students in the USA over time, with years on the x-axis and student counts on the y-axis. The chart uses d3.scaleTime and d3.scaleLinear for scaling, with d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded from a remote CSV file and parsed using d3.csv and d3.timeParse. The line is drawn using a d3.line generator, styled with a green stroke, and rendered as SVG within a fixed-width viewport.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable Scatter plot

This animated scatter plot cycles through different Iris dataset attributes, mapping petal width, sepal width, petal length, and sepal length onto the x-axis while the y-axis displays sepal length. Each species is color-coded green, blue, or red. Built with D3.js, it uses `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function, rendering SVG circles and updating axes every two seconds via `setInterval`.

Mar 27, 2022

Loading thumbnail…

Fork of ICE6 - Iris DataSet for the scatter plot

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in green, versicolor in red, and virginica in orange). The visualization also encodes sepal length and width as the `rx` and `ry` properties of the circles, though these do not affect the visible rendering since the radius is fixed. The code uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft`/`axisBottom` for axes, rendered as SVG with a React-style declarative join operation.

Mar 6, 2022

Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

A bar chart displaying the number of users for various OTT platforms, ranked by population count. The chart uses React to manage component state and D3.js (v5) for data loading and scale generation. Data is fetched from a CSV file using `d3.csv`, with horizontal bars rendered as SVG rectangles scaled by `d3.scaleLinear`. The visualization includes gridlines and labels generated through D3's tick methods.

Mar 6, 2022

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot of the Iris dataset maps petal length and width for three species, using light blue, light pink, and yellow to distinguish setosa, versicolor, and virginica. Built with D3 v6 in React, it loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders circles as SVG elements. The code also includes axis labels and uses `extent` for domain calculation, with a fixed radius of five pixels per point.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

This horizontal bar chart visualizes the number of users of OTT platforms, sourced from a CSV file. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. React manages the data state and updates the visualization. The chart displays the first 12 rows of data, with axis ticks and labels generated via D3's axis functions.

Mar 6, 2022

Loading thumbnail…

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

A bar chart displays the top 11 bestselling books by population, using D3 scales to map book names on the y-axis and population values on the x-axis. The React component loads CSV data via `d3.csv`, renders SVG rectangles for each bar, and draws axes with `scaleBand`, `scaleLinear`, and custom tick marks. Styling applies steelblue fills to the rects.

Mar 6, 2022

Loading thumbnail…

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

A bar chart displays population data for the top 11 bestselling books, with each bar’s length encoded by population size and its position on the y-axis by book title. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG `rect` marks. Data is loaded from a CSV file via `d3.csv`, while axes and gridlines are generated manually using `xScale.ticks()` and text elements.

Mar 6, 2022

Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3

A horizontal bar chart displays the 1890 population of eleven countries according to their bookselling categories, sourced from a CSV file loaded with `d3.csv`. The React component uses `useState` and `useEffect` to fetch and parse the data, then renders an SVG with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Grid lines, axis ticks, and rectangles are generated manually using D3 selection methods and React’s JSX syntax, with bars styled via CSS in a separate file.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3

This visualization displays information about book sales, presenting a horizontal bar chart that compares the population values for different book categories. The chart uses React with a functional component and the `useState` and `useEffect` hooks to load and process data from a CSV file. D3 v5 functions such as `csv`, `scaleBand`, `scaleLinear`, and `max` are used to parse the data, create the scales, and render the SVG elements, with rectangle widths encoding the data values.

Mar 6, 2022

Loading thumbnail…

Fork for ICE6- Scatter Plot with Iris DataSet

This visualization uses the Iris dataset to plot petal length and width on the x and y axes, with each point colored by species (setosa, versicolor, or virginica). The circle radii and positions are augmented by the sepal dimensions, though the code assigns both a fixed radius and rx/ry attributes. Built with React and D3 v6, it loads CSV data via `d3.csv`, scales with `d3.scaleLinear`, and renders axes using `d3.axisLeft` and `d3.axisBottom` into an SVG. The scene fills the window with responsive dimensions.

Mar 6, 2022

Loading thumbnail…

Fork of Fork of ICE5_11519492: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the data’s size, row count, and column count in a styled HTML page. The code uses `d3.csv` to fetch the dataset from a GitHub gist and `d3.csvFormat` to calculate its length. A static SVG cityscape is also embedded directly in the markup, alongside custom CSS styling for the text output.

Feb 28, 2022

Loading thumbnail…

Fork of ICE5_11519492: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, presenting the results in a styled HTML page. The visualization shows a summary of the parsed dataset, including its size in kilobytes, number of rows, and column count, displayed within a large text element. The code fetches data from a remote CSV file using the `d3.csv()` method, then processes it with `d3.csvFormat()` to calculate the data size. The page also displays an SVG image and uses CSS for styling headings and the message container. The rendering is done through standard HTML elements rather than a custom SVG visualization.

Feb 28, 2022

Loading thumbnail…

ICE4 Fork of Data_Visualization_YellowFace_PY

This example shows a static smiley face built from SVG shapes: an orange outlined circle for the head, two dark circles for eyes, and a curved mouth path. The visualization uses D3 v7 to select the SVG container and append a group element, while the mouth is generated with the `d3.arc` generator using predefined radius and angle values. The layout is hard-coded with pixel coordinates and the face remains fixed, with no interactivity or animation.

Feb 20, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example shows a yellow emoji-style face with two eyes and a curved mouth, rendered as a centered SVG graphic. It uses React to define the SVG elements and D3’s `arc` generator to create the mouth path. The face is composed of basic circles and a path, with the group element translated to the center of the viewport. The code demonstrates importing D3 functions like `arc` for shape generation while leveraging React’s JSX for layout.

Feb 20, 2022

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

Built with D3 v7, this visualization presents a simple yellow smiley face drawn as SVG shapes on a 960×500 canvas. The face consists of three filled circles for the head and eyes, plus a black-stroked mouth path generated using the `arc()` generator. The mouth arc is positioned with inner and outer radii and angled from π/2 to π, creating a half-smile. The code selects the SVG element with `d3.select` and appends a group with a translation transform to position the mouth. No dynamic data or interactions are included; it is a static geometric composition demonstrating fundamental D3 shape generation.

Feb 20, 2022