nikhitha693

@nikhitha693·23 public vizzes

Fork of Fork of ICE8 network graph

This example shows a force-directed network graph of seven named U.S. cities, with links of varying thickness representing weighted connections. The visualization uses d3.layout.force to simulate node positions, with nodes rendered as SVG circles and text labels. Links are drawn as lines with stroke widths scaled by the square root of each link’s weight attribute. The code loads graph data from a local JSON file and enables dragging of nodes to explore the network structure.

Apr 4, 2022

Loading thumbnail…

Fork of Network Graph

This example shows a small force-directed network graph of entities related to a murder case, with seven labeled nodes (such as "Murder," "Victim 1," and "Suspect 1") connected by weighted links. It uses D3 v4’s `d3.layout.force` to position the nodes, with a gravity of 0.05 and charge of -100, while the SVG rendering draws circles and text labels. Link stroke width encodes the weight field from the JSON data, and nodes are draggable via `force.drag`. The graph loads its structure from `graphFile.json`.

Apr 4, 2022

Loading thumbnail…

Fork of Family Tree ICE-8

This interactive family tree visualizes hierarchical relationships through a branching structure of circles and connecting paths. The visualization uses D3.js v6, with `d3.stratify()` to process hierarchical data and `d3.tree()` for layout. Nodes are rendered as SVG circles with animated path connections that draw over time, while text labels appear sequentially with a delay based on tree depth. The dataset contains fictional names representing parent-child relationships, and CSS styling applies light blue circles with red borders against a white background.

Apr 4, 2022

Loading thumbnail…

Fork of Family Tree ICE-8

This example presents a family tree using a static, circular node-link diagram rendered with SVG and animation. Nodes are styled as green circles with maroon strokes, and parent-child connections are drawn as animated maroon paths. The visualization is built with D3 v6, using the `stratify` and `tree` APIs to structure the data, and CSS for styling. Text labels appear within each node, while the animation reveals the tree gradually, with link drawing and node appearance timed via `transition`. The diagram centers its layout on a blank page, with the root label "nik" at the top.

Apr 4, 2022

Loading thumbnail…

Fork of Family Tree for ICE-8

This example shows a family tree where each person is a labeled circle, with parent-child connections drawn as straight black lines. The root node sits at the top, followed by a generation of blood group categories and then a deeper layer of named individuals. The circles animate their radius, growing to their final size, while the links also animate into place over a short transition. The visualization uses D3.js v6, specifically `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute the layout. SVG elements render the circles, paths, and text labels, with color-coded fills based on the node’s depth.

Apr 4, 2022

Loading thumbnail…

Fork of USA Country Map of ICE-8

This visualization displays a choropleth-style map of the United States, with each state filled in red and state borders highlighted in blue. The map renders as an SVG using React and D3’s `geoPath` with the `geoAlbersUsaTerritories` projection, which includes U.S. territories. TopoJSON data from a GitHub gist is processed via `feature` and `mesh` to generate land polygons and interior boundaries. The visualization demonstrates a straightforward mapping of geographic data without interactive features.

Apr 4, 2022

Loading thumbnail…

Fork of World Map ICE-8

This example displays a world map using an equirectangular projection, with countries rendered as white paths with green strokes on a teal sphere. It loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with `topojson.feature` and projecting it via `d3.geoEquirectangular` and `d3.geoPath`. The map supports hover interactions, highlighting countries in green when the mouse passes over them.

Apr 3, 2022

Loading thumbnail…

Piechart ICE - 7

This pie chart visualizes the number of vehicles seized across different U.S. states, using a CSV dataset fetched from GitHub. Each state is represented by a colored segment with its value labeled in thousands, alongside a legend showing state names and corresponding quantities. The visualization employs D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` to generate SVG paths, with text labels positioned using `arc.centroid`.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Scatter Plot with Iris DataSet

This example displays two overlapping scatter plots of the Iris dataset, using petal length and width on the axes while also encoding sepal length and width as non-standard `rx` and `ry` attributes on each circle. The visualization renders as an SVG using D3 v6, with data loaded via `d3.csv` and scales from `d3.scaleLinear`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while species are color-coded through a custom marker function.

Mar 27, 2022

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This fork of a scatter plot visualizes the Iris dataset, mapping petal length and petal width as x and y coordinates while coloring each circle by species (setosa, versicolor, or virginica). Rendered as SVG with D3.js v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build axes and scales. Although the code loads all four numeric attributes, the visible plot only uses petal dimensions, with sepal values unused in positioning. Circles are drawn via `selectAll` and `join`, with species-based color assignments defined in a helper function.

