Skip to main content
Log in
L

lzlazmSylas

@lzlazmSylas·21 public vizzes

Loading thumbnail…

Data Visualization for Indian Crimes

This interactive visualization maps the number of rape crime cases across Indian states, with user-selectable year and crime-type dropdowns. An animated choropleth displays state-level data, while two donut charts show crime-type distributions and yearly trends, all rendered with D3 v7 and TopoJSON for geographic shapes. It uses `d3.rollups` and `d3.scaleOrdinal` for data aggregation and coloring, with datasets on criminal cases and population sourced from GitHub gists.

Dec 9, 2021
Loading thumbnail…

Chart

The visualization presents crime case data for Indian women through a central choropleth map of India and two accompanying donut charts. It enables exploration by year and crime type via dropdown menus, with animated transitions between selections. Built with D3.js v7, it uses `topojson.feature` to convert India's TopoJSON states into GeoJSON, `d3.rollups` for data grouping, and SVG paths for rendering. The dataset is sourced from a GitHub gist of crime statistics.

Nov 17, 2021
Loading thumbnail…

Bar chart and map chart for dataset

Linked bar chart and map views display crime statistics across Indian states, with a choropleth map colored by case counts and an adjacent horizontal bar chart showing the same values in descending order. Two dropdown menus filter the data by year and crime type, such as rape or dowry deaths. The visualization uses D3 v7 with `d3.scaleLinear`, `d3.scaleBand`, and `d3.geoPath` to render the map from TopoJSON data, while the bar chart updates via shared scales and a re-render function. The dataset comes from a CSV file on crime against women.

Nov 8, 2021
Loading thumbnail…

Fork of Fork of Scatter Plots of TV_SHOWS_REVISE

This visualization presents TV show ratings from a Rotten Tomatoes dataset, plotting release year on the x-axis and Rotten Tomatoes scores on the y-axis. Circle radius encodes half the IMDb score, with all points colored salmon. The main scatter plot uses d3.scaleLinear axes, while a second chart below shows a bar histogram of show counts per year, also using d3.rollups for aggregation. A d3.brushX selection is built into the scatter plot to filter data interactively, with the SVG rendered using D3 v6.

Oct 22, 2021
Loading thumbnail…

Scatter Plots of TV_SHOWS_REVISE

This scatter plot visualizes TV shows, mapping release year on the x-axis and Rotten Tomatoes scores on the y-axis, with circle radius encoding half of the IMDb score. All circles are colored salmon, reflecting the drama/show genre designation. The visualization uses d3.csv to load data from a GitHub Gist, d3.scaleLinear for all positional and radius scales, and d3.axisLeft and d3.axisBottom to render axes in SVG. A second, smaller context area is set up using d3.scaleLinear, though the brushing interaction remains commented out in the code.

Oct 19, 2021
Loading thumbnail…

Brush with scatter plot

This visualization plots COVID-19 daily confirmed cases in Singapore against dates, using a scatter plot where each point’s radius reflects half the daily count. The chart uses d3.csv to load the data, d3.scaleLinear for both axes and the radius scale, and d3.axisLeft and d3.axisBottom for ticks. Points are rendered as semi-transparent salmon-colored SVG circles. The x-axis shows the date while the y-axis shows the daily confirmed cases, revealing trends in case numbers over time.

Oct 19, 2021
Loading thumbnail…

Interactive Bar chart for Crime against Indian Woman

This interactive bar chart displays the number of crimes against women across Indian states, with a dropdown menu to filter by year and another to select a specific crime type. The bars are sorted in descending order, and the bar widths animate smoothly when the selection changes. The visualization uses D3 v7 with `scaleLinear`, `scaleBand`, `rollups`, and `transition` to update the chart. Data comes from a CSV file of reported crimes, aggregated by state and year, with the x-axis showing case counts and the y-axis listing states.

Oct 13, 2021
Loading thumbnail…

Fork of Fork of Iterate my work - bar chart of crime in India_VER1.3

This interactive bar chart displays crime statistics across Indian states for a selected year and crime type. Users choose parameters from two dropdown menus, and the visualization responds by filtering and sorting the data in descending order. The chart uses D3 v7 scales and axes to render horizontal bars, with hover effects that adjust bar opacity. The visualization reads from a CSV dataset containing crimes against women, aggregating values by state and year through the d3.rollups function.

Oct 11, 2021
Loading thumbnail…

Interactive_Scatterplot_Crime_against to woman

This interactive scatterplot displays reported crime cases against women in India across different states from 2001 to 2012, with the year on the x-axis and total cases on the y-axis. A dropdown menu allows viewers to switch between six crime categories, including rape, kidnapping, and dowry deaths, using D3’s event dispatch system. The visualization uses d3.scaleLinear for both axes and d3.axisLeft/axisBottom for tick marks, with animated transitions (d3.transition) that grow circles and smoothly update positions when the selected metric changes. Data comes from a CSV file loaded via d3.csv.

Oct 7, 2021
Loading thumbnail…

Iterate my work - bar chart of crime in India

This bar chart shows the total number of rape cases per state in India for the year 2008, sorted in descending order. It uses D3 v7’s `scaleBand` and `scaleLinear` with SVG rendering. A `rollup` call aggregates cases by state, and an axes are drawn with `axisLeft` and `axisBottom`. Bars change opacity on hover and display the state name via a tooltip div, while a fixed year filter removes overlapping bars.

Oct 7, 2021
Loading thumbnail…

Add Interaction - bar chart of crime in India

