shreyan2020

@shreyan2020·4 public vizzes

Untitled

The scatter plot visualizes automobile attributes from the UCI Machine Learning Repository’s Auto MPG dataset. It displays the relationship between vehicle characteristics, such as horsepower and fuel efficiency, as individual data points. The visualization is implemented using a Vue framework and D3.js v4, while the map background is rendered with the Leaflet API and OpenStreetMap tiles. The code initializes two separate map instances—one using a Leaflet constructor with OpenStreetMap tile layers, and another configured for target coordinates—though the final scatter plot rendering is not shown in the provided files.

Nov 27, 2020

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset. Two dropdown menus let the user select which columns map to the x- and y-axes. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom/axisLeft with tick marks. It renders as an SVG with circles, and updates with a smooth transition that animates each point’s position over two seconds when the selected columns change.

Nov 23, 2020

Loading thumbnail…

Line Chart w/ d3, react

This interactive line chart visualizes temperature changes over time using the Sense Your City dataset, rendered as an SVG graphic within a React application. The chart employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperature values, while custom React components encapsulate the axes and data marks. The line path is drawn using D3’s `line` and `curveNatural` functions, with axis ticks generated via `xScale.ticks()` and `yScale.ticks()`. Data is loaded asynchronously using D3’s `csv` parser, and the interface responds to JSON data fetched from a remote GitHub gist.

Nov 22, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses a D3.js v5 scaleLinear for both axes, with axisBottom and axisLeft for tick marks, and renders red, semi-transparent circles via SVG. The data is loaded from a CSV file using d3.csv, with numeric conversion performed on key attributes before rendering.

Nov 18, 2020