Mar 27, 2022

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart shows the total number of vehicles seized each year from 2000 to 2009, with a black line and filled area emphasizing the trend over time. The visualization uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft with gridlines. The line and area paths are generated using d3.line and d3.area with curveBasis smoothing, and rendered as SVG elements inside a centered 930x450 viewport.

Mar 27, 2022

Loading thumbnail…

ICE 7 question 3-Line chart

This line chart displays the total number of vehicles seized annually from 2000 to 2009, with the year on the x-axis and the seizure count on the y-axis. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator to draw the path. Data is loaded from a remote CSV via `d3.csv`, with dates parsed using `d3.timeParse`. The SVG rendering includes gridlines and axis labels, styled through CSS.

Mar 27, 2022

Loading thumbnail…

Fork of pie chart of vehicles seized in different states of USA

This pie chart visualizes the number of vehicles seized across different U.S. states, with each slice labeled with its value in thousands and accompanied by a color-coded legend. The data is loaded from a CSV file and rendered using the d3.pie, d3.arc, and d3.scaleOrdinal APIs within a D3 v5 SVG canvas. Slice values are formatted using d3.format, and text labels are positioned using the arc generator's centroid method.

Mar 27, 2022

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length and width to circle positions while coloring points by species (setosa, versicolor, virginica) using hardcoded red, blue, and green markers. The SVG rendering relies on D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()`. Data is loaded as CSV from a GitHub gist, with numeric parsing for all four flower measurements. The chart uses a full-window responsive layout, and the code also passes sepal dimensions as unused `rx` and `ry` attributes.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris Dataset, using a scatter plot to emphasize clustering by Petal Length and Sepal Length across iris species. Each circle represents an individual flower, with color encoding species. The visualization is rendered as an SVG using D3 v5, employing `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for ticks. A color legend is added via the `d3-legend` library’s `legendColor` function. Data is loaded as CSV and parsed with a custom row function.

Mar 24, 2022

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal length for individual iris flowers, with color encoding species. The visualization uses D3 v5 and the d3-legend library to construct the SVG rendering, including axes, tick marks, and a color legend. Data is loaded from a CSV file via `d3.csv`, and scales are computed dynamically using `d3.scaleLinear` for positioning and `d3.scaleOrdinal` with `d3.schemeCategory10` for species colors.

Mar 24, 2022

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

Mar 24, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairs on the x-axis every two seconds. Built with D3.js, it uses a reusable scatter plot component that maps data dimensions to SVG circles, with linear scales and axes. The animation demonstrates how changing the x-axis mapping reveals different relationships between sepal and petal measurements across the three iris species.

Mar 24, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each of the 150 flowers appears as a circle with a fixed radius of 5 pixels. The code uses d3.csv to load the data, d3.scaleLinear and d3.extent to set the scales, and d3.axisLeft and d3.axisBottom to render the axes. The SVG rendering fills the entire browser window, and circles are drawn using d3.selectAll and the .join method.

Mar 7, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This example displays the Iris Dataset as an interactive scatter plot, mapping petal length and sepal length for each specimen on a full-window SVG. It uses the D3.js v6 library, specifically importing functions like `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code asynchronously fetches CSV data from a remote Gist, parses numeric fields, then binds circles to the data points at computed x and y positions. Axes are rendered with D3’s standard axis components, and the chart automatically resizes to fill the browser viewport.

Mar 7, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Built with D3 v6 and rendered as SVG, it loads data via `d3.csv`, scales positions using `d3.scaleLinear` with `d3.extent` domains, and draws circles for each observation. Axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, with margins and a fixed point radius, highlighting the distribution of flower measurements.

Mar 7, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis for individual flower specimens. The code loads raw CSV data from a GitHub gist, parses numeric fields, and uses D3 v6 scales, axes, and SVG circle elements to render the points across a full-window canvas. Axis tick labels are styled at 32 pixels for improved readability.

Mar 7, 2022

Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 case counts using a horizontal bar chart, with each bar’s length encoding the population-based case number. Built with React for component structure and D3 v5 for scales and data loading, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. Data is fetched from a CSV file via `d3.csv`, and rectangles are rendered as SVG marks. Gridlines and axis tick labels are generated manually using D3’s tick formatting and React’s JSX syntax.

Mar 7, 2022