V

vishusikka

@vishusikka·31 public vizzes

Loading thumbnail…

Assignment 6 updated -- Scatter plot with a qualitative color scale

This scatter plot visualizes the relationship between average horsepower and torque for 46 car brands, with each brand represented as a white circle with a colored outline. A qualitative color scale using `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes manufacturers, while a legend and interactive tooltip, implemented with D3 v6 event handlers, reveal brand names and exact values on hover. The chart, rendered as SVG, loads data from `stripechart1.csv` via `d3.csv` and positions points using `d3.scaleLinear` for both axes.

Loading thumbnail…

Assignment 6 updated -- Diverging bar chart with diverging color scale

This diverging bar chart visualizes net forest conversion by country, with bars extending right from a central zero axis for net gains (green) and left for net losses (red). The code uses D3 v6 to load CSV data via `d3.csv`, scale linear and band axes, and applies the ColorBrewer RdYlGn color scheme through `colorScale.domain([-max, max])`. A tooltip displays each country's value on mouseover, and the chart labels each bar with its entity name.

Loading thumbnail…

Box Plot - Highest MPG

This visualization displays the distribution of fuel efficiency (mpg) for the top five automobile makes—Hyundai, Honda, Kia, Scion, and MINI—across multiple model years. It combines box plots showing quartiles, median, and whisker ranges with individual green data points jittered along the x-axis to reveal underlying data density. Built with D3 v4, the chart uses `d3.nest()` and `d3.quantile()` to compute summary statistics from a CSV file, then renders SVG rectangles, lines, and circles with hover tooltips for each point.

Loading thumbnail…

D3 Boxplot with Jitter for Assignment 4

This D3.js v4 visualization presents a boxplot of BMW model fuel efficiency (mpg) across model years 2009–2012, sourced from boxplot.csv. It summarizes the distribution per model using d3.nest() to compute quartiles and the interquartile range, which are drawn as a box-and-whisker plot via SVG shapes. Individual data points are overlaid as red circles with a fixed x-offset, and hover interactions (configured via d3.select and tooltip transitions) reveal exact mpg values. The chart uses d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric axis, and d3.axisBottom/Left for tick marks.

Loading thumbnail…

Bar chart - Highest MPG

This example shows the highest city MPG vehicles by make, using a sequential bar chart where warmer reds indicate higher MPG values. The chart sorts car makes from lowest to highest MPG, with interactive tooltips displaying exact values on hover. Built with D3 v6, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` to map data, while `d3.axisBottom` and `d3.axisLeft` render axes. A color legend from the d3-legend library explains the red color scale, and all graphics are drawn as SVG elements with mouseover/mouseout events.

Loading thumbnail…

Assignment 10 -- Bar Chart - Black Hat

A bar chart displays the total votes for Donald Trump and Joe Biden in California’s 2020 election, with labels “6M” and “11M” superimposed above their respective bars. The chart is intentionally deceptive: it omits a y-axis scale and truncates the y-axis to start near the minimum vote count, making the tall bars appear closer in height than the actual vote difference. The visualization loads data from a CSV using `d3.csv`, renders SVG rectangles via `d3.select` and `d3.scaleBand`, and colors bars with `colorbrewer.Reds[7]` through a `d3.scaleQuantize`.

Loading thumbnail…

Assignment 6 -- Bar chart with a Sequential color scale

A bar chart displays average engine horsepower for seven car makes, sorted from lowest to highest, with a sequential red color scale encoding the horsepower value. The chart uses D3 v6 with SVG rendering, including axes, a color legend, and a tooltip that shows the exact value on hover. The code reads data from a CSV file, applies a quantized color scale from the ColorBrewer library, and uses the d3-legend API to generate the legend.

Loading thumbnail…

Assignment 7 -- edge-bundling

This radial edge-bundling visualization uses D3 v4 to display a hierarchical network of family members and the car brands they own. The SVG rendering shows connections between people and brands, with hover interactions highlighting source and target nodes in red and green. The code builds a hierarchy from CSV data using d3.cluster and d3.radialLine with curveBundle, while d3.csv loads the credits1.csv file containing the relationship matrix.

Loading thumbnail…

Assignment 10 -- Bar Chart - White Hat

This bar chart displays the total votes for Donald Trump and Joe Biden in the 2020 California election, with each bar’s height proportional to its vote count. The visualization uses D3.js with SVG rendering and sequential color encoding, mapping vote totals to a red color scale. A hover tooltip reveals exact figures, while the y-axis provides a scaled reference for comparison. The chart is built using D3's `scaleBand`, `scaleLinear`, and `axisLeft` APIs, with data loaded from a CSV file.

Loading thumbnail…

Proportional symbols map

This proportional symbols map overlays circles on a U.S. state map to visualize grocery cost indices, with the ten most expensive states highlighted in red and a legend showing cost values. The visualization uses D3 v3’s `d3.geo.path`, TopoJSON, and a queue to load map boundaries, state centroids, and cost data. Point radii are scaled with `d3.scale.sqrt`, and hovering a circle triggers a tooltip, dims other symbols, and uses an SVG transition for emphasis.

