premsaiv

@premsaiv·19 public vizzes

ICE-8 world map

This example displays a world map with individual countries rendered as brown SVG paths outlined in light green, projected using the Natural Earth projection. It fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. The visualization uses d3’s `geoPath` and `geoNaturalEarth1` to generate the map geometries, appending each country as a path element to a 980×495 SVG canvas.

Apr 5, 2022

Loading thumbnail…

Africa Map ICE - 8

This example displays a choropleth-style map of Africa using a red fill for each country, with black borders for distinction. It renders the geographic boundaries as SVG paths via the Mercator projection, set up with `d3.geoMercator` and scaled to fit the canvas. The map data is loaded asynchronously from a JSON file hosted on GitHub Gist, and each feature is drawn using `d3.geoPath` with the projection applied. The visualization is built with D3 v4 and includes the `d3-geo-projection` library for additional projection support.

Apr 5, 2022

Loading thumbnail…

Social Network Graph ICE-8

This interactive SVG social network graph visualizes 10 people and their friend relationships, with each node drawn as a large orange circle labeled with a name and connected by directed, arrow-tipped lines. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes, while link values indicate relationship strength. Nodes are rendered as SVG circles and are draggable via `d3.drag`, with hover effects that thicken the node border.

Apr 5, 2022

Loading thumbnail…

Fork of ICE-8 Family Tree

This visualization displays a family tree with three generations of descendants, each generation distinguished by a unique color (white, orange, cyan, or light green) applied to circular nodes. The tree uses D3’s `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. SVG path links animate over 1.45 seconds between nodes, while circles and labels fade in via `transition()`. The rendering uses `d3.v6` with an SVG-based layout, featuring a purple background and green connecting edges.

Apr 5, 2022

Loading thumbnail…

Fork of papa- Family tree

This example shows a family tree visualization using a node-link diagram. The tree expands downward from a single root ancestor, with descendant nodes connected by curved green paths and colored circles indicating the node’s depth. The data structure is built using D3’s `d3.stratify()` from an array of parent-child pairs, then laid out with `d3.tree()`. Rendering uses SVG, with circles, paths, and text labels appended to a canvas via D3 v5, and React is available as the framework.

Apr 5, 2022

Loading thumbnail…

Scatter Plot ICE7

An animated scatter plot cycles through four flower measurements from the Iris dataset, showing how the data points are distributed. The visualization uses a custom scatter plot module built with D3.js, with SVG circles colored by species. The chart loops through different column combinations, updating the x-axis on an interval. The source data is loaded as a CSV from a GitHub gist.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 with SVG rendering, loading the data via `d3.csv`, scaling with `scaleLinear`, and computing domains through `extent`. Axes are generated with `axisLeft` and `axisBottom`, while circles are positioned using `data` joins. Axis labels are appended as SVG text elements, and the chart fills the browser window by setting its width and height to `window.innerWidth` and `window.innerHeight`.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of D3 Scatter Plot

Mar 29, 2022

Loading thumbnail…

ICE - 7 Pie chart

This example presents a static pie chart that visualizes the percentage of car sales attributed to different car companies. The chart is rendered as an SVG using D3.js version 5, with each slice colored from a predefined palette. The code constructs the pie chart by loading data from a remote CSV file using `d3.csv`, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and style the slices. It also appends text labels at the centroid of each slice via `arc.centroid`, and a legend is built manually with rectangles and text elements.

Mar 29, 2022

Loading thumbnail…

ICE 7 Area Chart

This area chart shows annual car sales for a company from 2000 to 2009, combining a smooth orange line with a filled gray area beneath it. The x-axis displays sales years while the y-axis labels sales values. Built with D3.js v5, the visualization uses `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` for smoothing, rendering as SVG. Data is loaded via `csv` from a GitHub gist, with year values parsed using `d3.timeParse`.

Mar 29, 2022

Loading thumbnail…

ICE-7 Line Chart

This example shows car company sales from 2000 to 2015 as a single line chart, using d3.line to connect annual data points along a time-based x-axis and a linear y-axis. The SVG rendering includes styled axis ticks, grid lines, and labels for both axes, with the line path drawn in purple. Data is loaded as CSV from a GitHub gist, parsed with d3.csv, and scales are set with scaleTime and scaleLinear. Axis generators d3.axisBottom and d3.axisLeft create the framed plot, while a title and rotated axis label are added manually.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of ICE - 7 Pie chart

This pie chart visualizes survey responses about people’s preferred social media platforms, displaying each category’s percentage share. The chart uses D3.js v5 with SVG rendering, fetching CSV data via `d3.csv` and constructing arcs with `d3.pie()` and `d3.arc()`. Each slice is labeled with its percentage, and a legend lists the platform names alongside color swatches and values. Colors are assigned using `d3.scaleOrdinal`, while text formatting relies on `d3.format`.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Pie Chart

This visualization displays the top 10 car-producing countries using a D3 pie chart, with each slice sized by 2019 production values. The chart includes a legend that pairs country names with their corresponding production totals in thousands. The code imports CSV data via `d3.csv`, processes it with `d3.pie`, and renders SVG paths using `d3.arc`. Colors are assigned through `d3.scaleOrdinal`, and all title content is formatted with `d3.format`.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Pie Chart

This example visualizes the top 10 car-producing countries in 2019 as a pie chart, with each slice sized proportionally to total production value. The chart renders in SVG using D3 v5’s `pie()`, `arc()`, and `scaleOrdinal` to generate segments and assign colors, while a legend lists country names and production totals formatted with `d3.format`. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization is centered in an HTML page styled with CSS.

Mar 29, 2022

Loading thumbnail…

Fork of Fork of ICE 7 Pie Chart

This visualization displays a pie chart of the top 10 car-producing countries in 2019, with a legend listing each country and its total production value in thousands. The chart uses D3 v5’s `pie` and `arc` generators to compute segment angles and render SVG paths, while a `scaleOrdinal` assigns categorical colors to each slice. Data is loaded from a CSV file via `d3.csv` in the `getData` module, and legends are built with SVG circles and text elements. The chart also formats values using `d3.format`.

Mar 29, 2022

Loading thumbnail…

ABOVE IS SCATTER PLOT BASED ON THE GIVEN IRIS DATA

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length. Each circle represents a flower specimen, colored by species using `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization uses `d3.axisBottom` and `d3.axisLeft` for axes, with labels for both dimensions and a categorical color legend. Data is loaded from a CSV URL and parsed with `d3.csv`, while the SVG rendering includes custom margins and axis styling.

