saatraju

@saatraju·9 public vizzes

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing horsepower against weight with points colored by production year. The visualization uses D3 v5 to implement linear scales, axes, and an ordinal color scale with a custom color legend that filters points when clicked. SVG rendering displays the scatterplot with axis labels and a title, while a YouTube video tutorial accompanies the example. The data is loaded via CSV and processed with number coercion before rendering.

Oct 9, 2018

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive map navigation with zoom and country selection using D3 v5. It renders a world map with a natural Earth projection, applying a blue sphere background and green country polygons with black borders. Viewers can click countries to trigger a selection state, though the visual feedback logic is commented out in the current code. The implementation uses d3.geoPath, d3.geoNaturalEarth1, and d3.zoom, with topojson for geographic data processing and d3.tsv for loading country name mappings from the World Atlas dataset.

Sep 23, 2018

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green against a blue ocean, with hover effects highlighting each country in red. The visualization uses a natural Earth projection realized through d3.geoPath and d3.geoNaturalEarth1, rendering geographic data from the world-atlas TopoJSON dataset alongside names from its accompanying TSV file. Users can pan and zoom the map using d3.zoom, which applies transformations to the entire group of country paths. Tooltips showing country names appear via SVG title elements appended to each path.

Sep 22, 2018

Loading thumbnail…

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions of fruit items within a bowl using D3.js. The visualization shows apples, lemons, and green apples appearing, disappearing, and changing types over time, with each fruit represented as a circle and label. The code employs D3 v5's `scaleOrdinal` for color and radius mapping, `transition().duration(1000)` for smooth animations, and SVG `g`, `circle`, and `text` elements. The rendering uses SVG with animations triggered by setTimeout calls that modify a fruit array and re-render the scene.

Sep 19, 2018

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example animates a set of fruit shapes in an SVG bowl, demonstrating special cases of D3’s general update pattern: removing the last item, modifying an existing item’s type, and filtering out a middle item. The visualization uses `d3.scaleOrdinal` to map fruit types to colors and radii, with `selection.enter`, `merge`, and `exit` to manage entering, updating, and leaving circles and text labels. The code relies on `d3.select` and `setTimeout` for timed transitions.

Sep 19, 2018

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for data joins by showing a dynamic bowl of fruit that changes over time, with apples and lemons added or removed. An ordinal color scale and radius scale map fruit types to visual properties. Using D3 v5, the code applies enter, update, and exit selections to manage SVG groups containing circles and text, while `setTimeout` triggers data mutations that re-render the scene.

Sep 19, 2018

Loading thumbnail…

Ebola victims

This line chart displays Ebola victim head counts across 2015, with time on the x-axis and casualty numbers on the y-axis. The visualization uses D3.js v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` path to render a smooth red trend line over an SVG canvas. Data comes from a CSV file hosted on VizHub, sourced from the Humanitarian Data Exchange. Gridlines and axis labels provide readability, while the title annotations clarify the chart’s purpose without interactive elements.

Sep 15, 2018

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with an area generator employing curveBasis to create a smooth filled path. Axes are labeled for time and temperature, with gridlines and a title, while data is loaded via d3.csv from a remote dataset.

Sep 15, 2018

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart uses a smooth, filled curve to emphasize temperature fluctuations across the week, with labeled axes and a title. The visualization is built with D3 v5 and rendered as SVG, using `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the filled path. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as JavaScript `Date` objects.

Sep 15, 2018