Jaswitha09

@Jaswitha09·8 public vizzes

Untitled

This visualization shows the distribution of housing types in a dataset as a pie chart, with each category represented as a slice colored by a pastel scheme. The code loads CSV data from a remote GitHub gist, counts occurrences of each property type (apartment, house, condo, etc.), and renders the results using the vega-lite-api library. It uses `markArc` for the pie slices, encodes color by the nominal type field, and applies a count aggregation for the theta angle. The chart includes tooltips and a title indicating the number of housing types.

Nov 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between square footage and price, with each point representing a property and tooltips revealing the property type. Built using the Vega-Lite API, it loads CSV data from a GitHub gist and renders an interactive scatterplot. The code registers Vega and Vega-Lite, then configures the visualization with custom axis styling, a point mark with size and opacity settings, and a tooltip handler for interactivity.

Nov 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a horizontal line mark for each track and artist pair, with tooltips revealing weekly chart values from the Billboard dataset. The visualization uses the Vega-Lite API to construct a markLine encoding, mapping the `track` field to the x-axis and `artist` to the y-axis. Data is loaded via d3.csv from a gist, while vega, vega-lite, and vega-tooltip handle rendering and interaction. Configuration customizes axis and label appearance for clarity.

Nov 28, 2021

Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

This fork of a bar plot visualizes the top ten cities in Greater Boston with the highest number of Yelp restaurants rated four stars or above. Rendered as an SVG, the chart uses horizontal bars to compare city counts, with the x-axis showing the number of restaurants and the y-axis listing city names. The code leverages d3.scaleLinear and d3.scaleBand for axis scaling, and d3.axisLeft and d3.axisBottom to generate the axes. Data is loaded from a local CSV file, with the original source being the public Yelp dataset.

Nov 28, 2021

Loading thumbnail…

Fork of Fork of Fork of Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data from Data Canvas - Sense Your City, plotting temperatures in Celsius over time for multiple cities. Each city appears as a separate smoothed line, colored via d3.scaleOrdinal with schemeCategory10 and sorted by final temperature. The visualization uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.nest to structure the data. A color legend built with a custom function, axis labels, and gridlines rendered as SVG complete the chart.

Nov 28, 2021

Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, multi-hued line, with a color-coded legend on the right. The visualization uses D3 version 5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and a Bézier curve for line generation. The chart is rendered as an SVG, featuring a titled y-axis, labeled axes, and a legend created via a custom `colorLegend` module.

Nov 28, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This chart visualizes a week of temperature data from cities worldwide, using a line chart with multiple colored lines to compare temperature trends over time. It displays time on the x-axis and temperature in degrees Celsius on the y-axis, with each city represented by a distinct color from the `scaleOrdinal` and `schemeCategory10` palette. The visualization uses `d3.line` with `curveBasis` for smoothing and includes a color legend generated by a custom `colorLegend` function. Data is loaded via `d3.csv` from the Data Canvas - Sense Your City dataset and rendered as SVG.

Nov 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between engine displacement and horsepower in a dataset of automobiles, with tooltips revealing the model name of each point. Built with the Vega-Lite API and Vega-Lite 4.0, it renders points as semi-transparent circles with a custom dark theme and large axis labels. The code loads data from a CSV file via D3’s `csv` method, configures the chart through Vega-Lite’s JavaScript API, and uses Vega Tooltip for interactive hover details.

Nov 28, 2021