NITIN0601

@NITIN0601·13 public vizzes

ICE 7 - Reusable Scatter Plot

This example presents a reusable scatter plot built with React and D3, visualizing the Iris dataset. It displays petal width against sepal length, with points colored by species (red for setosa, black for versicolor, green for virginica). The visualization includes axes and labels, and cycles through different column pairings every 140 milliseconds, animating the scatter plot as it updates the x and y values. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to handle scaling and axes, rendering SVG circles via a custom `scatterPlot` function.

Apr 30, 2022

Loading thumbnail…

ICE - 8 : Family Tree

An interactive family tree visualization renders hierarchical data from a JSON file, with nodes colored by generation and connected by links. The D3.js v3 layout algorithm positions the tree, while SVG rectangles and foreignObject elements display node names and text. Users can click nodes to expand or collapse branches, with animations and zooming supported. The visualization adapts its canvas size dynamically based on the tree's depth and width.

Apr 4, 2022

Loading thumbnail…

ICE 8: Region Map - USA

This example displays a choropleth-style region map of the United States, rendered as SVG paths within a React component. The map shows state boundaries as purple interior lines over a teal sphere, with land masses filled in dark blue. The code loads geographic data from the us-atlas TopoJSON file and uses d3.geoAlbers, d3.geoPath, and d3.geoGraticule for projection and rendering, along with topojson.feature and topojson.mesh to process the topology. React manages the data loading via useEffect and useState.

Apr 3, 2022

Loading thumbnail…

ICE 8 : World Map

This example displays a world map using a natural Earth projection, with countries rendered as filled paths and a contrasting sphere background. The visualization loads geographic data from the `world-atlas` TopoJSON dataset, converting it to GeoJSON with TopoJSON’s `feature` function. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, and `select`, appending SVG paths for each country, while styling is defined in CSS classes for the sphere and country fills.

Apr 3, 2022

Loading thumbnail…

ICE-8 : Network Tree

This example shows a small network of named people connected by curved links, where node size and color reflect the number of connections each person has, and links are styled with different thicknesses and red or black colors based on edge values. The visualization uses d3 v5 with a force-directed layout powered by d3.forceSimulation, d3.forceLink, and d3.forceManyBody, rendering nodes as SVG circles with labels and curved paths for links, all draggable via d3.drag. Data is embedded directly in the code as an array of link objects.

Apr 3, 2022

Loading thumbnail…

ICE 7 : Task 4 (Area Chart)

This example visualizes Tesla sales by year using an area chart. The view shows a smoothed curve with a filled blue region beneath it, plotted over time on an SVG canvas. It loads CSV data from a GitHub gist and parses dates with `d3.timeParse`. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and generators (`area`, `line`) with `curveBasis` for smoothing. Gridlines and rotated axis labels clarify the quantitative and temporal ranges.

Mar 28, 2022

Loading thumbnail…

ICE 7 : Task 2 (Pie Chart)

A pie chart displays year-wise Tesla sales from a CSV file, with each slice labeled by year and accompanied by a legend showing both year and sales values. The visualization uses d3.csv to load data, d3.layout.pie to compute arc angles, and d3.svg.arc for slice rendering. Ordinal scales assign categorical colors, while SVG groups position arcs, text labels, and legend rectangles. The chart is built with d3.v3 inside an HTML page with React components managing the state and rendering the SVG output.

Mar 28, 2022

Loading thumbnail…

ICE 7 : Task3(Line Chart)

This visualization displays Tesla sales data by year using a line chart. The chart plots yearly sales values on a linear scale against a time-based x-axis, with axis labels for “Year” and “Sales” and a title. The code loads CSV data from a GitHub gist and renders the line as an SVG path using D3 v5’s `scaleTime`, `scaleLinear`, `line` generator, `axisBottom`, and `axisLeft` functions within a React framework.

Mar 27, 2022

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered and styled via CSS. It loads D3.js from a CDN and uses the `select` API to target the `#message` div, setting its text content. The text value comes from a local ES6 module named `myMessage.js`. The project demonstrates importing both external libraries and local modules within a VizHub environment.

Mar 27, 2022

Loading thumbnail…

ICE 6 : Task 2

This visualization displays the Iris dataset as a scatter plot of petal length versus petal width, with each point colored by species (setosa in brown, versicolor in blue, and virginica in red). The SVG is rendered using D3 v6, with scales from `d3.scaleLinear` mapping the data domains to screen coordinates. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, and circles are bound to the data using `selectAll` and `join`. The CSV data is loaded asynchronously via `d3.csv` and parsed to numeric values.

Mar 7, 2022

Loading thumbnail…

ICE 6 : Task 1

This visualization displays bike sales revenue for the top ten products as a horizontal bar chart. It shows each product's revenue with bars scaled linearly along the x-axis, using a scatter-plot-like grid with vertical gridlines. The React component fetches data from a CSV file using d3.csv and renders the chart as an SVG. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.max to determine the domain. Custom tick labels are drawn for both axes, with separate styling for the text elements.

Mar 6, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data in the browser using D3.js version 7. It fetches an Iris flower dataset from a GitHub gist and displays the file size in kilobytes, row count, and column count in a styled HTML page. The code uses both the `d3.csv` promise-based method and a manual `fetch` combined with `d3.csvParse` to show two parsing approaches. Results appear in a large text element alongside a decorative SVG flower image.

Feb 28, 2022

Loading thumbnail…

Face smile with VizHub

This example shows a stylized smiling face built with SVG shapes, including circular eyes, a nose, and a mouth, all composed with D3 arc generators. The face is constructed using React to render the SVG elements, with the D3 `arc()` API defining the paths for the nose, mouth, and face outline. The visualization uses a fixed coordinate system and styling properties like stroke width and fill colors to create a cartoon-like illustration.

Feb 20, 2022