Loading thumbnail…

Choropleth World population map

A choropleth world map visualizes population data by country, using sequential color intensity from a threshold color scale to represent population magnitude. The visualization employs a Robinson projection to render the geographic layout, with each country's fill color derived from a CSV dataset joined to the GeoJSON map data. Interactive features include tooltips on hover, displaying the country name and calculated population in millions, while click and hover events trigger opacity and stroke changes. The implementation utilizes d3.geoPath for map drawing, d3.scaleThreshold for color classification, and d3.queue for asynchronous data loading, all rendered as SVG elements within a styled HTML container.

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Loading thumbnail…

Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position encodes horsepower and torque on the x- and y-axes, while its radius represents highway MPG and its color distinguishes the car manufacturer. Built with D3 v7 using SVG and animation, the visualization reads data from a CSV file and includes interactive tooltips that display the make on hover. Axes, a size legend for MPG values, and a color legend for car brands are generated using d3.scaleLinear and d3.scaleOrdinal.

Loading thumbnail…

Assignment 8 -- Multi-Series Line Chart V7-Voronoi

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin from October 2011 to April 2012. A Voronoi diagram, computed using the `d3.voronoi` API with `d3.voronoi.v1`, overlays the plot to enhance interactivity. Users can hover over cells to highlight the corresponding city’s line and click to toggle its visibility. The visualization is rendered as an SVG using the D3 v7 library, with axes and curves generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. A checkbox labeled “Show Voronoi” is present but disabled. Data is loaded from a tab-separated file using `d3.tsv`, and city lines are color-coded using `d3.schemeCategory10`.

Loading thumbnail…

Assignment 8 -- Multi-Series Line Chart V7-Electric_Production

This interactive multi-series line chart visualizes monthly electric production values from 1985 onward, with each line representing a data column from a TSV file. Users can hover over lines to highlight them, click to toggle their visibility, and zoom in on the time axis. The visualization uses D3 v7’s `d3.line` with `d3.curveBasis`, `d3.scaleTime`, `d3.scaleOrdinal`, and `d3.zoom`, rendering SVG paths with animated transitions. Data is parsed with `d3.timeParse` and loaded via `d3.tsv`.

Loading thumbnail…

Assignment 8 -- Multi-Series Line Chart V7

This example shows a multi-series line chart comparing daily average temperatures in New York, San Francisco, and Austin over a period of several months. The visualization uses D3 v7 with SVG rendering to draw three smooth lines, one per city, with interactive features that dim unrelated lines on hover and allow users to toggle each city’s visibility by clicking its legend label. Zooming is supported via `d3.zoom` with a time-scaled x-axis, and the line geometry is generated using `d3.line` with `curveBasis`. Data is loaded from a TSV file.

Loading thumbnail…

Assignment 7 -- Adjacency Matrix

This example pairs a force-directed node-link diagram with an adjacency matrix to explore connections between U.S. states. The matrix encodes link strength with color opacity and groups states by region, with cells colored by group membership. Users can reorder matrix rows and columns by link count or name via a dropdown, triggering animated transitions. The visualization uses d3.v3 with `d3.layout.force` for the node-link view and ordinal/linear scales for the matrix, rendering in SVG. Data comes from a custom `miserables.json` file.

Loading thumbnail…

Assignment 7 -- Force-Directed Graph & Adjacency Matrix

This example presents a food-related dataset as both an interactive force-directed graph and an adjacency matrix. The force-directed layout uses `d3.forceSimulation` to position nodes and links, with drag behavior and animated tick updates. The adjacency matrix encodes edge weights through square opacity levels, rendered as SVG rectangles, with tooltips showing source and target IDs. Both visualizations are built with D3 v6, using SVG and animation, drawing from a CSV file.

Loading thumbnail…

Assignment 6 -- Multiline chart with a qualitative color scale

A multiline chart shows annual net forest conversion for South American countries from 1990 to 2015, with each country’s time series drawn as a separate line using a qualitative color scale via d3.scaleOrdinal and d3.schemeCategory10. The visualization uses d3.csv to load the data, d3.nest to group by entity, and d3.line with d3.scaleTime and d3.scaleLinear for axes. SVG paths render the lines, and hover interactions trigger a yellow tooltip displaying the country name. The chart includes a legend and title, with the y-axis domain set from the minimum value to zero.

Loading thumbnail…

Assignment 6 -- Scatter plot with a qualitative color scale

