Skip to main content
Log in
S

sumitradevipolina

@sumitradevipolina·22 public vizzes

Loading thumbnail…

ICE-8 world map

This example displays a world map using an Equirectangular-like natural Earth projection, with countries shaded in light green on a sky-blue ocean sphere. It renders geographic boundaries as SVG paths using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while TopoJSON’s `feature` method extracts country polygons from a remote dataset. The map loads asynchronously via D3’s `json` request and appends each country path to the SVG, with subtle black strokes highlighting borders.

Apr 5, 2022
Loading thumbnail…

ICE-8 Mickey mouse network tree

This interactive network diagram from the ICE-8 series depicts the social connections of Mickey Mouse and his acquaintances, with characters like Minnie, Clarabelle Cow, and Scrooge McDuck linked to a central figure. The node-link layout is generated using the `d3.layout.force` API, which applies simulated gravity, distance, and charge to position the elements. Rendering to an SVG canvas, each node is a fixed-radius circle with a text label, and link thickness scales with the square root of the connection weight from the `graphFile.json` data. Nodes can be dragged and repositioned using the force-directed model's drag interaction.

Apr 5, 2022
Loading thumbnail…

Tree

This hierarchical tree visualization displays cartoon character relationships with color-coded labels, where node text size decreases with depth. Using D3 v5’s `tree()` layout and `linkHorizontal()` generator, it renders an SVG with curved links and zoomable panes via `zoom()`. The data comes from nested JSON, binding each node’s `id` and `color` from `d.data.data` to text elements. Font sizing scales by depth, while text shadows and the `event.transform` handler enhance readability and interaction.

Apr 5, 2022
Loading thumbnail…

ICE-8 country map

This example displays a choropleth-style map of US states rendered as an SVG using React and D3 v5. The map shows state boundaries with sky-blue land fills and green interior borders, built from a TopoJSON file fetched via `d3.json`. The code uses `geoAlbersUsaTerritories` for projection and `d3.geoPath` to generate paths, while `topojson.feature` and `topojson.mesh` extract land and interior outlines from the dataset.

Apr 5, 2022
Loading thumbnail…

ICE - 7 Pie Chart

A pie chart visualizes death rates across countries, with each slice labeled by its percentage and a legend listing country names and corresponding values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute and render the arcs, with data fetched from a CSV URL via `d3.csv`. Text labels are positioned using `arc.centroid`, and the chart is rendered as SVG elements within a 1000x500 viewport.

Mar 29, 2022
Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). Using D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, it implements a reusable scatter plot function. Every two seconds, a `setInterval` cycles through different columns—petal_width, sepal_width, petal_length, sepal_length—switching the x-axis dimension and updating SVG circles via data joins.

Mar 29, 2022
Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes the Goods and Service Tax of a country across different years, using a curved line and a filled area beneath it to emphasize the trend. The chart employs D3 v5's `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` for smoothing, rendering as SVG. The y-axis labels are formatted with `format('.3s')`, and the data is loaded via `csv` from a hosted dataset. Grid lines are styled green, with a bold black line and pink fill for the area.

Mar 28, 2022
Loading thumbnail…

ICE 7 Line Chart

This line chart displays the Goods and Service Tax of a country across different years, with the year on the x-axis and tax values on the y-axis. The visualization uses D3 v5 to parse CSV data, with `scaleTime` and `scaleLinear` for axes and `d3.line` to generate the path. Grid lines and axis labels are styled via CSS, and the chart renders as an SVG with red axis labels and a black line stroke.

Mar 28, 2022
Loading thumbnail…

Marks and Channels

This example displays the top 5 movies by lifetime gross earnings as a horizontal bar chart, with each bar’s length encoding the numerical value. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The SVG rectangles are rendered directly via React, with axes drawn using custom ticks and gridlines.

Mar 25, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length against different flower measurements in a full-screen SVG. A d3 scaleLinear computes x and y positions from extent-bounded domains, with circles rendered via a data join. The chart cycles through four measurement columns every two seconds using setInterval, updating the x-axis and points. The reusable chart pattern from d3 v6 supports flexible configuration of margins, radius, and value accessors.

Mar 25, 2022
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species—blue for setosa, yellow for versicolor, and red for virginica—with the D3 v6 scaleLinear and extent functions defining the axes. The SVG is rendered full-window, using D3’s csv loader, axisLeft, axisBottom, and join for circles, while custom axis labels are styled with times font.

Mar 25, 2022
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different measurements by selecting which columns map to the X and Y axes through dropdown menus. Built with D3 v5, the visualization uses d3.scaleLinear for axis scaling and d3.axisBottom and d3.axisLeft for tick marks. Circles transition over two seconds to their new positions with staggered delays, while axis labels update dynamically. The SVG rendering includes grid lines and semi-transparent red circles, with data loaded as CSV from a GitHub gist.

