Miish84 (@Miish84), VizHub

Cars Scatter Plot with Menu

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Built with D3 v5, it renders circles as SVG elements, with axes using `axisBottom` and `axisLeft`. The interface includes a dropdown menu created with a custom `dropdown` function, though the options are placeholder values and no interaction logic is implemented. The plot displays gridlines, axis labels, and a title, with data loaded via `csv` from an external URL.

Apr 8, 2020

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a bowl, rendered as red circles with labels; hovering over a fruit highlights it with a black stroke, and selecting triggers updates. Over three seconds, the data changes: an apple is eaten, one becomes a yellow lemon, and another is removed, showing animated transitions. Built with d3 v5, it uses selection joins, `scaleOrdinal` for color and radius, and SVG circles, rects, and text elements within a single `<g>` per fruit.

Apr 8, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

The visualization shows a bowl of fruit where individual apples and a lemon can be clicked to select them, highlighting the chosen fruit with a thick black stroke. The fruit bowl updates over time as apples are removed or replaced, demonstrating data join transitions. Built with d3.v5, the example uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and event handlers on circles for click interactions.

Apr 8, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over a week, using a blue line to connect the data points. The data is loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` to create a smooth path. Axes are labeled "Time" and "Temperature," and the chart includes grid lines and a title.

Apr 7, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over a week, using a blue line to connect the data points. The data is loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` to create a smooth path. Axes are labeled "Time" and "Temperature," and the chart includes grid lines and a title.

Apr 7, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, with circle radius encoding miles per gallon (mpg). The chart uses D3 version 5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the auto-mpg dataset. Points are rendered as semi-transparent steelblue circles over a grid with labeled axes. The code demonstrates custom axis styling—removing domain lines, adjusting tick sizes, and adding rotated axis labels—through direct SVG manipulation.

Apr 7, 2020

Loading thumbnail…

Barchart

This bar chart displays population estimates for the ten most populous countries, using horizontal bars ordered from largest to smallest. The visualization is built with D3 v5, loading CSV data and rendering as SVG. It uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart demonstrates basic SVG features including margins, scales, and rect elements filled in steel blue.

Apr 7, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a cheerful face built entirely from SVG shapes, including circles, rectangles, and an arc path, all rendered on a yellow background. It uses D3 v5’s `select` and `arc` APIs to construct the geometry, with CSS defining stroke styles. The left eyebrow animates via chained `transition().duration()` calls, moving vertically over four seconds, while other facial features remain static.

Apr 7, 2020