pranatiyv

@pranatiyv·13 public vizzes

ICE-8 Social Network graph

A labeled node-link diagram maps nine people in the ICE-8 social network, with circle nodes positioned by a force-directed layout and links weighted by stroke thickness. The visualization uses the D3 v4 force layout (`d3.layout.force` with charge and size settings) to simulate node positions, while SVG elements render the graph, with circles, text labels, and drag interaction enabled via `force.drag`. Data comes from the bundled `graph.json` file.

Apr 4, 2022

Loading thumbnail…

Family Tree ICE-8

This example visualizes a family tree as a tidy tree diagram, using circle size to represent a numeric value and color encodings to convey two categorical attributes (type and level) via stroke and fill. The data is a static JavaScript object nested to show parent-child relationships. Built with D3 v5, the code uses `d3.tree()` and `d3.hierarchy` to compute node positions and renders the SVG output with curved links via path `C` commands. Node labels are positioned to the left or right depending on whether a node has children.

Apr 4, 2022

Loading thumbnail…

Country map with D3.js!

This example visualizes the United States by filtering country boundaries from the world-atlas TopoJSON dataset and rendering them as an SVG map. It uses d3.geoAlbersUsa for the projection and d3.geoPath to generate the geographic paths. The code loads the TopoJSON data with d3.json, converts it to GeoJSON using topojson.feature, and then binds the filtered features to SVG path elements. The map appears as a solid blue country shape with thin black strokes, set against a white background.

Apr 4, 2022

Loading thumbnail…

Let's make a map with D3.js!

This example shows a choropleth-style world map rendered as SVG, with each country filled in blue and outlined with a subtle black stroke. Using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it loads a TopoJSON dataset from the world-atlas package and converts it to GeoJSON with `topojson.feature`. The code then binds the country features to SVG path elements, relying on D3’s `select` and `json` methods to fetch and draw the geographic data.

Apr 4, 2022

Loading thumbnail…

Area Chart ICE 7

This area chart displays the price of a commodity over time using a green filled area beneath a line. The visualization is built with D3.js v4 and rendered as an SVG. The code fetches market-price data from a GitHub gist, parses the date strings with `d3.timeParse`, and constructs the chart using `d3.scaleTime`, `d3.scaleLinear`, and `d3.area`. Axis labels are added via SVG text elements, and the styling is defined in a separate CSS file.

Mar 28, 2022

Loading thumbnail…

ICE-7 Assignment Line Chart Country wise Population

This line chart visualizes market price data over time, plotting monthly values from a CSV file onto an SVG canvas. The chart uses D3 v4 scales and axes, with `d3.scaleTime` handling the x-axis dates and `d3.scaleLinear` mapping the price values to the y-axis. A green path, generated with `d3.line`, connects the data points, while axis labels identify “Month” and “Price”. The data is loaded via `d3.csv` and formatted using `d3.timeParse`.

Mar 28, 2022

Loading thumbnail…

Fork Pie Chart For ICE-7

A fork pie chart visualizes the top ten cryptocurrencies by price, using a D3.js SVG rendering. The chart displays each coin's price as a labeled slice, with values formatted in thousands (e.g., "K"). Data is fetched from a GitHub-hosted CSV, and the pie is constructed using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. A legend is also rendered, listing each coin alongside its corresponding price and color swatch.

Mar 28, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot ICE-7

This animated scatter plot cycles through different pairings of Iris flower measurements, using petal and sepal dimensions from the classic Iris dataset. The code builds a reusable chart function with D3 v6, leveraging `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles in SVG. A `setInterval` updates the x-axis column every few seconds, while colors distinguish the three Iris species. The visualization is based on a fork of a reusable chart pattern, with data loaded as CSV from a GitHub gist.

Mar 28, 2022

Loading thumbnail…

Fork of ICE-6: Rendering Top Ten Crupto currencies with React & D3

This visualization displays the top ten cryptocurrencies by price as a horizontal bar chart. The React component loads its data from a CSV file using D3's `csv` function. D3's `scaleBand` and `scaleLinear` encode the categorical coin names and the continuous price values, respectively. The chart is rendered as an SVG, with bars drawn as `rect` elements. The code uses React's `useState` and `useEffect` hooks to fetch and manage the data, and the final visualization is mounted into the DOM with `ReactDOM.render`.

Mar 7, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal length and width for each flower sample. The visualization uses D3 v6 to load the CSV data, applying scales with `d3.scaleLinear` and rendering circles as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, positioned within a defined margin. While all points are rendered in a uniform light pink, the code includes petal length and width values that could adjust the circle’s rx and ry attributes, though the current radius remains constant at 8 pixels.

Mar 7, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js, presenting the resulting data summary in a styled HTML page. The code fetches a CSV file from a GitHub gist URL and uses `d3.csv` to parse it, then calculates and displays the data’s size in kilobytes, row count, and column count inside a `<pre>` element. The page also includes an embedded SVG image and uses basic CSS for visual formatting. The visualization highlights the simplicity of reading external tabular data with D3’s asynchronous data-loading API.

Feb 28, 2022

Loading thumbnail…

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

This visualization demonstrates how to load and parse CSV data using D3.js. The page displays a heading explaining the lesson, an SVG image, and a message area that reports the data file's size in kilobytes, row count, and column count. The code uses the `d3.csv()` method to fetch a remote CSV file from a GitHub gist and then applies `Math.round()` and string formatting to calculate the file size. The data source is loaded from a hardcoded URL, and the information is rendered as text within an HTML `<pre>` element.

Feb 25, 2022

Loading thumbnail…

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

This example builds a silver smiley face in SVG using D3.js v5, with a yellow stroke and animated eyebrows that move up and down over two-second transitions. The code selects the SVG element, appends a group centered on the canvas, and constructs facial features including circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. The eyebrows transition their vertical position using chained `transition.attr` calls, demonstrating fundamental DOM manipulation and animation with D3’s selection and transition APIs.

Feb 21, 2022