shiiva-surya

@shiiva-surya·14 public vizzes

ICE8 - Network Graph

A network graph visualizes the relationships between eight individuals, with nodes labeled by name and connected by directed, arrowed links. The layout is determined by a force-directed simulation, using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with nodes rendered as pink circles and blue links. Data comes from a local `networkData.json` file, and the visualization includes interactive dragging via D3's `drag` handler, with hover effects that change the node stroke to green.

Apr 11, 2023

Loading thumbnail…

ICE8 Family Tree

This example renders a family tree using D3.js v5’s `d3.stratify()` and `d3.tree()` layout, displayed as SVG circles connected by cubic Bézier paths. Node colors indicate hierarchical depth—red for root, blue for depth 1, green for depth 2, and yellow for depth 3—with each node labeled by name. The input is a flat array of parent-child pairs, which the code transforms into a hierarchical structure before positioning and drawing the tree on an 900×900 SVG canvas.

Apr 11, 2023

Loading thumbnail…

International Map using d3.js

This example displays a world map using a natural Earth projection, with countries filled in teal and outlined in red. The visualization reads country boundary data from the world-atlas TopoJSON dataset hosted on jsDelivr. It uses d3.js v5 functions such as `geoNaturalEarth1` for projection, `geoPath` for generating SVG paths, and the TopoJSON `feature` function to extract country geometries from the topology. The map is rendered as an SVG inside an HTML page, with a light blue sphere background and hidden page margins.

Apr 11, 2023

Loading thumbnail…

ICE8 USA Map

This visualization displays a map of the United States with state boundaries rendered as blue filled polygons with orange strokes, using the geoAlbersUsa projection via d3.geoPath. It loads TopoJSON data from the US Atlas TopoJSON repository, converts it with topojson.feature, and appends SVG path elements for each state. Hovering over a state changes its fill to red, while geographic graticules are included in the styling. The map is built with D3 v5 and rendered as SVG.

Apr 10, 2023

Loading thumbnail…

Area Chart for car sales

This area chart visualizes the increase in car sales over time, using a smooth curve to highlight the upward trend in total sales in USD across multiple years. The example is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to render the chart as an SVG. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse` for the x-axis.

Mar 25, 2023

Loading thumbnail…

Pie Chart for Car MPG data

This pie chart visualizes the miles per gallon (MPG) for the top ten cars from a CSV dataset, sorted in descending order and loaded via `d3.csv`. Each slice represents a car, with its MPG value shown in the legend, which uses `d3.scaleOrdinal` and `schemeCategory10` for colors. The chart is rendered as an SVG, with slices drawn using `d3.arc` and layout computed by `d3.pie`. Hovering over a slice logs the MPG value to the console.

Mar 25, 2023

Loading thumbnail…

Reusable Scatter Plot Using Iris Dataset

A reusable D3.js scatter plot visualizes the Iris Dataset, encoding the three species with distinct SVG symbols (circle, plus, diamond) and colors from `schemeCategory10`. It uses `scaleLinear` for axes and `scaleOrdinal` for mapping species to shapes and colors, with the plot implemented as a reusable function with getters and setters for dimensions, data, and margins. Every ten seconds, the x-axis changes to a different flower measurement (petal width, sepal width, petal length, sepal length), dynamically updating the axes and points. Data is fetched from a GitHub gist CSV and parsed with string-to-number conversion for all numeric columns.

Mar 25, 2023

Loading thumbnail…

Line Chart for Car sales

This line chart shows total car sales in USD from 2013 to 2021, with a red line drawn across a grid. The visualization loads CSV data from a GitHub gist, parsing dates and sales values, and uses d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line to generate the path. The SVG is rendered with D3 v5, and axes include rotated labels and a title inside an HTML page.

Mar 24, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This chart shows the relationship between horsepower and displacement for cars from 2000 to 2013, with a line graph tracing how displacement values change across different horsepower levels. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` to construct the plot. Data is loaded from a CSV file using `d3.csv`, and the code includes custom axis labels, a title, and grid lines styled via tick sizes. Red strokes highlight the line path while margins position the chart within a 960×500 viewport.

Mar 24, 2023

Loading thumbnail…

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

This visualization shows a horizontal bar chart comparing the acceleration capacity of 20 cars, rendered as SVG marks within a React application. The code uses React’s `useState` and `useEffect` hooks to asynchronously load CSV data from a GitHub gist via D3’s `csv` function, then maps it to a linear x-scale (`d3.scaleLinear`) and a band y-scale (`d3.scaleBand`) for car names. Custom tick marks and labels are drawn manually using D3’s `scaleBand` and `scaleLinear`, with blue gridlines and text elements, all within a single `<svg>` container managed by ReactDOM.

Mar 11, 2023

Loading thumbnail…

Creating Scatter Plot with Penguin Data

This example renders a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species. It loads data from a CSV file using `d3.csv`, parses numeric fields, and positions circles with `scaleLinear` and `extent` domains. The code uses D3 v5 with SVG, appending axes via `axisLeft` and `axisBottom`, and draws circles with `selectAll().data().join()`, also setting non-visible `rx` and `ry` attributes from culmen dimensions.

Mar 11, 2023

Loading thumbnail…

ICE 5

This example displays metadata about the cars dataset, presenting the file size, row count, and column count in large, bold text. The page is styled with a background image of cars and includes a link to the raw CSV file. Using D3 v7, the code loads the data via `d3.csv` and calculates the size with `d3.csvFormat` and the `length` property. The resulting statistics are rendered into a `<pre>` element by setting its `textContent`.

Mar 4, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with large, 13em font size via a CSS class. It serves as a minimal demonstration of a static HTML page that combines CSS for presentation and JavaScript for potential interactivity, though no scripts are present in the code. The page uses plain HTML structure and CSS styling, with no external libraries or data sources, highlighting the simplest form of web-based visualization. The rendering relies entirely on the browser’s native HTML and CSS engine.

Mar 3, 2023

Loading thumbnail…

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

A smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face, centered on a blue circle, includes eyes and an arc-based mouth. D3 transitions move the eyebrow group upward and back over two seconds. The code uses `select`, `arc`, and chained `transition().duration()` calls from d3.v5 to animate SVG attributes.

Feb 25, 2023