This scatter plot shows the relationship between average horsepower and average torque for various car makes, with each point colored by the manufacturer using a qualitative color scale. The visualization uses D3.js v4 to render an SVG chart, employing `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for the categorical colors. Tooltips display the make and exact values on hover, while a legend identifies the color mapping. The data is loaded from an external CSV file (`stripechart1.csv`) containing average engine statistics.

Loading thumbnail…

D3 Scatter Plot for Assignment 4

This interactive D3.js v4 scatter plot visualizes the correlation between torque and horsepower for BMW models from 2009-2012. The SVG rendering displays a subset of the data as green, semi-transparent circles. It includes axis labels, a title, and a tooltip that appears on mouseover, showing the Horsepower value. The chart reads data from a CSV file and uses D3's scaleLinear, axisBottom, and axisLeft methods to construct the visualization.

Loading thumbnail…

D3 Bar Chart for Assignment 4

This D3.js bar chart visualizes the distribution of horsepower for German car brands using a histogram. The chart bins horsepower values into equal-width intervals along the x-axis, with bar heights representing the count of vehicles in each range. Built with an SVG rendering, the visualization features a blue color scheme and includes axis labels and a title. Interactive tooltips appear on hover, displaying the specific horsepower range of each bar. The implementation uses d3.csv for data loading, d3.histogram for binning, and d3.scaleLinear for both axes.

Loading thumbnail…

Assignment 5 - Scatterplot matrix

This visualization combines a scatterplot matrix of car attributes with a bubble chart comparing average horsepower, torque, and highway MPG by brand. The matrix displays pairwise relationships among six numeric variables, with each point colored by car make using `d3.scaleOrdinal` and `d3.interpolateTurbo`. The bubble chart encodes highway MPG through circle radius via `d3.scaleLinear`, with a tooltip implemented using D3’s event handlers. Both views use `d3.csv` to load data and D3 v7 to render SVG elements.

Loading thumbnail…

Assignment 5 - Bubble Chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car brands. The x-axis represents horsepower, the y-axis represents torque, and the bubble size encodes highway MPG, with color distinguishing each brand. Built with D3 v7, the SVG visualization includes interactive tooltips that appear on mouseover, showing the car make. A legend explains the bubble size scaling for highway MPG values. The chart uses ordinal color scaling via `d3.interpolateTurbo` and linear scales for positioning and sizing, with data loaded from a CSV file.

Loading thumbnail…

Assignment 5 - Line Chart

This line chart visualizes the average kilometers driven for used cars by model year, using a blue line over a time-scaled x-axis and linear y-axis. The visualization is built with D3 v7, loading data from a CSV file and rendering an SVG chart. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to draw the path, and `d3.timeParse` to convert year strings into dates. The chart includes labeled axes and a title, with no interactive elements beyond the static SVG output.

Loading thumbnail…

Strip Chart with Jitter for Assignment 3

This strip chart displays average city MPG across five car makes (Audi, BMW, Mercedes, Porsche, Volkswagen) for 2009–2012 models. Each dot represents a vehicle, with horizontal jitter applied to reduce overplotting. The visualization uses p5.js for rendering, loading data from a CSV via `loadTable()`, and drawing points with `point()` and custom axes. Tooltips appear on hover, showing the exact MPG value using `mouseX`/`mouseY` coordinates. Color-coded dots correspond to each make, and gridlines at 5-MPG intervals aid comparison.

Loading thumbnail…

Box Plot for Assignment 3

This example shows a box plot that summarizes the distribution of median city MPG values for all car makes and models from 2009 to 2012. It displays the minimum, first quartile, median, third quartile, and maximum values along a vertical axis. The visualization is built with p5.js, loading a CSV dataset from a GitHub gist. The code programmatically calculates the quartiles from the sorted data and uses basic shape-drawing functions like `rect()` and `line()` to construct the plot.

Loading thumbnail…

Histogram for Assignment 3

This visualization displays a histogram of average city miles per gallon (mpg) for various car makes and models from 2009 to 2012, with bar heights representing the count of vehicles at each mpg value. Built with p5.js, the sketch loads a CSV file containing mpg and count data, then renders the bars using the `rect()` function, scaling values via a custom `scale()` helper. The code draws grid lines, axis labels, and annotated data values directly on the canvas, with a title and rotated y-axis label for clarity.

Loading thumbnail…

P5js Heatmap

This p5.js heatmap visualizes the relationship between car brands and two metrics, Horsepower and MPG, using a color-coded grid. The color of each cell transitions from orange (lower values) to green (higher values) based on the data's minimum and maximum. Built with the p5.js library, the visualization loads CSV data from a Gist, calculates color values using the `map()` function, and renders the results as colored squares. The chart includes labels for the axes and a color legend indicating green for higher and orange for lower values.

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower of top German car brands, including Porsche, Mercedes-AMG, and BMW, with values read from a CSV file. The visualization uses the p5.js library, loading data via the `loadTable` function and rendering bars with the `rect` API on a canvas. A horizontal grid with labeled tick marks aids comparison, and brand names are rotated vertically on the left axis. The chart’s color scheme uses muted green bars against a light gray background.

Loading thumbnail…

P5js Dotplot

This dot plot compares the average horsepower of top German car brands, showing values like Porsche’s 512.5 and Volkswagen’s 192.5. The p5.js sketch renders steel-blue circles for each brand’s data point on a grey grid with labeled axes. It loads the CSV dataset via `loadTable`, then uses `circle` and `text` to draw the visualization, with rotated labels for the y-axis title.