Skip to main content
Log in
B

bindusreeja

@bindusreeja·13 public vizzes

Loading thumbnail…

Movie tree

This visualization shows a hierarchical tree of movie genres and film titles, with a central “Movies” root branching into Action, Horror, Thriller, and Drama, each leading to specific movies. The D3.js `stratify()` method converts flat parent-child data into a hierarchy, which is then laid out using `d3.tree()`. SVG circles represent nodes, connected by animated paths that draw straight lines, while text labels fade in with a staggered duration based on depth. The rendering emphasizes a simple, colorful circular-node aesthetic over explicit positional encoding.

Jul 9, 2022
Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships between eight individuals, with nodes representing people and edges depicting their connections. The graph uses a force-directed layout computed by `d3.forceSimulation`, with edges rendered as SVG lines with arrowhead markers. Node labels appear directly on the gray circles, and hovering highlights the selected node. The data comes from a JSON file containing nodes and links with relationship types and weights.

Jul 9, 2022
Loading thumbnail…

Bangladesh sales data map

This map shows sales figures for seven districts in Bangladesh, with hover tooltips displaying yearly, monthly, and weekly amounts in BDT for each region. The visualization is built with D3 v5, parsing TopoJSON data to generate the map via `d3.geoPath` and `geoMercator` projection. Sales data is loaded from a JSON file and matched to district names. The map supports zoom and drag interactions through `d3.zoom`, with districts styled as yellow paths that turn green on hover.

Jul 9, 2022
Loading thumbnail…

ICE8

A world map rendered in black and gold displays the Earth's continents using geographic data from the world-atlas TopoJSON dataset. The map is projected using a natural Earth projection, with country boundaries outlined in translucent red strokes. This visualization is built with D3 v5, using the `geoNaturalEarth1` projection, `geoPath` for rendering, and TopoJSON's `feature` method to extract country geometries into SVG paths.

Jul 9, 2022
Loading thumbnail…

world map with the world Topojson data

This example displays a world map using D3.js version 5 and TopoJSON data from the world-atlas dataset. The visualization projects geographic country boundaries onto a natural Earth projection within an SVG container, with a light blue sphere background and teal country fills. The code imports geoNaturalEarth1 and geoPath for projection and path generation, and applies the feature function from topojson to convert country data into GeoJSON features. Red strokes with low opacity outline the countries, creating a distinct visual separation against the pastel background.

Jul 9, 2022
Loading thumbnail…

3D Bar Chart

This example displays mobile phone manufacturer sales data across six months as a 3D bar chart. It uses the d3-x3d library with X3DOM for 3D rendering, alongside d3.v5 for data loading and parsing. The visualization reads CSV data describing monthly sales figures, transforms it into multi-series format, and renders bars in three dimensions. The chart supports interactive viewing, with d3.x3d.chart.barChartMultiSeries handling the 3D scene construction from the parsed data.

Jul 6, 2022
Loading thumbnail…

pool

This example shows a 3D scatter plot of pool dimensions, plotting pool length, width, and height as three-dimensional coordinates. Each point is rendered as a blue marker with partial opacity, allowing for visual inspection of the relationships between the three measured variables. The visualization is built using Plotly's `newPlot` function, which receives data prepared from a CSV file loaded with d3.csv. The code constructs a single trace with multiple markers and uses a minimal layout with zero margins to display the plot.

Jul 6, 2022
Loading thumbnail…

household.csv

This interactive scatter plot visualizes induced abortions over time using a dataset from a GitHub-hosted CSV file. Built with D3.js (version 6.7.0), the chart maps the period on the x-axis and induced abortion counts on the y-axis using linear scales. The animation cycles through displaying each column as the x-value every two seconds, dynamically updating the axes and circles via the reusable `scatterPlot` function. The visualization employs SVG rendering with the "Share Tech" font and a clean, full-screen layout.

Jul 1, 2022
Loading thumbnail…

ScatterPlot_ICE6

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). The axes are labeled with sepal length and petal length, though the data encoding uses petal dimensions for positioning and sepal dimensions as circle radii. Built with React and d3.v6, the example loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders SVG circles with attributes driven by the parsed numeric fields. Axis generation uses `axisLeft` and `axisBottom`.

Jun 26, 2022
Loading thumbnail…

bindu_ICE6

This example shows a horizontal bar chart of carbon dioxide emissions in thousand metric tonnes for the top ten states in 2019. The chart displays the data using SVG rectangles, with state names on the y-axis and emissions values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for scales and `csv` to load data from a GitHub gist. Grid lines are generated from `xScale.ticks()`.

Jun 26, 2022
Loading thumbnail…

Week-6: In Class Exercise: Rendering Marks and Channels with React & D3

A horizontal bar chart displays carbon dioxide emissions in thousand metric tonnes for ten states during 2019 electricity generation, sourced from a CSV file via `d3.csv`. Built with React and D3 v5, it renders SVG rectangles using `scaleBand` for the y-axis states and `scaleLinear` for the x-axis emission values, with custom tick marks and labels. The chart’s axes and bars are generated declaratively through React’s `map` over the data array, while D3’s `max` and scale functions handle the domain calculations.

Jun 26, 2022
Loading thumbnail…

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

This visualization displays a horizontal bar chart comparing the basic monthly internet cost for the first 12 countries from a CSV dataset. The chart uses SVG rendering within a React application, combining React state management with D3.js scales and layout functions. It leverages D3's `scaleBand` for the categorical country axis, `scaleLinear` for the continuous cost axis, and `max` to determine the domain. The code manually renders axis ticks and gridlines using D3's `ticks()` method, creating an interactive-free static representation of the data.

Jun 25, 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 the top 200 grossing movies using D3.js within a Vue framework. The page displays the dataset link and renders a static, embedded SVG image (a chart of the data) generated from a base64-encoded JPEG, with a pink background and white text headers. The code uses D3 v7’s `d3.csv` methods implicitly through the external dataset reference, but primarily focuses on presenting the loaded data through pre-formatted SVG and WebGL components rather than dynamic visualization.

Jun 23, 2022