Mar 8, 2022

Loading thumbnail…

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

This bar chart displays the top 10 most populous cars from a CSV dataset, using React and D3 to render SVG marks. The code loads data via `d3.csv`, scales it with `d3.scaleBand` and `d3.scaleLinear`, and manually draws axes and gridlines. React’s `useState` and `useEffect` manage the asynchronous data fetch, while `ReactDOM.render` mounts the visualization.

Mar 8, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse a CSV dataset of football team rankings using D3.js version 7.3.0 within an HTML page. It fetches the remote CSV file via the `d3.csv` API, which returns a promise, and then displays computed dataset statistics—size in kilobytes, row count, and column count—in a styled `<pre>` element. The visualization also incorporates a static snow SVG image and uses custom CSS for header and message formatting. The code highlights modern asynchronous data loading and parsing techniques with D3's CSV utilities.

Feb 26, 2022

Loading thumbnail…

Fork of Smiley Face Part I

A stylized smiley face rendered in SVG using React and D3’s `arc` generator, drawn with concentric geometric primitives: a purple circle with a yellow stroke for the head, two dark eye circles, and a mouth arc. The mouth is created by setting the arc’s inner and outer radii and specifying start and end angles of π/2 and 3π/2, producing a half-circle. All elements are positioned relative to a central translation group, with dimensions fixed at 900 by 500 pixels in the SVG viewport.

Feb 19, 2022