Mar 12, 2022
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the lifetime gross earnings of ten popular movies, using D3.js within a React framework. The SVG-based visualization animates bars on hover, highlighting the selected movie and displaying the percentage divergence from others. The chart employs D3’s scaleBand, scaleLinear, axis functions, and transition effects for interactive feedback, with data hardcoded in JavaScript and styled via CSS.

Mar 12, 2022
Loading thumbnail…

Untitled

This example shows a 3D scatterplot of the Iris dataset, plotting sepal length, sepal width, and petal length as coordinates for each sample. The code loads data from a CSV file using D3’s `d3.csv` and then constructs a single `scatter3d` trace with Plotly.js, rendering it into a `div` via `Plotly.newPlot`. Markers are styled with size, opacity, and a light border. The layout removes all margins, producing a minimal visual that highlights the distribution of the three measured features.

Mar 12, 2022
Loading thumbnail…

3d Bar Chart

This example visualizes the lifetime gross earnings of the top 50 movies using a 3D bar chart, with each bar’s height representing earnings and its position on the x-axis corresponding to movie title. The bars are rendered as SVG polygons with front, top, and side faces, drawn in a perspective projection based on a configurable camera position. The implementation uses D3.js for scales, axes, and data binding, with custom functions like `perspective` and `bar3d` handling the 3D-to-2D projection and face generation. Bars are sorted by distance from the chart’s center to control overlap, and hover interactions change the fill color.

Mar 11, 2022
Loading thumbnail…

Fork of Movie Ranks

This horizontal bar chart displays the top 50 highest-grossing films by lifetime gross revenue. Each bar’s length corresponds to the film’s rank, using a linear scale for the x-axis and a categorical band scale for the y-axis. The visualization is rendered as an SVG using D3 v5, with axes customized via `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file using `d3.csv`, and the chart includes a title and an x-axis label.

Mar 7, 2022
Loading thumbnail…

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

A horizontal bar chart displays the top 10 most populous countries, with population values from a CSV file loaded via `d3.csv`. The chart uses `scaleBand` and `scaleLinear` from D3 to map countries and populations, while React manages the component state and rendering. SVG elements for rectangles, axes, and tick labels are generated declaratively through React's JSX, with grid lines and text labels drawn directly from D3's scale ticks.

Mar 1, 2022
Loading thumbnail…

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

This example demonstrates loading a remote CSV file of movie data using D3.js v7 and displaying summary statistics about the dataset. The webpage shows a static SVG image of a castle alongside a text container that reports the file size, row count, and column count. The code uses the `d3.csv` function to fetch and parse the CSV, then computes metrics using `d3.csvFormat` and accesses the parsed data's length and `columns` property. The SVG image is referenced from a GitHub raw URL and rendered with standard SVG elements.

Feb 26, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple face rendered as an SVG using React, with a yellow circle for the head and two smaller circles for eyes centered on a 960×500 canvas. It combines React 17 and D3 v7, loaded via UMD builds from unpkg, with ReactDOM rendering the SVG elements directly. The code demonstrates basic JSX syntax, including curly braces to embed JavaScript expressions like `centerX` and `eyeOffsetY` for positioning. The stylesheet removes the body margin and hides overflow, allowing the visualization to fill the viewport cleanly.

Feb 22, 2022
Loading thumbnail…

Fork of Fork of Let's make a face: part 3 tweaks

A stylized smiley face is drawn as an SVG graphic, centered within a 960 by 500 viewport. The face uses a horizontal linear gradient that transitions from black to white for its fill, while the surrounding stroke is also black. The eyes and mouth are white shapes, with the mouth created using the `d3.arc` API to generate a semi-circle path. React renders the SVG elements, and D3 v7 provides the arc generator, with rendering occurring client-side in a static layout.

Feb 19, 2022
Loading thumbnail…

Fork of Let's make a face: part 3 tweaks

A smiley face composed of SVG circles and a mouth path, drawn with a linear gradient that transitions from black to white across the face. The code uses React 17 to render the SVG elements, with D3 v7’s `arc` generator computing the mouth’s crescent shape from inner and outer radii and angular start/end points. Fixed constants define the face radius, eye offsets, and stroke width, while the eyes are plain white circles. No interactive or data-driven behavior is present.

Feb 19, 2022
Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example shows a simple, static SVG face built from basic geometric shapes: a large green circle with a blue outline forms the head, and two smaller unfilled circles serve as eyes. The face is incomplete, described as “half way towards a smiley face.” The construction uses raw SVG elements placed inside an HTML file, with D3 v7 loaded via a script tag. The JavaScript code initializes a D3 selection and appends a mouth path using the `arc` API, defining inner and outer radii and an angular range, though the rendering relies on classic SVG markup rather than D3’s data-binding features.

Feb 19, 2022