This interactive bar chart visualizes rape crime cases across Indian states for a selected year from 2001 to 2014. A dropdown menu filters the data by year, and bars are sorted in descending order by case count. Hovering over a bar triggers a transition that adjusts opacity and displays the state name in a tooltip. The visualization uses d3.csv to load the dataset, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for axes, with SVG rendering and D3 transitions for the hover effect.

Oct 7, 2021
Loading thumbnail…

Fork of INTER - bar chart of crime in India VER.3

This bar chart shows the total number of rape cases recorded across Indian states for the year 2008, with states sorted in descending order along the y-axis. Built with D3.js v7, the visualization uses `d3.rollup` to aggregate the dataset by state and `d3.scaleLinear` and `d3.scaleBand` for axes. Each bar responds to mouseover events by changing opacity and displaying a tooltip with the state name. The SVG rendering includes custom axis styling and labels for the chart title and axis titles.

Oct 6, 2021
Loading thumbnail…

INTER - bar chart of crime in India VER.2

This bar chart displays the total number of rape cases reported across Indian states for the year 2008, sorted in descending order. The visualization uses D3 v7 with SVG rendering and animated transitions, featuring a hover effect that highlights each bar and displays the state name in a tooltip. The code filters the dataset to a specific year, aggregates the crime data using d3.rollup, and scales the bar lengths with d3.scaleLinear and d3.scaleBand. Data comes from a CSV file hosted on GitHub Gist, with axes labeled for state and case count.

Oct 6, 2021
Loading thumbnail…

Sscatter plots of Crime_Woman

The scatter plot shows the yearly counts of three crimes against women in India—rape, kidnapping and abduction, and dowry deaths—using colored circles (salmon, green, and blue) plotted against the year on the x-axis and case numbers on the y-axis. It reads data from a CSV file via d3.csv, parses numeric columns, and uses d3.scaleLinear for axes and d3.axisLeft and d3.axisBottom to draw the chart, with circles positioned by mapping values for each crime type. The visualization overlays all three datasets on a single scatter chart, using semi-transparent points to reveal trends over time.

Sep 30, 2021
Loading thumbnail…

XBOX_GAMES_SALE

This scatterplot displays Xbox game sales over time, with red circles representing global sales and green circles representing North American sales in millions. Each circle’s y-axis position encodes the sales value, while the x-axis maps the release year from 2012 to 2020. The visualization uses D3 v6’s `csv` loader, `scaleLinear` for both axes, and `axisLeft` and `axisBottom` to render the scales. Data comes from a GitHub Gist containing the XBOX_Game_Sale.csv file, with fixed axis domains and a 5-pixel radius for all points.

Sep 30, 2021
Loading thumbnail…

Bar chart of crime in India

This bar chart displays the total number of rape cases reported across different states in India, with each bar’s height proportional to the case count. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map case numbers to horizontal bar lengths and states to vertical positions, rendering as SVG with semi-transparent red bars. The x-axis is labeled “Total number of rape crime cases in India,” and data comes from a CSV file loaded via `d3.csv` containing crime statistics against women.

Sep 29, 2021
Loading thumbnail…

TV_Shows_data

This example displays a plain-text summary of the TV_Shows_data CSV file, reporting its size in kilobytes, row count, and column count. It loads the dataset from a GitHub-hosted CSV using the `d3.csv` method, then formats the output with `d3.csvFormat`. The visualization is minimal, showing no charts, but it demonstrates the initial data-loading and metadata-reporting step using D3 v5.

Sep 9, 2021
Loading thumbnail…

Product_Sales_Data

This example displays basic metadata from a product sales dataset, showing the file size, number of rows, and number of columns in a large text preformatted element. It loads the CSV from a GitHub gist using `d3.csv` and formats the data with `d3.csvFormat` to calculate the byte size. The display is rendered as plain text inside an HTML `<pre>` tag, with the data retrieved asynchronously via a Promise. The visualization does not plot any charts or graphs, focusing instead on a minimal summary of the dataset’s structure.

Sep 9, 2021
Loading thumbnail…

Crimes_against_women_data

This example displays metadata about a dataset on crimes against women in India from 2012 to 2014, showing its size in kilobytes, row count, and column count. The visualization loads a CSV file from a GitHub gist using `d3.csv` and formats the raw text length with `d3.csvFormat`. It renders the resulting statistics in a large `<pre>` element, providing a minimal summary of the dataset's structure. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`.

Sep 9, 2021
Loading thumbnail…

GameStop Historical Stock Data

This example presents the daily historical stock prices of GameStop from February 2002 to January 2021, sourced from Kaggle, and addresses how the stock changed over that period. The page loads a CSV dataset using `d3.csv` and computes basic file statistics. It displays the approximate file size in kilobytes, the total number of rows, and the number of columns in a large `pre` element. The visualization itself is minimal, focusing on dataset summary rather than a chart, using D3 v5’s data-loading and formatting methods like `d3.csv` and `d3.csvFormat`.

Sep 9, 2021
Loading thumbnail…

Assignment 1(Sunrise)

A stylized SVG sunrise scene depicts a large orange sun with triangular rays above a layered sea of curved blue waves. The illustration uses basic SVG shapes, including circles and paths with quadratic Bézier curves, to create a geometric landscape. The sun is centered at the top, while five rows of overlapping wave forms in varying shades of blue recede toward the bottom of the 800x500 canvas. The code defines each element using SVG `<circle>` and `<path>` elements with explicit fill and stroke attributes.

Sep 8, 2021